Html
    Css
    Js


#screenList {
	width:500px;
	margin:0 auto;
	border:1px solid #ddd;
	padding:15px 30px;
}
#screenList dl {
	margin-bottom:5px;
}
#screenList dl:after {
	content:'\20';
	clear:both;
	*zoom:1;
	display:block;
	height:0;
}
#screenList dt {
	display:block;
	width:100%;
	font-weight:bold;
}
#screenList dd {
	float:left;
	width:23%;
	line-height:14px;
	text-align:center;
	padding:6px 10px;
	margin:5px;
	border-radius:5px;
	cursor:pointer;
}
#screenList .screen-this {
	color:#fff;
	background-color:#f46819;
}

↑上面代碼改變,會自動顯示代碼結果 jQuery調用版本:1.7.2
 立即下載

基于jquery分類菜單列表篩選插件

内蒙古十一选五的走势图百度乐彩网 www.cyiqh.com 更新時間:2019-11-29 17:24:03

說明:

1、樣式自行定制

2、storetype 參數僅支持input,可自行擴展

3、預留可多選的代碼,未實現

4、jq版本都可以,沒用到什么特別的

5、僅供學習交流參考(不喜勿噴哈)

javascriptt:

var _connfig = {
    elm: '.dk-screen-list', // 主體盒子對象名稱
    item: 'dd', // 選項對象名稱
    data: [], // 選項數據
    dataFirst: {
        name: '不限'
    }, // 第一個選項數據
    itemThis: 'screen-this', // 選中class名稱
    valueName: 'dataValue', // 選中取值屬性名稱
    storeType: 'input', // 存儲數據類型:input
    // 篩選列表模板
    tpl: '<dl~attr~>~mian~</dl>',
    tpl_title: '<dt>~name~</dt>',
    tpl_item: '<dd~attr~>~name~</dd>'
};

dom結構:

<dl data-value="sblx"><dt>設備類型</dt>
    <dd data-value="all" class="">不限</dd>
    <dd data-value="pc" class="">電腦</dd>
    <dd data-value="app" class="screen-this">手機</dd>
</dl>
0