内蒙古十一选五开奖遗漏:基于jquery分類菜單列表篩選插件 - 内蒙古十一选五的走势图百度乐彩网

PROMULGATOR

@苦笑

福建省(CDMA全省共用出口)

← 簡易的jQuery抽獎

→ css炫酷登錄效果

相關代碼

商品分類篩選

jquery 搜索篩選匹配

仿淘寶，條件篩選

jQuery對表格內容進行搜索篩選

左側分類菜單

vue產品篩選

商品滾動左側對應分類高亮

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;
}

var fun = {
    screenList: function() {
        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>'
        };

var _handle = {
            elmOBj: '',
            init: function() { // 生成HTML結構
                var _this = this,
                    _elm = this.elmOBj;

$.each(_connfig.data, function(elmI, elmObj) {
                    var _th = (_connfig.tpl_title).replace('~name~', elmObj.name),
                        _titem = '';
                    _connfig.dataFirst.class = _connfig.itemThis;
                    elmObj.list.unshift(_connfig.dataFirst);
                    $.each(elmObj.list, function(itemI, itemObj) {
                        var _tamp = (_connfig.tpl_item).replace('~name~', itemObj.name),
                            _tampAttr = '';
                        $.each(itemObj, function(attrName, attrValue) {
                            if (attrName == 'name') {
                                return true;
                            }
                            _tampAttr += _handle._toLine(attrName) + '="' + attrValue + '"';
                        });
                        _tamp = _tamp.replace('~attr~', ' ' + _tampAttr);
                        _titem += _tamp;
                    });
                    _elm.append(((_connfig.tpl).replace('~mian~', _th + _titem)).replace('~attr~', ' ' + (_this._toLine(_connfig.valueName)) + '="' + elmObj.value + '"'));
                });
                _elm.prepend('<input type="hidden" name="screenList">');
            },
            select: function() { // 選中事件綁定
                var _this = this;
                _handle.init();
                _this.elmOBj.find(_connfig.item).off().on('click', function() {
                    if (false == $(this).is('.screen-this')) {
                        var _mianObj = $(this).parent();
                        _mianObj.find(_connfig.item).removeClass('screen-this');
                        _mianObj.attr('data-value');
                        $(this).addClass('screen-this');
                        _this._take();
                    }
                });
            },
            _toLine: function(name) {
                return name.replace(/([A-Z])/g, "-$1").toLowerCase();
            },
            _take: function() {
                var _this = this,
                    _elm = this.elmOBj,
                    _itemThisObj = _elm.find('.' + _connfig.itemThis);

var _list = [];
                $.each(_itemThisObj, function(itemI, itemObj) {
                    var _valueName = _this._toLine(_connfig.valueName);
                    var _fObj = $(itemObj).parent();
                    _list.push({
                        name: _fObj.attr(_valueName),
                        value: [$(itemObj).attr(_valueName)]
                    });
                });
                if ('input' == _connfig.storeType) {
                    _elm.find('[name="screenList"]').val(JSON.stringify(_list));
                }
            }
        };

if (arguments.length > 0) {
            _connfig = $.extend(_connfig, arguments[0])
        }
        if (_connfig.data.length > 0) {
            _handle.elmOBj = $(_connfig.elm);
            _handle.select();
        }
    }
};

var _screenListData = [{
        name: '設備類型',
        value: 'sblx',
        list: [{
                name: '電腦',
                dataValue: 'pc'
            },
            {
                name: '手機',
                dataValue: 'app'
            }
        ]
    },
    {
        name: '游戲類型',
        value: 'yxlx',
        list: [{
                name: '角色扮演',
                dataValue: 'jsby'
            },
            {
                name: '戰爭策略',
                dataValue: 'zzcl'
            }
        ]
    }
];
fun.screenList({
    elm: '#screenList',
    data: _screenListData,
    dataFirst: {
        name: '不限',
        dataValue: 'all'
    },
    valueName: 'dataValue',
});

↑上面代碼改變，會自動顯示代碼結果 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

最新

發表評論全部評論

暫時沒有評論！

登錄后才可以評論

30秒后在評論吧!

取消回復

<!doctype html> <html> <head> <meta charset="utf-8"> <title>基于jquery分類菜單列表篩選插件-www.cyiqh.com</title> <script src="https://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

版權聲明

在線反饋

廣告合作

網頁技術

jq22工具庫

jquery插件

2012-2019 jQuery插件庫版權所有. 備案號:内蒙古十一选五的走势图百度乐彩网
浙公網安備 33041102000314號