Widget:通用筛选模板

本Widget引用自四叶草剧场bwki，作者:幻月指时针 引用遵循CC BY-NC-SA 3.0协议，已取得四叶草剧场bwiki的授权。引用者：幾愿

通用筛选模板 1.1

作者:幻月指时针

该模板是为了实现多组条件筛选


该筛选模板对DOM树结构有一定的要求
1、必须有一个属性为 data-filter_container="筛选器ID" 的标签作为筛选条件容器。
2、筛选条件必须带有 data-filter_criteria="你的具体条件" 属性，该属性用于判断该标签是否为筛选条件，以及筛选条件是什么。
3、筛选条件可以带有 data-filter_type="条件分组" 属性，该属性用于判断条件是否参与分组，带有该属性的条件在本组条件中只能选择一个。
4、筛选条件可以带有 data-choice="true" 属性 ，该属性用于判断条件是否初始化选中和方便CSS赋予样式，其中值为"true"时代表选中 "false"时代表未选中。
5、筛选条件必须是筛选容器的后代元素，即必须包在筛选条件容器标签的里面，且允许中间隔着其他标签。筛选条件间不得嵌套。
6、筛选条件内可以是图片或文字或其它东西，但不能有点击事件。

7、必须有一个属性为 data-filter_list="筛选器ID" 的标签作为筛选项容器。
8、筛选项必须带有 data-filter_item 属性，该属性用于判断该标签是否为筛选项。
9、筛选项的筛选条件为 data- 加上 你的具体条件 (例如 data-近战型 ) ， 条件必须于筛选条件中 data-filter_criteria="你的具体条件" 属性的值相同,筛选条件可以有多个。
10、筛选项必须是筛选项容器的后代元素，筛选项之间可以嵌套，但不推荐。

11、可以有一个属性为 data-filter_cancel="筛选器ID" 的div作为筛选器取消筛选按钮

12、页面中必须引入 #Widget:通用筛选模板 ,且引入的位置必须是 筛选条件容器、筛选项容器、取消筛选按钮 的后边。

{{#Widget:通用筛选模板}}

示例如下:

 <bstyle>
div[data-filter_container="筛选器ID1"] div[data-choice="true"]{
background-color: #FF0000;
}
</bstyle>
 
<div data-filter_container="筛选器ID1">
<div data-filter_criteria="张三" data-filter_type="姓名" data-choice="true">张三</div>
<div data-filter_criteria="李四" data-filter_type="姓名" data-choice="false">李四</div>
<div data-filter_criteria="王五" data-filter_type="角色">王五</div>
<div data-filter_criteria="小六" data-filter_type="角色" data-choice="true">小六</div>
</div>
<br />
<div data-filter_list="筛选器ID1">
<div data-filter_item data-张三>西瓜</div>
<div data-filter_item data-张三 data-李四>苹果</div>
<div data-filter_item data-小六 data-王五 data-张三>哈密瓜</div>
<div data-filter_item data-张三 data-李四 data-王五 data-小六>篮球</div>
<div data-filter_item data-王五 data-小六>乒乓球</div>
<div data-filter_item data-张三>游戏</div>
<div data-filter_item data-李四 data-小六>冰激凌</div>
<div data-filter_item data-李四>肯德基</div>
<div data-filter_item data-张三>汉堡</div>
</div>
<br />
<div data-filter_cancel="筛选器ID1" >
取消全部
</div>
{{#Widget:通用筛选模板}}

张三

李四

王五

小六

西瓜

苹果

哈密瓜

篮球

乒乓球

游戏

冰激凌

肯德基

汉堡

取消全部

注意:同一个页面可以有多个筛选器，Widget也可以引入多次.

张三

李四

王五

小六

西瓜

苹果

哈密瓜

篮球

乒乓球

游戏

冰激凌

肯德基

汉堡

取消全部