Thay thế các nhóm công cụ với Quicksand

Đăng bởi Waston Nguyen trong mục Hướng dẫn vào 21 tháng 6, 2010 | Comments

Lấy ý tưởng hiệu ứng từ Mac OS, plugin jQuery Quicksand giúp bạn chuyển đổi giữa các nhóm công cụ dễ dàng và đẹp mắt.

Plugin chạy với tất cả các trình duyệt: IE 7+, Opera 10+, Firefox 3.5+, Safari 4+ và Chrome 4+

Cách làm việc:

Quicksand làm việc theo cách thay đổi một nhóm này bằng một nhóm khác. Bạn chỉ cần cung cấp cho plugin 2 nhóm này bằng những cách sau:

  1. Dùng HTML thô, chẳng hạn như một nhóm nằm trong cặp thẻ <ul></ul>
  2. Lấy dữ liệu bằng Ajax
  3. Thay đổi cấu trúc của các phần tử trong nhóm bằng Javascript (ví dụ như sắp xếp theo thứ tự khác đi)

Cách sử dụng:

Trước tiên bạn cần download jQuery 1.3+Quicksand, sau đó thêm vào trang HTML theo thứ tự:

<script  type="text/javascript"  src="scripts/jquery-1.3.2.js"></script>
<script  type="text/javascript"  src="scripts/jquery.easing.1.3.js"></script>
<script  type="text/javascript"  src="scripts/jquery.quicksand.js"></script>

Lưu ý rằng plugin jQuery Easing được chèn vào để bổ sung hiệu ứng cho Quicksand trong trường hợp bạn muốn sử dụng nhiều hiệu ứng hơn.

Cách gọi Quicksand:

$('#source').quicksand(  $('#destination  li')  );

Mã HTML để chèn 2 nhóm các mục dùng để hoán đổi cho nhau (bạn có thể tạo ra 2 nhóm này theo những cách được đề cập ở trên):

<ul  id="source">
 <li  data-id="iphone">iPhone OS</li>
 <li  data-id="android">Android</li>
 <li  data-id="winmo">Windows Mobile</li>
</ul>

<ul  id="destination" style="display:none">
 <li  data-id="macosx">Mac OS X</li>
 <li  data-id="macos9">Mac OS 9</li>
 <li  data-id="iphone">iPhone OS</li>
</ul>

Bạn cần có thuộc tính data-id để có thể xác định được những phần tử giống nhau giữa 2 nhóm. Khi đó, những phần tử có cùng data-id sẽ được xem là một trong Quicksand.

Nếu bạn cần sử dụng hàm callback, hãy sử dụng nó như tham số thứ 2 của hàm .quicksand():

$('#source').quicksand(  $('#destination li'), function() {
 //  mã hàm callback
>});

Ngoài ra bạn có thể thay đổi cách hiển thị của Quicksand bằng cách thay đổi các parameter theo cách sau:

$('#source').quicksand(  $('#destination li'), {
 name:  value
});

Hoặc:

$('#source').quicksand(  $('#destination li'), {

name: value
}, function() {
// callback code
});

Với name/value nằm trong danh sách các parameter sau:

Tên

Giá trị mặc định

Mô tả

adjustHeight

'auto'

Điều chính độ cao của container để vừa với nhóm phần tử, 'auto' là tự động, false là giữ nguyên chiều cao của container.

attribute

'data-id'

Thuộc tính dùng để xác định các phần tử giống nhau giữa 2 nhóm. Bạn có thể thay đổi tham số này bằng thuộc tính của riêng bạn.

duration

750

Thời gian của hiệu ứng, bằng millisecond.

easing

'swing'

Hiệu ứng khi hoán chuyển nhóm, được bổ sung thêm hiệu ứng nếu sử dụng jQuery Easing.

enhancement

function() {}

Bạn có thể truyền một hàm dùng để thay đổi diện mạo của phần tử trong quá trình diễn ra hiệu ứng của Quicksand.

useScaling

true

Sử dụng hiệu ứng scaling của CSS3. Đòi hỏi bạn sử dụng thêm plugin này.

Kết hợp với những plugin khác:

Khi bạn cần nâng cấp về chức năng của các phần tử trong nhóm (chẳng hạn như thêm tooltip), bạn nên sử dụng nó trong hàm callback:

$("#content").quicksand($("#data  > li"),
 {
  duration:  1000,
 }, function() { // callback function
  $('#content  a').tooltip();
 }
);

Khi các phần tử trong nhóm đã được nâng cấp về diện mạo (chẳng hạn như thay đổi font), sử dụng hàm qua thông số enhancement để refresh/apply lại thay đổi trong khi hiệu ứng của Quicksand diễn ra:

$("#content").quicksand($("#data  > li"), 
 {
 	duration:  1000,
   enhancement:  function() {
   Cufon.refresh('#content span');
 }
 }
);

Bạn có thích bài viết này?

Waston Nguyen's picture

Waston Nguyen

Waston is an enthusiastic web designer and developer working with ASP.NET and other web developing technologies. He's always looking for ways to make better web apps and improve users' experience.
Recently, he's just co-operated with nTuts to show his passion of Web 2.0 by writing tutorials and supporting Vietnamese web community.