پلاگین Filter برای jQuery همراه با افکت هایی زیبا

تبلیغات
کانال تلگرام فتولیا

سلام

امروز می خواهیم پلاگین Filter رو معرفی کنیم که به ما امکان میدهد تا بتوانیم آیتم ها را با انواع انیمیشن ها جابه جا و مرتب کنیم.برای ایجاد انواع افکت ها نیز می توانید از CSS3 و یا خود jQuery برای ایجاد fadeIn/Out استفاده کنید.برای دیدن نمونه ها می توانید در انتهای مطلب به گزینه پیش نمایش بروید و یا کدهای آن را دانلود کنید

کد جاوا اسکریپت

$('.filters').filters({
filter: {
name: 'filter', // (string) class name for links container
element: 'a', // (string) HTML selector
active: 'active' // (string) class name for active element
},
container: {
name: 'container', // (string) class name for items container
element: 'li' // (string) HTML selector
},
css3: {
init: true, // (bool) use CSS3 transitions
children: 'a', // (string) HTML selector (children of filter.element)
property: 'all 1s ease', // (string) CSS3 property for transitions
transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
scale: '0'
}
},
move: {
init: true, // (bool) set the true if you want fixed position of elements
easing: 'linear', // (string) set the easing of the animation, you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
duration: 500 // (int) set the speed of the easing animation in milliseconds
},
fade: {
duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
opacity: [0, 1] // (array) set the opacity of elements
},
fixed: false, // (bool) setthe true if you want adjust height of the container
onclick: function(filter, element){}
 
});

کد HTML

    <div class="filters">
    <div class="filter">
    <a href="#" rel="collection_name_1">Collection #1</a>
    <a href="#" rel="collection_name_2">Collection #2</a>
    <a href="#" rel="all">All</a>
    </div>
    <div class="container">
    <ul>
    <li class="collection_name_1"> .. </li>
    <li class="collection_name_2"> .. </li>
    <li class="collection_name_1"> .. </li>
    <!-- etc. -->
    </ul>
    </div>
    </div>

همینطور که گفتیم می توانید فایل های مربوطه را از زیر دریافت کنید یا ببینید.

در همین رابطه :   چگونه : محتوای select ها را با jQuery و PHP به صورت Ajax تغییر دهیم ؟!

منبع

پاسخ دهید

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

More in PHP, طراحي وب
چگونه در PHP نوع Array را به Object و نوع Object را به Array تبدیل کنیم؟

در زبان برنامه نویسی php دو نوع داده خیلی مهم بنام اشیا (objects) و آرایه ها(Arrays) داریم . در بعضی...

Close