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+ và 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:

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');
 }
 }
);