iostope用法示例之過濾篇

selectors

過濾專案的最簡單方法是使用選擇器

class="grid">

class="item-one">
div>
class="item-two">
div>
class="item-three">
div>
div>
var $grid = $('.grid');
$gri.isotope(filter:'.item-one') /*選中類為item-one的元素，其餘的都隱藏*/
$grid.isotope(filter:'.item-one,.item-two')/*兩項都選中，都顯示，其餘的隱藏*/
$grid.isotope(filter:'*')/*選中類grid下的全部元素，並設為顯示*/
script>

您可以使用功能進行過濾

class="grid">

class="item-one number">88div>
class="item-two number">23div>
class="item-three number">123div>
div>
var $grid = $('.grid');
$grid.isotope(
})script>
iso.arrange(
})script>
``

ui是我們經常使用的,所以又想用這個外掛程式的同學請多看看這一部分哦。

class="button-group">

data-filter="*">show allbutton>
data-filter=".item-one">show onebutton>
data-filter=".item-one .item-two">show twobutton>
div>
class="item-one">onediv>
class="item-two">twodiv>
class="item-three">threediv>
div>
var $grid = $('.grid').isotope();
$('.button-group').on(''click','button',function);
})script>

與上乙個functions 不同的是,這個是對資料處理過後，再用filter過濾

class="button-group">

data-filter="numbergreaterthan50">number > 50button>
data-filter="ium">name ends with -iumbutton>
div>
class="grid">
class="number">99div>
class="name">22222iumdiv>
div>
var $grid = $('.grid').isotope({});
var filterfns = ,
// show if name ends with -ium
ium: function
() };
// filter items on button click
$('.button-group').on('click', 'button', function
() );
});script>

用於對元素更詳盡的過濾操作

class="grid">

class="element-item transition metal"
data-category="transition">
class="number">79p>
class="symbol">auh3>
class="name">goldh2>
class="weight">196.966569p>
div>
class="element-item metalloid"
data-category="metalloid">
class="number">51p>
class="symbol">sbh3>
class="name">antimonyh2>
class="weight">121.76p>
div>
div>
var $grid = $('.grid').isotope(
} /*物件的鍵使用用於排序的關鍵字。物件值是用於檢索資料的快捷方式字串或函式
一：name:'.name',該字串將被用作查詢選擇器
二：category:'[data-category]',用來獲取屬性的值
三：number:'.number parseint'通過向快捷方式字串中新增解析器關鍵字，資料值可以解析成數字
四：getsortdata函式,如上面的weight函式此功能用於每個專案元素以獲取資料。該函式提供了乙個引數itemelem，它是item元素。該函式需要返回資料點。
*/});// sort items on button click
$('.sort-by-button-group').on( 'click', 'button', function
() );
});/*排序方式，對於每個設定的屬性getsortdata,isotope都可以使用該sortby選項進行排序,sortby可以設定為以上'name','symbol'
ps：如果想進行多重分類，就將sortby()設定為資料，這樣就可以進行多重分類*/
script>

這個選項用來設定公升序還是排序

sortascending:

});

updatesortdata

要在對專案元素進行更改後更新排序資料，請使用該updatesortdata方法。

$grid.isotope('updatesortdata').isotope();

其下的就是利用isotope進行layout方面的操作，等過兩天有空再把isotope使用姿勢（2）更新出來吧。

謝謝大家**，如有bug，請指正出來，共同進步。

MySQL之過濾資料

1 使用where字句 資料根據where子句指定的搜尋條件進行過濾。select prod name,prod price from products where product price 2.50 where子句的位置 在同時使用order by 和where子句時，應該 order by位於...

jQuery之過濾元素

還是那句話，這些知識乙個小小的練習，更多的請看jquery手冊 在jquery物件中的元素物件陣列中過濾出一部分元素來 1.first 2.last 3.eq index index 4.filter selector 5.not selector 6.has selector 需求 1.ul下li...

jQuery之過濾元素操作

1 eq index 方法 用於獲取第n個元素，這個元素的位置從0開始算起，語法格式如下 eq index 獲取第3個 並將它的背景色設定為 fcf 如下 td eq 2 css background fcf 2 filter expr 方法 用於篩選出與指定表示式匹配的元素集合，用於縮小匹配的範圍...