إذا كان لديك الكثير من العناصر وتريد تصفيتها وفلترتها في تصنيفات, فأليك هذا الملحق الرائع الذي يمكنك من فلترة بياناتك بشكل مميز باستخدام مؤثرات jQuery,CSS3
ومايميز هذا الملحق أنه يحتوي على اكثر من أسلوب لعرض البيانات
===================
طريقة التركيب install
JavaScript
رمز PHP:
$('.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
رمز PHP:
<div class="filters">
<div class="filter">
<a href="#" rel="collection_name_1">Collection #1
<a href="#" rel="collection_name_2">Collection #2
<a href="#" rel="all">Alla>
div>
<div class="container">
<ul>
<li class="collection_name_1"> .. li>
<li class="collection_name_2"> .. li>
<li class="collection_name_1"> .. li>
ul>
div>
div>
للتحميل والمزيد من التفاصيل
للتحميـــل
المزيد من التفاصيل