Isotope

过滤 Isotope可以通过filter参数选项隐藏和显示元素items。匹配的items被显示，不匹配的items被隐藏。 选择器 最简单的分类过滤元素的方法是通过选择器，像类选择器。例如：每一个item元素都有一组用于识别的class：transition, metal, lanthanoid, alkali等等。 可以通过filter option来设置一个选择器。匹配选择器的items将被显示，不匹配的会被隐藏。 jQuery 选择器 如果你的项目中使用jQuery,Isotope可以使用jQuery来对items进行分类过滤。你可以通过jQuery selectors来对items进行分类。例如： 函数 你可以通过函数来对Items进行过滤。下面的例子是过滤item的数值大于50的item项。 如果你使用jQuery, 你可以通过 functions in jQuery来分类过滤： 如果不使用jQuery，你也可以使用函数来进行分类过滤： UI 上面的例子使用按钮来作为UI。每一个按钮使用data-filter属性来做相应的分类操作。 在JS中，当点击按钮，你可以使用这个filter。 过滤函数 要通过一个函数来过滤元素，可以使用使用关键字，并将它映射到一个对象中。 其他 UI 您的界面可以不使用按钮。你可以使用、radio inputs或其它的元素。 •选择示例 •Radio inputs示例 •使用快速搜索进行过滤 •包含复选框的组合过滤器 •带切换按钮的独立组合滤镜组合过滤器过滤器可以组合。除了过滤为.red或.tall之外，您还可以传入以下两个过滤器选择器：.red.tall。 组合过滤器UI 在此示例中，按钮收集在按钮组中。每个按钮组都有一个数据过滤器组。 在JavaScript中，这些过滤器存储在一个对象、过滤器。当点击一个按钮时，它会更改该组的过滤器。然后将对象的值合并成一个过滤器“.red.small”。 URL散列 您可以将过滤器挂接到hashchange事件中，以便可以将Isotope过滤器应用为链接。 排序 Isotope可以根据其数据重新排列项目元素的顺序。 HTML 用于排序的所有数据都可以在HTML中设置。对于页面顶部的示例，每个项目元素都有几个可用于排序的数据点。 getSortData Isotope使用getSortData选项从HTML读取数据。getSortData用一个对象设置。对象的键是用于排序的关键字。对象值是一个快捷方式的字符串或函数来检索数据。 getSortData字符串 当getSortData值设置为字符串时，该字符串将被用作查询选择器，以默认为每个item元素获取子元素的文本。 用括号括起来的字符串，如'[attribute]'将用于获取属性的值。 通过向快捷方式字符串中添加解析器关键字，数据值可以解析成数字。 getSortData函数 getSortData值可以设置为一个函数。该功能用于每个项目元素以获取数据。该函数提供一个参数itemElem，它是item元素。该函数需要返回数据点。 排序方式 对于在getSortData中设置的每个属性，Isotope可以使用sortBy选项进行排序。sortBy的值需要匹配getSortData中的一个键。使用上面的属性，sortBy可以设置为'name'，'symbol'，'number'，'weight'和'category'。 内置两个附加sortBy选项。 多重分类要按多个属性进行排序，可以将sortBy设置为数组。例如，sortBy：['color'，'number']将按颜色对数据进行排序，然后按数字排序。 排序放大默认情况下，同位素上升排列：A，B，C和1,2,3。为了按顺序排序Z，Y，X和9,8,7设置sortAscending：false。 sortAscending也可以使用一个对象设置，以便您可以为每个sortBy值设置升序。 updateSortData 要对项目元素进行更改后更新排序数据，请使用updateSortData方法。 UI 让我们使用一组按钮来进行UI。 每个按钮都具有在sort-by属性中设置的sortBy值。在JS中，当点击一个按钮时，我们可以使用该值。