自定義下拉框ComboBox

現在使用各種系統和瀏覽器的上網用戶都一大堆，為了統一網站樣式，也少不了自定義控件。

因考慮到門戶站，也特別引入皮膚功能，已使用於任意網站或頁面。

此控件從jquery擴展出來，已在我架構的兩個行業門戶站使用兩年，但我覺得它還有需要改進的地方，歡迎各位提出改進意見。

(function ($) {
    /*
    callback:{selectedIndex:int, selectedValue:string, selectedText:string}
    */
    $.fn.comboBox = function (options, callback) {
        var defaultOptions = {
            width: 120,   //下拉框寬度
            type: '',    //顯示方式  html/input
            writeable: true, //表單是否可寫
            data: null,  //數據源 [{"name":"item 1","value":"value1"},{"name":"item 2"}]
            selected: null,  //當前選擇項
            value: null     //當前選中值
        };

        var options = $.extend(defaultOptions, options);
        var container = this;

        this.each(function () {
            var html = '';
            html += '<div class="combo_title">';
            html += '<div class="combo_t_l"></div>';
            if (options.type == 'input') {
                html += '<div class="combo_t_txt"><input';
                if (options.writeable == false) {
                    html += ' readonly="readonly"';
                }
                html += ' name="' + (container.attr('name') || '') + '" class="input_txt" type="text" value="' + container.text().replace(/ /g, '') + '"/></div>';
            } else {
                html += '<div class="combo_t_txt">' + container.text().replace(/ /g, '') + '</div>';
            }
            html += '<div class="combo_t_r"></div>';
            html += '</div>';

            var default_title = '', default_value = '';
            var selected = 0;
            if (options.data != null) {
                var items = typeof options.data === 'string' ? eval(options.data) : options.data;
                html += '<div class="combo_items">';
                html += '<ul>';
                for (var i = 0; i < items.length; i++) {
                    if (options.value == items[i].value && options.value != '') {
                        html += '<li class="selected" val="' + items[i].value + '">' + items[i].name + '</li>';
                        default_title = items[i].name;
                        default_value = items[i].value;
                        selected++;
                    } else {
                        html += '<li val="' + items[i].value + '">' + items[i].name + '</li>';
                    }
                }
                html += '</ul>';
                html += '</div>';
            }
            container.html(html).addClass('combo_container');
            if (selected == 0) {
                var selectedItem = container.find('.combo_items').children().children('li').eq(options.selected);
                selectedItem.addClass('selected');
                default_title = selectedItem.text();
                default_value = selectedItem.attr('val');
            }

            if (default_title != '') {
                setTitle(default_title);
                setValue(default_value);
            }

            var w = options.width;
            var input_width = w + 1 - container.children('.combo_title').children('.combo_t_r').width() - container.children('.combo_title').children('.combo_t_l').width();
            container.width(w).children('.combo_title').children('.combo_t_txt').width(input_width).children('.input_txt').width(w - container.children('.combo_t_r').width() + 4);
            container.children('.combo_items').width(w - 2).css('zIndex', 9999);
            bindEvent();
        });

        function bindEvent() {
            container.children('.combo_title').children().mouseover(function () {
                container.children('.combo_title').children('.combo_t_r').addClass('combo_t_r_f');
            });
            container.children('.combo_title').children().mouseleave(function () {
                container.children('.combo_title').children('.combo_t_r').removeClass('combo_t_r_f');
            }).click(function () {
                showItems();
                var height = ($(window).height() - container.position().top + $(window).scrollTop()) - container.height() * 2;
                if (container.children('.combo_items').height() >= height) {
                    container.children('.combo_items').height(height).css('overflow-y', 'scroll');
                } else {
                    //container.children('.combo_items').height('auto').css('overflow-y', 'auto');
                    container.children('.combo_items').css('overflow-y', 'auto');
                }
            });
            container.mouseleave(function () {
                hideItems();
            });
            container.children('.combo_items').children('ul').children('li').mouseover(function () {
                container.children('.combo_items').children('ul').children('li').removeClass('focus').eq($(this).parent().children('li').index($(this))).addClass('focus');
            }).click(function () {
                setTitle($(this).text());
                setValue($(this).attr('val'));
                hideItems();
                if (callback) callback({ 'selectedIndex': $(this).index(), 'selectedValue': $(this).attr('val'), 'selectedText': $(this).text() });
            });
        };

        function setTitle(title) {
            if (options.type == 'input') {
                container.children('.combo_title').children('.combo_t_txt').children('.input_txt').val(title);
            } else {
                container.children('.combo_title').children('.combo_t_txt').text(title);
            }
        };

        function setValue(val) {
            if (typeof (val) == 'undefined' || val == 'undefined') {
                val = '';
            }
            if (options.type == 'input') {
                container.children('.combo_title').children('.combo_t_txt').children('.input_txt').attr('val', val);
            } else {
                container.children('.combo_title').children('.combo_t_txt').attr('val', val);
            }
        };

        function hideItems() {
            container.children('.combo_items').hide();
        };

        function showItems() {
            container.children('.combo_items').show();
        };
    };
})(jQuery);

　　

var defaultOptions = {
            width: 120,   //下拉框寬度
            type: '',    //顯示方式  html/input
            writeable: true, //表單是否可寫
            data: null,  //數據源 [{"name":"item 1","value":"value1"},{"name":"item 2"}]
            selected: null,  //當前選擇項
            value: null     //當前選中值
        };

參數說明：

width: 下拉框控件的寬度；

type: 如果控件在表單(form)內，並且需要傳遞下拉選擇的值，那么應該將type設置為input，否則設置為html即可；

writeable: 如果type設置為input，那么writeable生效，可設置下拉框的值是否可以編輯；

data: 綁定數據源，必須是json對象，值是一個只有name和value的對象的集合；

selected: 下拉框默認選項；

value: 賦給下拉框默認值，常在編輯是使用；

 

樣式：

因控件內部已將樣式名稱(css class)寫死，所以在使用此控件是盡量不要與此名稱相同，避免沖突。

控件及示例下載：http://files.cnblogs.com/yutian130/combobox.rar