一不小心寫了個bootstrap風格下拉控件 JqueryUI + bootstrap

受夠了EasyUI的封閉，Bootstrap雖然華麗但是功能太渣，閑着無聊寫個下拉控件玩玩吧，不喜勿噴哈...

第一步：先設計下我的下拉控件的樣子

1.既然是bootstrap風格的，我想應該是這樣的

2.但是我想它應當可以輸入，這樣就可以支持模糊搜索,所以它應該是這樣的

看樣子還行。

第二步、代碼實現

1.樣式引入

<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/themes/ls/jquery-ui.css" rel="stylesheet" />

2.js引入

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>

3.自定義樣式

/*Combox*/
.ui-autocomplete {
    max-height: 130px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}

.ui-menu {
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}

.lsCombo-panel {
    min-height: 30px;
    max-height: 130px;
    background: #fff;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    border: 1px solid #ddd;
}

.ls-combo-panel {
    background: #fff;
    height: 200px;
    padding: 3px 12px;
    overflow-y: auto;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    z-index: 9999;
}

.ls-combo-panel .ls-combo-checkbox {
    padding-left: 5px;
}

 .ls-combo-panel .ls-combo-checkbox li {
     list-style: none;
     padding-left: 0;
 }

3.關鍵js代碼

(function ($) {
$.ls = $.ls || {};
$.extend($.ls, {
isNullOrEmpty: function (v) {
return v == '' || v == undefined || v == null || typeof (v) == "undefined";
});

$.fn.extend({
lsCombox: function (parm, parm1, parm2) {

            var defaults = {
                remote: false,
                url: '',
                data: [],
                valueField: 'value',
                labelField: 'label',
                onSelected: function (item) {
                    console.log(item);
                }
            };
            var $combo = $(this);
            var combId = $combo.attr('Id'),
                hidId = combId + '_hid',
                methods = {
                    getValue: function () {
                        return $("#" + hidId).val();
                    },
                    setValue: function (val) {
                        for (var i = 0, len = settings.data.length; i < len; i++) {
                            var d = settings.data[i];
                            if (d[settings.valueField] == val) {
                                $combo.val(d[settings.labelField]);
                                $("#" + hidId).val(d[settings.valueField]);
                            }
                        }
                    }
                };
            if (typeof (parm) === "string") {
                return methods[parm](parm1, parm2);
            }

            var settings = $.extend({}, defaults, parm);
            var btnBox = $('<span class="input-group-btn"></span>');
            var btn = $('<button class="btn btn-default" type="button"><span class="caret"></span></button>')
            .appendTo(btnBox)
            .on('click', function () {
                $combo.trigger("focus");
                $combo.autocomplete("search", "");
            })
            var hidInput = $("<input type='hidden' id='" + hidId + "' />");
            $combo.wrap("<div class='input-group'></div>")
                .after(btnBox)
                .after(hidInput);
            $combo.autocomplete({
                source: settings.data,
                delay: 0,
                minLength: 0,
                position: { my: "right top", at: "right bottom" },
                focus: function (event, ui) {
                    $combo.val(ui.item.label);
                    return false;
                },
                select: function (event, ui) {
                    $combo.val(ui.item.label);
                    hidInput.val(ui.item.value);
                    settings.onSelected(ui.item);
                    return false;
                },
                change: function (event, ui) {
                    //console.log(ui);
                    if ($.ls.isNullOrEmpty(ui.item))
                        hidInput.val("");
                }
            })
            .autocomplete("instance")._renderItem = function (ul, item) {
                return $("<li>")
                  .append("<div>" + item.label + "</div>")
                  .appendTo(ul);
            };

            //獲取選中的值
            this.getValue = function () {
                return methods.getValue();
            };
            //設置選中
            this.setValue = function (value) {
                methods.setValue(value);
            };
            //初始化賦值
            if (!$.ls.isNullOrEmpty($combo.val())) {
                this.setValue($combo.val());
            }
        }
});
})(jQuery)

3.看下效果

 

4.使用

/*初始化數據*/
var page = {
            Data :eval('('+'[{"label":"選項1","value":"16082718544406680","Id":"16082718544406680"},{"label":"選項2","value":"16083018573800680","Id":"16083018573800680"},{"label":"選項3","value":"16090410022900180","Id":"16090410022900180"},{"label":"選項4","value":"16090410024603660","Id":"16090410024603660"},{"label":"選項5","value":"16090410030206420","Id":"16090410030206420"}]'+')')
};
//初始化
$("#combo").lsCombox({ data: page.Data });
//賦值
$("#combo").lsCombox('setValue','1');
//取值
$("#combo").lsCombox('getValue');

<!--HTML-->
<input id="combo" placeholder="請選擇" type="text" />

 

轉載請注明出處：http://www.cnblogs.com/xinwang/p/6008629.html