---- 淘宝优惠券 ----欢迎到论坛交流 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

来,把select改一下

前端开发 蚂蚁 2193℃ 0评论
var SelectBox = function (select, div) {
    this.select = select;
    this.div = div;
    this.divOptions = div.find('.select_options');
    this.divShow = div.find('.select_showbox');
    this.selected = null;
}
var SelectD = {
    _selects: {}, show: [],
    load: function (select) {
        select = $(select);
        var sid = select.attr('data-select');
        var selectBox;
        if (!sid) {
            if (select[0].tagName != 'SELECT') {
                return false;
            }
            var div = this._createDiv(select);
            select.hide();
            select.before(div);
            sid = 's' + (new Date().valueOf());
            select.attr('data-select', sid);
            selectBox = new SelectBox(select, div);
            selectBox.divShow.on('click', selectBox, this._showboxClick);
            selectBox.divOptions.on('click', selectBox, this._showOptionsClick);
            this._selects[sid] = selectBox;
        } else {
            selectBox = this._selects[sid];
        }
        var selected = select.find('option:selected');
        selectBox.divShow.text(selected.text());
        selectBox.divOptions.html(this._createOptions(select));
        return select;
    }, _createDiv: function (select) {
        var html = '<div class="select_box"><div class="select_showbox"></div><ul class="select_options"></ul></div>';
        return $(html);
    }, _createOptions: function (select) {
        var html = '';
        var childs = select.children();
        for (var i = 0; i < childs.length; i++) {
            var op = childs.eq(i);
            var tagName = op[0].tagName;
            if (tagName == 'OPTGROUP') {
                html += '<li class="select_group">' + op.attr('label') + '</li>';
                var childOp = op.children();
                for (var n = 0; n < childOp.length; n++) {
                    var node = childOp.eq(n);
                    html += '<li class="select_item" data-val="' + node.val() + '">' + node.text() + '</li>';
                }
            } else if (tagName == 'OPTION') {
                html += '<li class="select_item" data-val="' + op.val() + '">' + op.text() + '</li>';
            }
        }
        return html;
    }, _showboxClick: function (e) {
        var box = e.data;
        var options = box.divOptions.toggle();
        if (options.is(':visible')) {
            box.divShow.addClass('halo');
            SelectD.show.push(box);
        }
        e.stopPropagation();
    }, _showOptionsClick: function (e) {
        var ev = e || window.event;
        var dom = $(ev.target || ev.srcElement);
        if (dom.is('li')) {
            if (dom.hasClass('select_group')) {
                e.stopPropagation();
            } else if (dom.hasClass('select_item')) {
                var box = e.data;
                if (box.selected) {
                    box.selected.removeClass('select_active');
                }
                dom.addClass('select_active');
                var sTxet = dom.text();
                var sValue = dom.attr('data-val');
                box.select.val(sValue);
                box.select.trigger('change');
                box.selected = dom;
                box.divShow.text(sTxet);
            }
        }
    }, closeAll: function () {
        for (var i = SelectD.show.length - 1; i >= 0; i--) {
            var box = SelectD.show[i];
            box.divOptions.hide();
            box.divShow.removeClass('halo');
            SelectD.show.splice(i, 1);
        }
    }, init: function () {
        $(document).on('click', SelectD.closeAll);
    }
};
$(SelectD.init);
$.fn.SelectLoad = function () {
    SelectD.load(this);
}

提示:你可以先修改部分代码再运行。

转载请注明:有爱前端 » 来,把select改一下

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情
(1)个小伙伴在吐槽
  1. http://hernansartorio.com/jquery-nice-select/
    蚂蚁2016-01-21 09:21 回复