به زبانی ساده،این اسکریپت،مجموعه ای از آیتم ها را با مجموعه ای دیگر،جایگزین می کند.پس برای ایجاد آن باید دو مجموعه آیتم را حاضر کنیم.برای انجام این کار می توانید به چند روش عمل کنید:

• صرفا از HTML استفاده کنید،مانند لیست های نامرتب
• با استفاده از یک فراخوانی AJAX،داده ها را فراخوانی کنید
• تغییر شکل آیتم های HTML با استفاده از JAVASCRIPT

فراخوانی

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

برای کار کردن آن باید از کدهای HTML زیر استفاده کنیم:

<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" class="hidden">
 <li data-id="macosx">Mac OS X</li>
 <li data-id="macos9">Mac OS 9</li>
 <li data-id="iphone">iPhone OS</li>
</ul>

نگهدارنده اول(source) برای کاربر قابل مشاهده خواهد بود تا بتواند انتخاب کند. نگهدارنده دوم(destination) به عنوان اولین آرگومنت تابع Quicksand مورد استفاده قرار خواهد گرفت.

همچنین شما باید از خصیصه data-id استفاده کنید تا پلاگین بتواند،آیتم های همسان موجود در دو مجموعه source و destination را تشخیص دهد.اگر اجزا در هر دو مجموعه موجود بودند(date-id برابر داشتند) ،پس برای Quicksand هم یکسان تلقی خواهند شد.

اگر می خواهید یک تابع بازگشتی داشته باشید،آن را به عنوان آخرین آرگومنت اضافه کنید:

$('#source').quicksand( $('#destination li'), function() {
 // callback code
});

پارامترها

همچنین می توانید Quicksand را با اضافه کردن پارامترهای اضافی،دستکاری کنید:

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

یا

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

لیست پارمترهای موجود را در زیر مشاهده می کنید:

افزایش کارایی

برای افزایش کارایی این پلاگین،می توانید:

• گزینه useScaling را خاموش کنید
• از adjustHeight استفاده نکنید:’dynamic’ بدتر از false یا auto است

یکپارچه کردن با پلاگین های دیگر

وقتی در گزینه هایتان از بهبودهای کاربردی دیگر(مثل tooltipها) استفاده می کنید،فراموش نکنید که آنها را به صورت بازگشتی به کار ببرید:

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

و همچنین اگر از بهبودهای بصری(مثل جایگزینی فونت ها) استفاده می کنید،آن را در حین انجام انیمیشن اعمال کنید:

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

امیدوارم لذت برده باشید!

منبع