مرتب و فیلتر کردن آیتم ها همراه با افکتی زیبا [PLUGIN]

۳ دیدگاه
افزونه Quicksand برای jQuery

 

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

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

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

[table “7” not found /]

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

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

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

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

وقتی در گزینه هایتان از بهبودهای کاربردی دیگر(مثل 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');
    }
  }
);

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

منبع

دسته بندی : jQuery

3 نظر

  1. سلام
    سایت واقعا عالی دارید ممنون از این آموزشهای بهینتون . و اینکه خیلی خوب توضیح داده شده .
    سپاسگزارم

  2. بازتاب: مرتب و فیلتر کردن آیتم ها همراه با افکتی زیبا [PLUGIN] | پرتال جامع و خودکار اسکریپت 24

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *