基于jquery分类菜单列表筛选插件

Html

Css

#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);

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分类菜单列表筛选插件



代码描述：分类筛选代码简单易懂，模板结构可配置，包括全部选项，单个分类的选择，并且相应的项会被选中。

更新时间：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秒后在评论吧!

PROMULGATOR

@苦笑

相关代码

基于jquery分类菜单列表筛选插件

说明:

最新