自定义下拉框逻辑封装
global var:
(function () { /** * FCZX.foo.bar */ let FCZX = {}; FCZX.globalNamespace = function (ns) { var nsParts = ns.split("."); var root = window; for (var i = 0; i < nsParts.length; i++) { if (typeof root[nsParts[i]] == "undefined") { root[nsParts[i]] = {}; } root = root[nsParts[i]]; } return root; } window.FCZX = FCZX; })()
下拉事件定义:
(function ($) { FCZX.globalNamespace('FCZX.Select'); FCZX.Select = function (opt) { this._init(opt) } $.extend(FCZX.Select.prototype, { _init: function (opt) { this.opt = { selectContS: '.select-content', //下拉框选择器 selectTextS: '.select-text', //选择项目显示, selectListS: '.select-list', //下拉选项框 optionS: 'li', //选项 dataProp: 'value', //取值key labelProp: 'label', //标签名取值key allValue: 'all' //当选择所有的时候值 } $.extend(true, this.opt, opt || {}); this._initDomEvent(); }, _initDomEvent: function () { let _this = this; let _opt = _this.opt; _this.$selectCont = $(_opt.selectContS); _this.$selectList = _this.$selectCont.find(_opt.selectListS); _this.$selectCont.each(function () { $(this).hover(function () { $(this).find(_opt.selectListS).show(); }, function () { $(this).find(_opt.selectListS).hide(); }); }) _this.$selectList.find(_opt.optionS).each(function () { $(this).on('click.selectOption', function () { let text = $(this).text() let value = $(this).data(_opt.dataProp); let selectText = $(this).parent().siblings(_opt.selectTextS); let $span = selectText.find('span'); let $input = selectText.find('input'); if (!value || value == _opt.allValue) { $span.text($span.data(_opt.labelProp)); $input.val(''); selectText.removeClass('actived'); } else { $span.text(text); $input.val(value); selectText.addClass('actived'); } _this.$selectList.hide(); $(_this).trigger('change', [$input]); }); }) } }); })(jQuery);
使用:
let selectS = new FCZX.Select(_opt.selectOpt); $(selectS).on('change', function (event, $input) { console.log($input) });