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

• صرفا از 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');
    }
  }
);

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

منبع