模拟下拉框

调用方式：$("select[data-class]").selectModel();

;
(function ($, window, document, undefined) {

    "use strict";

    var pluginName = "selectModel",
        defaults = {
            effect: {
                "type": "standard",
                "speed": "fast"
            },
            emptyMessage: 'Empty',
            activeLi:'liActive'
        };

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this.instance;
        this.init();
    }

    Plugin.prototype = {

        /*
         * 初始化
         */
        init: function () {
            this.instance = this._createInstance();
            this._createElements();
            this._hideSelect();
            this._setEvents();
        },

        /*
         * 产生ID，及是否展开的状态
         */
        _createInstance: function () {
            return {
                selectId: +new Date(),
                state: false
            };
        },

        /*
        * 隐藏原有select
         */
        _hideSelect: function () {
            $(this.element).hide();
        },

        /*
         * 设置点击事件
         */
        _setEvents: function () {

            var self = this;
            $(document).on("click", "html", function (e) {
                e.stopPropagation();
                self._closeSelectBox(true);
            });
        },

        /*
         * 模拟select的html结构
         */
        _createElements: function () {

            var self = this;
            var selectModelEl = $('<div/>', {
                id: 'selectbox_' + self.instance.selectId,
                'class': 'selectbox '+ $(self.element).attr('data-class'),
                data: {'sourceElement': self.element}
            });
            var selectValueWrap = $('<p/>', {
                'class': 'select-info like-input'
            });

            var selectBoxEl = self._createSelectOptionWrap();
            var isSelectBoxEmpty = selectBoxEl == null ? true : false;
            var selectValueEl = self._createSelectValueWrap(isSelectBoxEmpty);

            var selectModelArrowWrap = $('<span/>', {
                'class': 'select-arrow'
            });
            var selectModelArrow = $('<i/>', {
                'class': 'ui-arrow-bottom dark-ui-arrow-bottom'
            });

            selectModelArrowWrap.append(selectModelArrow);
            selectValueWrap.append(selectModelArrowWrap).append(selectValueEl);
            selectModelEl.append(selectValueWrap).append(selectBoxEl);

            self.selectModelEl = selectModelEl;
            $(self.element).before(self.selectModelEl);
            self._setSelectBoxEvents(isSelectBoxEmpty);
        },

        /*
         * 点击select头部的事件
         */
        _setSelectBoxEvents: function (isSelectBoxEmpty) {

            var self = this;
            var selectModelEl = $("div#selectbox_" + this.instance.selectId);

            if (!isSelectBoxEmpty) {
                selectModelEl.find(".select-info").click(function (e) {
                    e.stopPropagation();
                    self._clickSelectOption();
                });
            }
        },

        /*
         * 模拟select的option内容
         */
        _createSelectOptionWrap: function () {

            var self = this;
            var selectBoxEl = $('<div/>', {
                'class': 'selectbox-drop'
            });

            var selectBoxOptionsEl = $('<ul/>', {
                'class': 'select-results'
            });

            $(self.element).children().each(function (index) {
                var liClass = index==0  ?  self.options.activeLi : '';
                var selectModelLiEl = $('<li/>', {
                    rel: $(this).val(),
                    text: $(this).text(),
                    'class': liClass,
                    click: function (e) {
                        e.stopPropagation();
                        self._changeSelectValue(self, this);
                    }
                });
                selectBoxOptionsEl.append(selectModelLiEl);
            });

            selectBoxEl.append(selectBoxOptionsEl);

            return $(this.element).children().length == 0 ? null : selectBoxEl;
        },

        _createSelectValueWrap: function (isSelectBoxEmpty) {
            var selectValueEl = $('<span/>', {
                'class': 'select-value',
                text: isSelectBoxEmpty ? this.options.emptyMessage : $(this.element).children().first().text()
            });

            return selectValueEl;
        },

        /*
         * 模拟select内容的展开与否
         */
        _clickSelectOption: function (stageReady) {

            if (this.instance.state) {
                this._closeSelectBox();
            }else {
                if (!stageReady) {
                    this._closeOthers();
                }else{
                    this._openSelectBox();
                }
            }
        },

        /*
         * 点击模拟select中的option内容
         */
        _changeSelectValue: function (self, clickedEl) {

            var selectValueEl = $("#selectbox_" + this.instance.selectId).find(".select-value");
            selectValueEl.text($(clickedEl).text());
            this._closeSelectBox(true);

            $(clickedEl).addClass(this.options.activeLi).siblings().removeClass(this.options.activeLi);

            $(this.element).val($(clickedEl).attr('rel'));
        },

        /*
         * 关闭模拟select
         */
        _closeSelectBox: function (internal) {

            $("#selectbox_" + this.instance.selectId).removeClass('selectbox-active active');
            var selectBoxEl = $("#selectbox_" + this.instance.selectId).find(".selectbox-drop");
            if (selectBoxEl.is(":animated") && !internal) {
                return false;
            }
            this.instance.state = false;

            switch (this.options.effect.type) {

                case "fade":
                    selectBoxEl.fadeOut(this.options.effect.speed);
                    break;
                case "slide":
                    selectBoxEl.slideUp(this.options.effect.speed);
                    break;
                case "standard":
                    selectBoxEl.hide();
                    break;
                default:
                    selectBoxEl.slideUp(this.options.effect.speed);
                    break;

            }
        },

        /*
         * 展开模拟select
         */
        _openSelectBox: function () {

            $("#selectbox_" + this.instance.selectId).addClass('selectbox-active active');
            var selectBoxEl = $("#selectbox_" + this.instance.selectId).find(".selectbox-drop");
            if (selectBoxEl.is(":animated")) {
                return false;
            }
            this.instance.state = true;


            switch (this.options.effect.type) {

                case "fade":
                    selectBoxEl.fadeIn(this.options.effect.speed);
                    break;
                case "slide":
                    selectBoxEl.slideDown(this.options.effect.speed);
                    break;
                case "standard":
                    selectBoxEl.show();
                    break;
                default:
                    selectBoxEl.slideDown(this.options.effect.speed);
                    break;
            }
        },

        /*
         * 关闭其他select
         */
        _closeOthers: function () {

            var self = this;

            $('div[id^=selectbox_]').each(function (index) {
                var el = $("div#" + $(this).attr("id"));

                if (el.data("sourceElement")) {
                    var sourceEl = $.data(this, "sourceElement");
                    var selectModelInst = $.data(sourceEl, "plugin_" + pluginName);
                    if (self.instance.selectId != selectModelInst.instance.selectId) {
                        if (selectModelInst.instance.state) {
                            selectModelInst._closeSelectBox(true);
                        }
                    }
                }
            });
            self._clickSelectOption(true);
        }
    };

    $.fn[pluginName] = function (options) {

        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
    };

})(jQuery, window, document);