Thời lượng: 14:00

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 66MB

Trong video lần này chúng ta sẽ học một chút về jQuery như cách lưu đối tượng jQuery vào biến, cách di chuyển trong DOM, tạo phần tử mới trong DOM và chèn nó vào nơi mình muốn. Nếu bạn vẫn còn mới với jQuery, tôi khuyên bạn nên xem qua các chương sách về jQuery có ngay trên izwebz để hiểu thêm.

Thời lượng: 20:00

Download định dạng .avi chất lượng cao: MediaFire

Dung lượng: 151MB

Thay đổi Inline CSS

Trước khi chúng ta học những hiệu ứng jQuery, chúng ta cần xem lại một chút về CSS. Trong những chương trước đây chúng ta thay đổi giao diện của các thành phần trên trang bằng cách khai báo thuộc tính của class trong một stylesheet riêng biệt. Sau đó chúng ta thêm hoạc loại bỏ những class đó bằng jQuery. Về cơ bản thì cách này nên được sử dụng để thêm CSS vào HTML bởi vì nó tôn trọng quy luật tách riêng phần trình bày và cấu trúc. Tuy nhiên, đôi khi chúng ta muốn áp dụng style cho những thành phần chưa được, hoặc khó mà được, định dạng bằng stylesheet. Nhưng rất may mắn là jQuery có phương thức .css() để sử dụng cho những trường hợp này.

Phương thức này hoạt động bằng cả hai cách lấy và đăt. Để lấy giá trị của một thuộc tính, chúng ta chỉ cần chuyển tên của thuộc tính đó thành một một chuỗi, dạng như .css(‘backgroundColor’). Jquery có thể hiểu được những thuộc tính kết hợp bởi nhiều từ và nối với nhau bằng dấu – như là trong CSS (‘background-color’), hoặc dạng viết hoa chữ cái đầu như là (‘backgroundColor’). Để định dạng thuộc tính style, phương thức .css() có hai cách sử dụng. Cách thứ nhất chỉ nhận một cặp thuộc tính – giá trị. Cách thứ hai là nhận một tập hợp các cặp thuộc tính – giá trị.

.css('property','value')
.css({property1: 'value1', 'property-2': 'value2'}) 

Những người đã quen với JavaScript sẽ nhận ra đây là dạng đối tượng trực kiện JavaScript.

Chú ý: Các giá trị số không dùng dấu ngoặc kép trong khi giá trị chuỗi phải có dấu ngoặc kép. Tuy nhiên, khi sử dụng bản đồ ký hiệu, dấu ngoặc kép không bắt buộc cho những tên thuộc tính được viết dưới dạng in hoa chữ cái đầu.

Chúng ta sử dụng phương thức .css() cũng giống như cách chúng ta đã sử dụng .addClass(). Bằng cách gán nó cho một Selector sau đó thì Bind nó vào một sự kiện. Để minh hoạ, chúng ta sẽ sử dụng bộ nút thay đổi định dạng trong chương 3, nhưng với mã HTML khác.

<div id="switcher">
        <div class="label">Cỡ chữ</div>
        <button id="switcher-default">Mặc Định</button>
        <button id="switcher-large">Lớn</button>
        <button id="switcher-small">Nhỏ</button>
    </div><!--End #switcher-->

    <div class="speech">
        <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>
   </div><!--End .speech-->

Với một chút định dạng CSS cơ bản chúng ta có được hình dưới đây.

Xem Demo online – Example 1

Khác với bộ nút ở chương trước, trong chương này chúng ta sẽ sử dụng phần tử <button>. Khi người dùng nhấp chuột vào nút Lớn hoặc Nhỏ sẽ tăng hoặc giảm cỡ chữ trong thẻ <div class=’speech’>. Cuối cùng họ cũng có thể nhấn vào nút Mặc Định để trả cỡ chữ về giá trị ban đầu.

Nếu chúng ta chỉ muốn tăng cỡ chữ một lần với một giá trị đặt trước thì chúng ta vẫn có thể sử dụng phương thức .addClass(). Nhưng lần này chúng ta sẽ cho phép người dùng nhấp chuột nhiều lần vào nút, và mỗi lần nhấp cỡ chữ sẽ tăng hoặc giảm dần lên. Tất nhiên bạn cũng có thể tạo ra nhiều class và gán chúng cho mỗi lần nhấp chuột và sau đó chúng ta cho chạy vòng lặp qua từng class. Nhưng làm như thế nó thủ công quá và rất mất thời gian, cho nên cách lẹ hơn sẽ là lấy cỡ chữ của đoạn văn đó trước, sau đó thì tăng nó lên với giá trị mình muốn. Trong ví dụ này chúng ta sẽ cho tăng cỡ chữ lên 40% mỗi khi người dùng nhấp chuột.

Đoạn mã của chúng ta sẽ bắt đầu bằng $(document).ready() và bộ xử lý sự kiện $(‘#switcher-large’).click()

$(document).ready(function() {
$('#switcher-large').click(function() {
});
});

Để biết được cỡ chữ của đoạn văn đó là bao nhiêu rất đơn giản, jQuery có phương thức .css() cho phép bạn làm việc này. Tuy nhiên phương thức này lại trả về giá trị có thêm cái đuôi ‘px’, ví dụ là đoạn văn có kích thước chữ là 16px thì giá trị trả về sẽ là 16px. Cho nên chúng ta phải tìm cách cắt cái đuôi ‘px’ đó đi và chỉ giữ lại phần giá trị số là 16. Một điểm nữa là khi chúng ta định sử dụng một đối tượng jQuery nhiều lần, bạn nên nhớ lại selector bằng cách lưu đối tượng đó vào một biến.

$(document).ready(function() {
var $speech = $('div.speech'); //lưu đối tượng jQuery vào biến $speech
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10);
});
});

Ở dòng code thứ 2 chúng ta đã tạo ra một biến là $speech và lưu đối tượng jQuery vào đó. Bạn cũng nên lưu ý cách tôi đặt tên biến bắt đầu bằng dấu $, bởi vì trong javaScript bạn hoàn toàn có thể sử dụng dấu $ để đặt tên cho biến. Cho nên đây là cách để nhắc nhở chúng ta về sau là biến này đang chứa một đối tượng jQuery.

Trông bộ xử lý .click(), chúng ta sử dụng hàm parseFloat() để cắt đi phần đuôi ‘px’ và chỉ giữ lại phần giá trị số. Hàm parseFloat() sẽ kiểm tra một chuối theo thứ tự từ trái qua cho đến khi nó gặp một ký tự không phải là dạng số. Chuỗi số sẽ được biến thành dạng số thập phân. Trong ví dụ này nó sẽ biến chuỗi ’16′ thành dạng số 16 (quá giỏi >:<) và tất nhiên nó cũng sẽ cắt phần đuôi 'px' đi bởi vì nó không phải là số. Còn trong trường hợp chuỗi đó bắt đầu bằng chữ thay vì là số, hàm .parseFloat() sẽ trả về một giá trị là NaN, là chữ viết tắt của Not A Number (không phải số). Hàm parseFloat() có argument thứ hai để đảm bảo rằng giá trị số trả về dưới dạng hàng chục chứ không phải các dạng khác.

Cuối cùng chúng ta chỉ cần nhân biến num với 1.4 (tăng 40%) và sau đó đặt kích cỡ chữ bằng cách kết hợp num với ‘px’

$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10 );
num *= 1.4;
$speech.css('fontSize', num + 'px');
});
});

Lưu ý: Phương trình num *= 1.4 là dạng viết tắt phổ biến. Nó tương đương với num = num * 1.4. Nếu bạn thấy cách viết thường dễ hiểu hơn thì bạn cũng có thể sử dụng. Còn nếu không bạn cũng có thể dùng cách viết trên cho các phương trình khác như tính cộng num += 1.4, tính trừ num -= 1.4, tính chia num /= 1.4 và chia với số dư num %= 1.4.

Xem Demo online – Example 2

Bây giờ để nút Nhỏ Hơn có thể hoạt động, chúng ta sẽ chia num /= 1.4. Hơn nữa chúng ta sẽ kết hợp cả hai phép tính trên vào một bộ xử lý .click() cho tất cả các phần tử <button> nằm trong thẻ <div id=’switcher’>. Sau khi đã tìm ra được giá trị số, và dựa vào ID của nút nào được nhấn, chúng ta sẽ sử dụng phép nhân hoặc chia. Dưới đây là đoạn mã để làm việc này.

$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
if (this.id == 'switcher-large') {
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + 'px);
});
});

Nhớ lại ở chương 3 chúng ta có thể lấy thuộc tính id của một phần tử DOM bằng cách sử dụng từ khoá this, trong trường hợp này nó xuất hiện trong mệnh đề if … else. Làm như vậy thì nó hiệu quả hơn là phải tạo ra một đối tượng jQuery chỉ để kiểm tra giá trị của một thuộc tính.

Tiếp theo chúng ta cũng phải làm cho nút Mặc Định hoạt động để người dùng có thể trả về giá trị mặc định lúc ban đầu. Việc chúng ta cần làm là lưu kích thước font chữ của đoạn văn vào một biến ngay khi DOM sẵn sàng. Sau đó chúng ta có thể gọi lại giá trị này mỗi khi nút Mặc Định được nhấp. Chúng ta cũng có thể sử dụng thêm một mệnh đề else … if nữa, nhưng có lẽ mệnh đề Switch trong trường hợp này là hợp lý hơn.

$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.css('fontSize', num + 'px');
});
});

Ở đoạn code trên chúng ta vẫn kiểm tra giá trị của this.id và thay đổi kích thước chữ dựa vào nó, nhưng nếu giá trị của nó không phải là ‘switcher-large’ hoặc ‘switcher-small’ thì nó sẽ mặc định là kích cỡ ban đầu.

Xem Demo online – Example 3

Ẩn hiện cơ bản

Hai phương thức .hide() và .show(), khi không có tham số, có thể được coi là phương thức rút gọn của .css(‘display’,'string’), ở đó ‘string’ là một giá trị bất kỳ. Hiệu ứng đạt được của hai phương thức này thì cũng đơn giản như tên gọi, có nghĩa là nó sẽ ẩn hoặc hiện một thành phần nào đó.

Phương thức .hide() sẽ làm cho thuộc tính inline style cho các phần tử phù hợp trở thành display:none. Nhưng cái hay của phương thức này là ở chỗ nó ghi nhớ giá trị thuộc tính của display (thường là inline hoặc block) trước khi nó bị đổi thành none. Ngược lại, phương thức .show() lại trả về giá trị thuộc tính display ban đầu trước khi nó bị biến thành display:none.

Tính năng này của .show() và .hide() đặc biệt có ích khi bạn muốn ẩn một thành phần nào đó có thuộc tính display mặc định đã được khai báo trong stylesheet. Ví dụ, phần tử <li> có giá trị display mặc định là display:block, nhưng chúng ta lại muốn biến nó thành display:inline để sử dụng trong menu nằm ngang. May cho chúng ta là khi sử dụng phương thức .show() cho một thành phần bị ẩn như ở ví dụ này là những thẻ <li>. Nó sẽ không trả lại giá trị mặc định là display:block, bởi vì nếu như thế thì mỗi thẻ <li> lại xuất hiện trên một hàng thì hỏng hết. Thay vào đó, các phần tử sẽ được trả lại trạng thái trước là display:inline, như thế thì menu nằm ngang mới có thể hoạt động được.

Để minh hoạ cho tính năng trên, chúng ta sẽ thêm một đoạn văn bản thứ hai và một thẻ link “read more” vào sau đoạn văn thứ nhất.

<div id="switcher">
        <div class="label">Cỡ chữ</div>
        <button id="switcher-default">Mặc Định</button>
        <button id="switcher-large">Lớn</button>
        <button id="switcher-small">Nhỏ</button>
    </div><!--End #switcher-->

    <div class="speech">
        <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>
        <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>

        <a href="#" class="more">Read More</a>

Khi DOM sẵn sàng thì đoạn văn thứ hai bị ẩn đi

$(document).ready(function() {
$('p:eq(1)').hide();
});

Xem Demo online – Example 4

Khi đường link Read More được click thì đoạn văn thứ 2 sẽ xuất hiện và chữ Read More sẽ bị ẩn đi

$(document).ready(function() {
          $('p:eq(1)').hide();
          $('a.more').click(function() { //Khi thẻ <a class='more'> được click
            $('p:eq(1)').show(); //cho hiển thị đoạn văn thứ 2
            $(this).hide(); //this ở đây là chỉ đối tượng jQuery a.more ẩn đi
            return false; // ngăn không cho đường link hoạt động như mặc định
          });
        });

Dòng mã mà bạn cần lưu ý ở trên là đoạn return false. Bởi vì mặc định của đường liên kết mỗi khi được nhấp là sẽ liên kết đến trang khác hoặc phần nào đó. Nhưng khi ta thêm dòng return false, nó sẽ giúp ngăn chặn mặc định của đường liên kết.

Hai phương thức .show() và .hide() ở trên tuy ngắn gọn và dễ sử dụng nhưng nó lại không được “mướt” cho lắm, cho nên ở phần tiếp theo chúng ta sẽ làm cho nó mướt hơn.

Hiệu ứng và tốc độ

Khi ta thêm tốc độ, hay nói chính xác hơn là khoảng thời gian, vào phương thức .show() hoặc .hide(), nó sẽ trở thành hiệu ứng động xảy ra trong một khoảng thời gian định trước. Ví dụ như phương thức .hide() làm giảm chiều cao, độ rộng và tính trong suốt của một phần tử cùng một lúc cho đến khi cả ba giá trị đều bằng không. Đến lúc đó thuộc tính của CSS là display: none sẽ được áp dụng. Mặt khác, phương thức .show() thì tăng chiều cao của một phần tử từ trên xuống dưới, chiều rộng từ trái qua phải và độ trong suốt từ 0 đến 1 cho đến khi phần tử đó hoàn toàn có thể được nhìn thấy.

Tốc độ

Với hiệu ứng jQuery, chúng ta có thể sử dụng ba tốc độ có sẵn là: ‘slow’, ‘normal’ và ‘fast’. Sử dụng .show(‘slow’) sẽ làm cho hiệu ứng Show diễn ra trong 0.6 giây, .show(‘normal’) trong vòng 0.4 giây và .show(‘fast’) là 0.2 giây. Nếu bạn muốn chính xác hơn nữa, bạn có thể sử dụng millisecond như: .show(850). Không giống như dạng chữ, khi dùng millisecond, số không cần phải bỏ trong dấu nháy.

Quay lại ví dụ ở trên, bây giờ chúng ta sẽ thêm tốc độ vào xem nó như thế nào.

$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').show('slow');
$(this).hide();
return false;
});
}); 

Xem Demo online – Example 5

Fade in và Fade out

Hai phương thức .show() và .hide() cũng đã đủ ‘độ mướt’ rồi, nhưng có đôi khi bạn lại thấy ‘mướt’ quá cũng không tốt. Cho nên jQuery cho chúng ta một số những hiệu ứng động có sẵn khác để thêm phần linh hoạt. Ví dụ khi bạn muốn cả đoạn văn xuất hiện từ từ bằng cách tăng dần độ trong suốt của nó, chúng ta có thể sử dụng .fadeIn(‘slow’):

$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').fadeIn('slow');
$(this).hide();
return false;
});
});

Nếu muốn bạn cũng có thể thử với .fadeOut(‘slow’) xem công dụng của nó như thế nào.

Hiệu ứng đa hợp

Đôi khi chúng ta muốn đảo trạng thái ẩn hiện một thành phần nào đó thay vì chỉ hiển thị nó một lần như chúng ta đã làm ở các bước trên. Đảo trạng thái có thể làm được bằng cách kiểm tra độ nhìn thấy của một tập hợp các thành phần trước, sau đó thì gán một phương thức phù hợp cho nó. Sử dụng lại hiệu ứng fade, chúng ta có thể sửa lại mã như sau:

$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
if ($firstPara.is(':hidden')) {
$firstPara.fadeIn('slow');
$(this).text('read less');
} else {
$firstPara.fadeOut('slow');
$(this).text('read more');
}
return false;
});
});

Như chúng ta từng làm ở trên, chúng ta lưu selector vào một biến, trong ví dụ này là $firstPara = $(‘p:eq(1)’), để tránh phải lập lại việc lên xuống cây DOM. Chúng ta cũng không còn ẩn đi đường liên kết mà thay đổi chữ của nó.

Sử dụng mệnh đề if … else là hoàn toàn hợp lý để đảo trạng thái ẩn hiện của một phần tử. Nhưng với hiệu ứng đa hợp của jQuery, chúng ta không cần phải sử dụng dạng điều kiện này nữa. Jquery có một phương thức là .toggle(), hoạt động giống như .show() và .hide(), nó cũng có thể nhận hoặc không nhận tham số tốc độ. Một phương thức đa hợp nữa là .slideToggle(), nó được sử dụng để ẩn hoặc hiện một phần tử bằng cách từ từ tăng hoặc giảm độ cao của nó. Đoạn mã dưới đây chúng ta sẽ sử dụng phương thức .slideToggle().

$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
$firstPara.slideToggle('slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
}); 

Lần này từ khoá $(this) được dùng nhiều lần, cho nên chúng ta lưu nó lại vào một biến $link để đoạn mã hoạt động hiệu quả hơn và cũng dễ đọc hơn. Hơn nữa, mệnh đề điều kiện chỉ kiểm tra nội dung chữ của đường liên kết thay vì xem xem đoạn văn thứ 2 có hiện hay không. Bởi vì chúng ta chỉ sử dụng mệnh đề này để thay đổi chữ của nó.

Tự tạo hiệu ứng động

Ngoài những phương thức có sẵn, jQuery cung cấp thêm một phương thức rất mạnh nữa là .animate(). Nó cho phép chúng ta tự tạo ra những hiệu ứng động theo ý thích của mình. Phương thức .animate() có hai dạng. Dạng thứ nhất có thể nhận bốn đối số.

• 1.Cặp thuộc tính và giá trị – giống như .css() mà chúng ta đã thảo luận ở trên.
• 2.Tốc độ tuỳ chọn – có thể là một trong những tốc độ có sẵn hoặc một số dưới dạng millisecond.
• 3.Kiểu di chuyển – sẽ được bàn kỹ hơn ở chương sau
• 4.Một hàm gọi ngược sẽ được bàn ở phần dưới.

Kết hợp lại thì bốn đối số trên sẽ có dạng công thức chung như sau

.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('đã tiến hành xong');
});

Dạng thứ hai lấy vào 2 đối số, thuộc tính và tuỳ chọn.

.animate({properties}, {options})

Khi chúng ta xuống dòng để dễ đọc hơn thì dạng thứ 2 nhìn như sau:

.animate({
	property1: 'value1',
	property2: 'value2'
	}, {
duration: 'value',
easing: 'value',
complete: function() {
alert('The animation is finished.');
},
queue: boolean,
step: callback
});

Trước hết chúng ta sẽ sử dụng dạng thứ nhất của .animate(), sau đó chúng ta sẽ sử dụng dạng thứ 2 ở phần sau của chương này khi chúng ta bàn tới xếp hàng hiệu ứng.

Đảo trạng thái Fade

Khi chúng ta nói về hiệu ứng đa hợp, bạn có thấy rằng không phải phương thức nào cũng có những phương thức đảo trạng thái đi kèm. Ví dụ phương thức .slide() thì có .slideToggle(), nhưng không có .fadeToggle() cho .fadeIn() và .fadeOut(). Nhưng chúng ta có thể dễ dàng sử dụng phương thức .animate() để tạo ra hiệu ứng đảo trạng thái fade. Ở đoạn mã dưới đây, chúng ta sẽ thay thế phương thức .slideToggle() với hiệu ứng động tự tạo.

$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({opacity: 'toggle'}, 'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});

Xem ví dụ bạn sẽ thấy, phương thức .animate() cũng cho phép sử dụng những từ khoá như ‘show’, ‘hide’ và ‘toggle’. Khi mà những phương thức rút gọn khác không phù hợp với tác vụ.

Hiệu ứng động đa thuộc tính

Với phương thức .animate(), chúng ta có thể cùng một lúc sửa đổi bất cứ sự kết hợp nào của các thuộc tính. Ví dụ khi bạn muốn cùng một lúc tạo ra hai hiệu ứng trượt và mờ đi khi đảo trạng thái của đoạn văn thứ 2, chúng ta chỉ việc thêm cặp thuộc tính – giá trị chiều cao vào bản đồ thuộc tính .animate().

$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({
opacity: 'toggle',
height: 'toggle'
},
'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});

Hơn nữa, chúng ta không chỉ có những thuộc tính định dạng để sử dụng cho những phương thức rút gọn mà chúng ta còn có những thuộc tính khác như: left, top, fontSize, margin, padding và borderWidth. Hãy nhớ lại đoạn mã thay đổi kích thước chữ của đoạn văn ở trên. Chúng ta có thể tăng hoặc giảm kích thước bằng cách dùng .animate() thay cho .css().

$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.animate({fontSize: num + 'px'},
'slow');
});
});

Những thuộc tính vừa nêu ở trên còn cho phép chúng ta tạo ra nhiều hiệu ứng phức tạp khác. Ví dụ chúng ta có thể di chuyển một thành phần từ trái sang phải của trang web và cùng một lúc tăng chiều cao của nó lên 20px và thay đổi độ dày của border lên thành 5px. Chúng ta sẽ thực nghiệm với thẻ <div id=’switcher’>.

Với những giao diện co giãn, chúng ta phải tính toán được khoảng cách mà hộp div sẽ di chuyển trước khi nó chạm vào đường biên bên phải của trang.Giả sử rằng độ rộng của đoạn văn bản là 100%, chúng ta có thể lấy độ rộng của đoạn văn bản trừ đi độ rộng của hộp Cỡ Chữ. Jquery có một phương thức là .width() có thể sử dụng được trong trường hợp này, tuy nhiên nó lại không tính được padding trái phải hoặc độ rộng đường viền. Với jQuery phiên bản 1.2.6, chúng ta có thêm phương thức .outerWidth(). Đây chính là phương thức chúng ta sẽ sử dụng để tránh phải tính thêm vào padding và border. Trong ví dụ này chúng ta sẽ bắt đầu hiệu ứng động khi mà người dùng nhấp chuột vào từ Cỡ Chữ, ở ngay phía trên hàng nút. Đoạn mã sẽ tương tự như sau

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({left: paraWidth - switcherWidth,
height: '+=20px', borderWidth: '5px'}, 'slow');
});
}); 

Bạn nên chú ý đến thuộc tính height có dấu += trước giá trị pixel. Nó có nghĩa là giá trị tương đối. Nên thay vì nó làm cho hộp biến thành 20px, nó sẽ làm cho hộp to ra 20 px lớn hơn so với kích thước hiện tại.

Mặc dù đoạn mã trên làm cho thẻ div cao lên và border dày lên, nhưng nó không di chuyển sang bên tay phải như chúng ta muốn. Chúng ta phải thay đổi thuộc tính position của nó trong CSS.

Định vị trí với CSS

Khi bạn làm việc với .animate(), bạn nên nhớ đến tầm ảnh hưởng của CSS lên các thành phần chúng ta muốn sửa đổi. Ví dụ khi bạn điều chỉnh thuộc tính left như trên, nó sẽ không tạo ra thay đổi gì với các phần tử đó trừ khi những phần tử bạn muốn thay đổi có thuộc tính position là relative hoặc absolute trong CSS. Vị trí mặc định của CSS cho những thành phần Block-level là static, có nghĩa là tĩnh, điều đó nói lên lý do tại sao nó vẫn giữ nguyên vị trí khi bạn cố gắng di chuyển nó. Do vậy nếu bạn muốn nó được thay đổi, bạn phải sửa lại giá trị position của nó trong CSS.

#switcher {
position: relative;
}

Sau khi đã thay đổi thuộc tính position trong CSS, hộp nút của chúng ta đã di chuyển sang bên tay phải như hình

Xem Demo online – Example 6

Hiệu ứng đồng bộ và theo thứ tự

Phương thức .animate() như chúng ta đã biết được sử dụng để tạo ra hiệu ứng đồng bộ cho một tập hợp các phần tử. Nhưng cũng có lúc chúng ta lại muốn các hiệu ứng xảy ra theo thứ tự hết cái này rồi mới đến cái kia.

Làm việc với một tập hợp các phần tử đơn lẻ

Khi bạn muốn áp dụng nhiều hiệu ứng cho cùng một tập hợp các phần tử, queuing dễ dàng được tạo ra bằng cách kết nối các hiệu ứng lại. Để minh hoạ cho việc này, chúng ta lại sẽ di chuyển hộp Cỡ Chữ sang bên tay phải và tăng chiều cao và đường biên của nó. Tuy nhiên lần này chúng ta sẽ cho 3 hiệu ứng đó xảy ra lần lượt theo thứ tự. Chúng ta chỉ cần đặt mỗi hiệu ứng trong một phương thức .animate() và sau đó thì kết nối chúng lại với nhau

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.animate({left: paraWidth - switcherWidth},
'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');
});
});

Tất nhiên khi kết nối các phương thức lại, chúng ta có thể để cả ba phương thức .animate() trên cùng một dòng, nhưng vì như thế nó hơi khó đọc do vậy chúng ta để mỗi phương thức trên một dòng cho nó dễ đọc hơn.

Chúng ta có thể xếp hàng bất cứ phương thức jQuery nào bằng cách kết nối chúng với nhau. Ví dụ chúng ta cũng có thể kết nối các hiệu ứng cho thể <div id=’switcher’> với thứ tự sau:
1.Làm giảm độ trong suốt của nó xuống .5 với .fadeTo().
2.Di chuyển nó sang tay phải vơi .animte().
3.Tăng lại độ trong suốt thành 1 với .fadeTo().
4.Ẩn nó đi với .slideUp().
5.Cho hiện lại nó với .slideDown().

Tất cả những gì chúng ta phải làm là kết nối những hiệu ứng trên với thứ tự tương tự trong đoạn mã của chúng ta.

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});

Nhưng nếu bây giờ chúng ta muốn di chuyển thẻ <div> sang bên tay phải và cùng một lúc làm giảm độ trong suốt của nó đi một nửa thì sao? Nếu hai hiệu ứng này cùng xảy ra với cùng một tốc độ, thì chúng ta đơn giản chỉ cần kết hợp nó vào một phương thức .animate() là đủ. Nhưng trong ví dụ này, phương thức fade sử dụng tốc độ là ‘fast’ trong khi đó di chuyển sang phải lại sử dụng tốc độ là ‘slow’. Đây chính là lúc chúng ta cần sử dụng đến dạng thứ 2 của phương thức .method().

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, {duration: 'slow', queue: false})
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});

Đối số thứ 2 ở đây là một hoạ đồ tuỳ chọn, cho ta tuỳ biến queue. Nếu queue có giá trị là false sẽ làm cho hiệu ứng động xảy ra cùng một lúc với cái trước nó.

Điều cuối bạn cần biết về dãy hiệu ứng trên một tập hợp các phần tử đơn là queuing không tự động gắn lên những phương thức phi hiệu ứng khác như .css(). Ví dụ chúng ta muốn thay đổi màu nền của thẻ <div id=’switcher’> thành đỏ sau khi .slideUp() nhưng trước .slideDown(). Chúng ta có thể làm như sau:

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.css('backgroundColor','#f00')
.slideDown('slow');
});
});

Tuy đoạn mã để thay đổi màu nền được đặt đúng thứ tự trong mã, nhưng nó lại thay đổi màu nền ngay khi bạn nhấp chuột.

Xem Demo Online – Example 7

Có một cách mà bạn có thể thêm phương thức phi hiệu ứng vào dãy là bằng cách sử dụng phương thức .queue(). Đây sẽ là đoạn mã mà bạn có được.

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.queue(function() {
$switcher
.css('backgroundColor', '#f00')
.dequeue();
})
.slideDown('slow');
});
});

Xem Demo Online – Example 8

Ở đoạn mã trên, khi bạn cho phương thức .queue() một hàm hồi truy, nó sẽ thêm hàm đó vào dãy hiệu ứng của phần tử phù hợp. Ở trong hàm này, chúng ta đặt cho màu nền là màu đỏ và sau đó thì thêm vào phương thức hệ quả .dequeue(). Khi có sự xuất hiện của .dequeue(), nó cho phép dãy hiệu ứng tiếp tục nơi mà nó bị dừng lại và hoàn thành cả chuỗi hiệu ứng với dòng .slideDown(). Nếu chúng ta không sử dụng .dequeue(), thì hiệu ứng động đã dừng lại rồi.
Chúng ta sẽ tìm hiểu thêm một cách khác để xếp hàng những phương thức phi hiệu ứng. Trong phần tới chúng ta sẽ tìm hiểu hiệu ứng với đa hợp phần tử.

Làm việc với đa hợp phần tử

Không giống như khi làm việc với nhóm phần tử đơn, khi chúng ta sử dụng hiệu ứng cho các nhóm khác nhau, chúng gần như xảy ra cùng một lúc. Để thấy những hiệu ứng xảy ra cùng một lúc diễn ra như thế nào, chúng ta sẽ di chuyển một đoạn văn xuống dưới đồng thời kéo đoạn văn khác lên. Đầu tiên chúng ta sẽ thêm vào hai thẻ <p> nữa.

<div id="wrapper">
	<div id="switcher">
        <div class="label">Cỡ chữ</div>
        <button id="switcher-default">Mặc Định</button>
        <button id="switcher-large">Lớn</button>
        <button id="switcher-small">Nhỏ</button>
    </div><!--End #switcher-->

    <div class="speech">
        <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>
        <p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>

        <a href="#" class="more">Read More</a>
		<p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>
		<p>
        Pellentesque habitant morbi tristique senectus et netus et malesuada
        fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
        tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
        Aenean ultricies mi vitae est.
        </p>

    </div>
</div>

Tiếp theo để cho dễ quan sát, chúng ta sẽ cho đoạn văn thứ 3 một đường viền 1 px và đoạn văn thứ 4 có màu nền xám. Chúng ta cũng sẽ ẩn đoạn văn thứ 4 khi DOM sãn sàng.

$(document).ready(function() {
$('p:eq(2)').css('border', '1px solid #333');
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});

Cuối cùng chúng ta thêm phương thức .click() vào đoạn văn thứ 3 để khi nhấp chuột vào, thì đoạn văn thứ 3 sẽ chạy lên và ra khỏi tầm nhìn, trong khi đó đoạn văn thứ 4 sẽ chạy xuống và vào tầm nhìn.

$(document).ready(function() {
$('p:eq(2)')
.css('border', '1px solid #333')
.click(function() {
$(this).slideUp('slow')
.next().slideDown('slow');
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});

Kết quả bạn đã thấy hai hiệu ứng xảy ra gần như cùng một lúc. Đoạn văn thứ 3 chạy lên trên đồng thời đoạn văn thứ 4 đang bị ẩn cũng lò rò chạy lên trên.

Hàm hồi truy

Để có thể xếp hàng các hiệu ứng trên những phần tử khác nhau, jQuery cung cấp một hàm hồi truy cho mỗi phương thức hiệu ứng. Như chúng ta đã thấy với các bộ xử lý sự kiện và phương thức .queue(), hàm hồi truy chỉ đơn giản là đối số của một phương thức. Trong trường hợp hiệu ứng, chúng xuất hiện là đối số cuối cùng của phương thức.

Nếu chúng ta sử dụng hàm hồi truy để xếp hàng hai hiệu ứng trượt, chúng ta có thể cho đoạn văn thứ 4 trượt xuống trước khi đoạn văn thư 3 trượt lên. Ở ví dụ dưới đây chúng ta sẽ xem xét cách thiết lập phương thức .slideDown() với hàm hồi truy.

$(document).ready(function() {
$('p:eq(2)')
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow',function() {
// đoạn mã này sẽ chạy sau khi đoan văn thứ 3 dừng lại
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
}); 

Tuy nhiên chúng ta cũng cần phải thận trọng ở đây và phải biết chắc cái gì sẽ thực sự trượt lên. Ngữ cảnh cũng đã thay đổi với từ khoá $(this) bởi vì hàm hồi truy đang nằm trong phương thức .slideDown(). Khi $(this) được đặt trong hàm hồi truy thì nó không còn chỉ đoạn văn thứ 3 nữa như khi nó còn ở ngoài với phương thức .click(). Bởi vì phương thức .slideDown() được gán cho
$(this).next(), tất cả những gì nằm trong phương thức này sẽ nhìn nhận $(this) là anh em họ của nó hoặc nói khác đi chính là đoạn văn thứ 4. Cho nên nếu chúng ta thêm $(this).slideUp(‘slow’) vào trong hàm hồi truy, chúng ta sẽ kết thúc với việc cho ẩn đi đoạn văn mà chúng ta vừa cho hiện lên.

Một cách đơn giản để giữ $(this) không bị thay đổi là lưu nó ngay vào một biến trong phương thức .click() như sau: var $thirdPara = $(this). Bây giờ biến $thirdPara chính là đoạn văn thứ 3, ở cả trong và ngoài hàm hồi truy. Đây là đoạn mã sử dụng biến vừa tạo của chúng ta.

$(document).ready(function() {
var $thirdPara = $('p:eq(2)');
$thirdPara
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow',function() {
$thirdPara.slideUp('slow');
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});

Sử dụng biến $thirdPara ở trong hàm hồi truy .slideDown() phụ thuộc vào thuộc tính của Closures. Chúng ta sẽ bàn thêm về thuộc tính rất quan trọng nhưng hơi khó hiểu này trong phần sau.

Khi bạn cho chạy đoạn mã trên bạn sẽ thấy cả hai đoạn văn đều xuất hiện, khi đoạn văn thứ 4 đã trượt xuống hết thì đoạn văn thứ 3 mới bắt đầu trượt lên.

Bây giờ bạn đã hiểu được hàm hồi truy, chúng ta có thể trở lại đoạn mã ở trên trong chương này. Đoạn mà chúng ta xếp hàng cho hiệu ứng đổi màu nền ở gần cuối của dãy hiệu ứng. Thay vì chúng ta sử dụng phương thức .queue() như trước đây, chúng ta có thể sử dụng hàm hồi truy để thay thế.

$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('slow',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow', function() {
$switcher
.css('backgroundColor', '#f00');
})
.slideDown('slow');
});
});

Khi cho chạy đoạn mã bạn sẽ thấy màu nền của thẻ <div id=’switcher’> đổi thành màu đỏ sau khi nó đã trượt lên và trước khi nó trượt xuống.

Tóm lược

Bằng cách sử dụng những phương thức hiệu ứng chúng ta vừa học ở chương này, chúng ta có thể tăng hoặc giảm dần cỡ chữ bằng cách sử dụng .css() hoặc .animate(). Chúng ta cũng có thể áp dụng nhiều hiệu ứng để ẩn hoặc hiện một phần tử bất kỳ bằng nhiều cách và tạo hiệu ứng động cho nó xảy ra cùng một lúc hoặc theo thứ tự.

Ở 4 chương đầu này, tất cả những ví dụ của chúng ta đều là dạng sửa đổi những phần tử đã được viết mã HTML trước. Trong chương 5, chúng ta sẽ học cách sử dụng jQuery để tạo ra các phần tử mới và thêm chúng vào cây DOM bất cứ khi nào ta muốn.

Download định dạng .pdf

Bạn có thể download định dạng .pdf của chương này về đọc offline

Đọc tiêu đề chắc hẳn các bạn đã quá quen với cụm từ WEB rồi đúng hok? Nhưng mà tại sao ở đây lại có chữ S ở phía sau nữa. Hãy tìm hiểu xem cụm từ này là viết tắc của những từ nào nhá!

W – Why?
E – Energy
B – Basic
S – Smiles or Scrazy

Chắc chắn rằng bạn cũng đã nôm na hiểu nghĩa của những cụm từ trên rồi phải không? Nhưng mà mình cũng xin được giải thích thêm 1 chút về ý nghĩa của từng cụm từ.

- Đầu tiên đó là (W) Why? Nghĩa tiếng việt là tại sao? Tại sao bạn lại muốn trỏ thành Webmaster? Đó là câu hỏi mà bạn phải trả lời được khi mà bạn muốn trở thành một Webmaster đúng nghĩa. Và nếu rằng bạn hỏi tôi tại sao tôi muốn trở thành Webmaster? Thì tôi sẽ trả lời với bạn chỉ với 2 chử “đam mê”.

- (E) Energy đó là nghị lực. Bạn phải có đầy đủ tinh năng lực, sức mạnh, và tính kiên nhẫn để có thể trở thành Webmaster thực thụ. Vì chắc chắc các bạn biết đấy công việc của Webmaster không phải là ngồi xem người khác (tạm gọi là S.Mod, Mod) làm việc, mà mình phải cùng họ làm việc, chỉ có như thế thì mới có thể xây dựng 1 website vững mạnh. Và để tìm hiểu xem tại sao nghị lực lại cần thiết thì chúng ta hãy tìm hiểu cụm từ thứ 3 (B)-Basic.

- (B) Basic với nghĩa tiếng việt ai trên 5 tuổi cũng biết (giờ 5 tuổi là mấy nhóc học Les’t Gâu hết rồi ^^~). Để làm rõ nghĩa của basic thì chúng ta hãy phân tích cụm từ Webmaster. Webmaster gồm 2 từ ghép lại với nhau, và ở 2 lĩnh vực khác nhau, nhưng lại có mối quan hệ rất khăn khích đó là Web và Master.

+Web thì chắc các bạn cũng đã biết rồi hén. Web thì bao gồm rất nhiều thứ nào là HTML rồi CSS, Jquery cho tới PHP rồi lại MySQL, không kém quan trọng là Photoshop. Và là 1 Webmaster thì bạn không thể thiếu 1 trong các thứ trên, tuy nói thế không có nghĩa là bạn phải nhồi nhét hết tất cả vào đầu, mà chúng ta cầm phải biết mỗi thứ 1 ít, đủ để nắm vững những kiến thức căn bản. Và hãy chắc chắn rằng bạn cần phải có đủ Energy – nghị lực để mà có thể làm việc với chúng.

+Chà viết nãy giờ thì cũng chỉ mới 1 một phần thôi, sao mà làm Webmaster thì cần lắm thế, chưa nhiều lắm đâu bạn, khi mà bạn làm quen với Master thì nói mới là đủ cho một Webmaster. Master là ông chủ, là chùm của tất cả. Hay nói cách khác, master chính là người quản lý. Và người quản lý thì tất nhiên nhiệm vụ của họ là điều hoạt động của một tổ chức (ở đây có thể là forum hay một trang tin tức,…v.v). Để điều hành tốt tổ chức thì ông chùm cần phải biết quản lý và tôi khuyên các bạn nên biết chút ít về “Quản trị nhân sự”.

- Vẫn chưa hết đây các bạn, là Webmaster thì bạn cần thêm 1 ít kiến thức về Marketing nữa, vì sao? Đơn giản là vì bạn làm Web ko chỉ để mỗi ngày bạn tự vào Web rồi tự F5 được, làm Web ra thì phải có người xem. Để có được người xem thì bạn cần phải biết tiếp thị Web của mình. Con đường đơn giản nhất là tìm một cuốn sách mang tên “Marketing căn bản” về đọc.

- Bạn thấy hãi hùng chưa? Riêng mình thì đã quay mòng mòng rồi vì lần đầu ngồi viết điên cuồng như thế này đấy. Tới đây chắc rằng bạn đã bắt đầu choáng rồi nhỉ, nhưng mà không sao đâu, liều thuốc cuối sẽ giúp bạn trở thành 1 Webmaster hoàn thiện. Đó chính là Smile, hãy luôn cười lên, vì “Một nụ cười bằng mười thang thuốc bổ”. Tuy nói thế chứ uống thuốc bổ hoài cũng đâu tốt. Phải phải đúng lúc, đúng chổ nha các bạn. Đang ngồi trên xe bus mà cười thì chắc chắc Smiles thành Scrazy đó.

- Hi vọng rằng bài viết này sẽ giúp ít cho các bạn thật nhiều, Chúc các bạn mau mau “S” nhá! Gud bye!

Thân! MrV2m.

Tuy nhiên không phải lời phê bình nào cũng là vô lý mà ngược lại, trong đa số các trường hợp bạn lại học được rất nhiều từ những lời phê bình. Dưới đây là một số cách giúp bạn chuẩn bị tinh thần để đóng nhận những lời phê bình một cách có lợi nhất.

Xem động cơ của người phê bình

Có nhiều người có thói quen thích chê bất cứ cái gì và bất cứ người nào. Đối với họ chê một ai đó là niềm vui, chê để thỏa mãn cái tôi, để chọc tức người viết, để tỏ ra là mình hơn người. Đối với những lời phê bình như vậy, bạn cũng đừng quá bận tâm mà lao vào “khẩu chiến”. Chẳng có lợi gì cho bạn cả mà chỉ rước thêm bực mình. Chính vì thế mỗi khi ai đó chỉ trích bạn một cách tiêu cực, không có ý kiến xây dựng. Hãy ráng kiềm chế bản thân và bỏ qua coi như không biết. Họ sẽ chẳng còn gì để nói nữa.

Lời phê bình thiếu tính xây dựng

Đặc biệt trong thế giới mạng, tự do ngôn luận đã đạt tới mức tới hạn của nó. Bất cứ ai cũng có thể phê bình bạn mà không cần quan tâm bạn có bị tổn thương hay không. Cho nên khi một ai đó để lại comment cho một bài viết của bạn kiểu như: “oài! chán như con gián”, “nhìn xấu tệ”, “cái này ai mà chẳng làm được”.

Những lời phê bình như thế này không phải hoàn toàn vô ích, mà có thể bài viết đó của bạn chưa thực sự tốt, chưa hay hoặc không được đẹp. Hãy hỏi họ xem bạn có thể làm gì tốt hơn được, hỏi họ chỉ ra những chố mà họ thấy chưa tốt. Tất nhiên nếu họ thực sự muốn bạn tốt hơn, họ sẽ giải thích chi tiết hơn cho bạn. Còn với những ai không nói được thêm điều gì có tính xây dựng. Bạn cũng đừng bận tâm đến họ.

Cách tốt nhất trong trường hợp này là nói “Uhm, tôi cũng đã cố gắng rồi, bạn có thể nói rõ hơn chỗ nào trong giao diện cần được thay đổi không?“.

Lời phê bình thực lòng và có ích

Người ta thường nói “thuốc đắng dã tật, sự thật mất lòng”. Nếu ai đó chỉ ra cho bạn những chỗ còn hạn chế trong đoạn code bạn vừa viết. Thì họ đã thực sự giúp đỡ bạn rồi. Thà có bị chạm tự ái một chút nhưng giúp bạn tiến bộ hơn trong những lần sau, còn hơn là cứ mãi “u mê” trong cái tôi của mình.

Tất nhiên theo bản năng, ai cũng muốn “cãi lại” mấy câu để gỡ gạc. Nhưng nếu lời phê bình đó thực sự có lý, đừng ráng bao biện mà hãy dũng cảm nhận sai và sửa chữa.

Ví dụ ai đó cho bạn xem một bản thiết kế, bạn chỉ ra màu sắc và font chữ chưa đẹp. Họ lại nói “màu này đẹp lắm rồi mà, cái font này ai cũng thích mỗi ông không thích!“. Như thế chắc chắn những lần sau bạn cũng chẳng buồn nhận xét làm gì. Trong trường hợp này nên nói “Ờ ha! ông nói tôi mới để ý cái màu hơi chói thật, để tôi về đổi lại xem sao”. Còn khi về việc đổi hay không tùy thuộc vào bạn, nhưng như thế chúng ta vừa tránh làm mất lòng người phê bình vừa có thời gian xem xét lại giao diện của mình xem có đúng là màu sắc chưa đạt không.

Kết luận

Để có thể nghe những lời “thật lòng” một cách cởi mở nhất không hề đơn giản và không phải một sớm một chiều mà có được. Cái này phải qua rèn luyện và tự kiềm chế cái tôi của mình. Nhưng nói cho cùng thì những lời phê bình dù có gay gắt đến đâu cũng có đôi ba phần có thực, cho nên hay biết lắng nghe và phân tích sẽ có lợi hơn cho chúng ta.

Nhưng nếu ngược lại bạn là người nhận xét, thì cũng mong bạn nghĩ là “lời nói chẳng mất tiền mua, lựa lời mà nói cho vừa lòng nhau”. Cách tốt nhất khi nhận xét ai đó là bằng cách xây dựng, chỉ ra chỗ chưa hợp lý và đưa ra giải pháp để khắc phục.

Widget(wg – gọi tắt thế đi nha gõ lại làm biếng quá ) trong WP luôn được chứa bởi sidebar. Mọi wg luôn được kế thừa từ lớp cha – WP_Widget. Vì vậy muốn có 1 wg mới ta phải tạo 1 class mới kế thừa WP_Widget như sau:

Mở file function.php trong thư mục theme mà bạn đang dung. Thêm vào những dòng code sau:

<?php
/*
 * Tạo Yahoo status widget
 * */
class Yahoo_Status extends WP_Widget {

	//Khởi tạo contructor của 1 lớp
	function Yahoo_Status(){
		parent::WP_Widget('Yahoo_Status_Widget',
			'Yahoo Status',
			array('description' => 'Trạng thái nick yahoo.'));
	}

Hàm Yahoo_Status ở dòng 614 là 1 constructor của class Yahoo_Status, trong hàm này ta tiến hành khởi tạo những thông số cơ bản cho Yahoo_Status bằng cách gọi ngược lên constructor của cha nó (WP_Widget) với những thông số truyền vào như sau:

$id_base: ‘Yahoo_Status_Widget’ – Id để xác định .
$name: ‘Yahoo Status’ – Tên wg.
$widget_options = array(‘description’ => ‘Trạng thái nick yahoo.’) – Thông tin tóm tắt của wg.

Kế tiếp chúng ta bắt buộc phải overrides 3 phương thức của lớp cha (WP_Widget) để hiển thị, cập nhật được wg của chúng ta.
Để hiển thị được wg lên sidebar trong Admin Panel, ta phải định nghĩa cho wg một bộ khung được quy định sẵn của WP như sau:

function widget( $args, $instance ) {
		extract($args);
		$title = apply_filters( 'widget_title',
			empty($instance['title']) ? '' : $instance['title'],
			$instance, $this->id_base);
		$text = apply_filters( 'widget_text',
			$instance['text'], $instance );
		echo $before_widget;
		if ( !empty( $title ) ) {
			echo $before_title . $title . $after_title; } ?>
			<ul class="nick_status">
			<?php $str = explode(",", $text);
				foreach ($str as $s) : ?>
				  <li>
				  	<a href="ymsgr:sendIM?<?php echo trim($s);?>">
						<img border="0" src="http://presence.msg.yahoo.com/online?u=<?php echo trim($s);?>&m=g&t=1&l=us">
					</a>
				  </li>
			<?php endforeach;
			?>
			</ul>
		<?php
		echo $after_widget;
	}

Tham số cụ thể như sau:
$args: Mảng thông số dùng để hiển thị như: before_title, after_title, before_widget, and after_widget.
$instance: Những thực bên trong cấu hình nên wg như textbox, label, radio, checkbox… vd: $instance[‘title’]: lấy thực thể có ID là title.

Dòng 630 – 642 mình dùng chuỗi text nhập vào từ textarea được ngăn cách bởi dấu “,” . Sau đó tách chuỗi ra thành từng phần tử của một mảng string bằng hàm explode(“,”, $text), sau đó dùng link tới yahoo server để nhận về trạng thái online hay offline.
Tiếp theo để cập nhật được thông tin của wg ta phải overrides phương thức update như sau:

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		if ( current_user_can('unfiltered_html') )
			$instance['text'] =  $new_instance['text'];
		else
			$instance['text'] = stripslashes(
				wp_filter_post_kses( addslashes($new_instance['text']) )
			);
		return $instance;
	}

Tham số cụ thể như sau:
$new_instance: Những thông tin mới từ người dung nhập vào những fied có trên wg.
$old_instance: Những thông tin hiện tại wg đang lưu.
Phương thức cuối cùng là form: hiển thị những thông tin nhập vào.

function form( $instance ) {
		$instance = wp_parse_args( (array) $instance,
			array( 'title' => '', 'text' => '' ) );
		$title = strip_tags($instance['title']);
		$text = format_to_edit($instance['text']);
?>
		<p>
			<label for="<?php echo $this->get_field_id('title'); ?>">
				<?php _e('Tiêu đề:'); ?> </label>
			<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
				name="<?php echo $this->get_field_name('title'); ?>" type="text"
				value="<?php echo  esc_attr($title);?>" />
		</p>
			<label for="<?php echo $this->get_field_id('text'); ?>">
				<?php _e('Nick yahoo(cách nhau bởi dấu \'):'); ?> </label>
			<textarea class="widefat" rows="5" cols="10"
				id="<?php echo $this->get_field_id('text'); ?>"
				name="<?php echo $this->get_field_name('text'); ?>">
					<?php echo $text;?>
			</textarea>
		<p>
			<label for="<?php echo $this->get_field_id('text'); ?>">
				<?php _e('Ví dụ: tanvannguyen18, meocon17'); ?>
			</label>
		</p>
<?php
	}
}

register_widget('Yahoo_Status');
?>

Tham số cụ thể như sau:
$instance: Những fied có trên wg.
Bài này mình chỉ tạo đơn giản có 3 label, 1 input và 1 textarea, cách gán id và value mình đã minh họa cụ thể trong hình. Có j không hiểu mọi người cứ comment bên dưới nha.

Cuối cùng ta xài lệnh register_widget(‘Yahoo_Status’); ngay bên dưới dấu kết thúc class Yahoo_Status để đăng ký với WP là ta có 1 wg mới, và vào lại Admin Panel để xem widget ta mới tạo.

Tới đây mình vừa hoàn thành 1 wg Yahoo_Status. Đây cũng là bài post đầu tiên của mình cho Izwebz, có gì mọi người đóng góp ý kiến để mình hoàn thiện hơn về những bài post sau. Cảm ơn mọi người đã đọc và chúc mọi người vui vẻ với Widget của mình.

Download file

Download file mẫu functions.php ở đây

Tham gia viết bài cho Izwebz

Đây là bài viết đầu tiên của Tanlevis cho izwebz. Rất cảm ơn sự đóng góp của bạn. Nếu bạn có khả năng, hãy cùng tham gia viết bài để chia sẻ kiến thức với cộng đồng.

Cũng như với mọi tiêu chí tôi sẵn sàng nhận những ý kiến đóng góp về ý kiến cho Video để ngày càng hoàn thiện hơn.

Thời lượng: 39:25

Download định dạng .FLV chất lượng cao: phpbasic_10

Đừng download bằng IDM Video online. Hãy dùng link mediafire phía trên

Xin chào tất cả các bạn, mình là ma mới của izwebZ.com. Hôm nay mình sẽ giới thiệu với các bạn một module cực hay của CSS2 đó là font-face.

Font-face ra đời cùng với IE 5.0, và độc quyền sử dụng font OpenType (.eot). Nhưng khi các trình duyệt đời mới ra đời như FF 3, Safari 3.1, Opera và gần đây la Chrome thì font-face đã được sử dụng rộng rãi hơn với loại font đa dạng hơn như TrueType (.ttf), Web Open Font Format (WOFF)

Sau đây là bảng tương thích của trình duyệt và loại font:
.EOT : Internet Explorer 5+
.TTF: Firefox 3.5+, Opera 10.0+, Safari 3.1+
.WOFF: Firefox 3.6+
.OTF: Firefox 3.5+, Opera 10.0+, Safari 3.1+

Trong Tutorial thì tớ sẽ hướng dẫn các bạn
1/ Sơ lược về font-face
2/ Chuyển 1 template đồ họa từ PSD sang HTML và CSS 2
3/ Sử dụng font-face cho FF 3.6
4/ Sử dụng công cụ chuyển font ttf sang eot (TTF to EOT Font Converter) http://www.kirsle.net/wizards/ttf2eot.cgi
5/ Sử dụng font-face cho IE 8

Thời lượng: 50:17

Download định dạng .FLV chất lượng cao: Font-face

]]>