自定义下拉框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 += '
';
            html += '
';
            if (options.type == 'input') {
                html += '
';
            } else {
                html += '
' + container.text().replace(/ /g, '') + '
';
            }
            html += '
';
            html += '
';

            var default_title = '', default_value = '';
            var selected = 0;
            if (options.data != null) {
                var items = typeof options.data === 'string' ? eval(options.data) : options.data;
                html += '
';
                html += '
';
                for (var i = 0; i < items.length; i++) {
                    if (options.value == items[i].value && options.value != '') {
                        html += '
' + items[i].name + '
';
                        default_title = items[i].name;
                        default_value = items[i].value;
                        selected++;
                    } else {
                        html += '
' + items[i].name + '
';
                    }
                }
                html += '
';
                html += '
';
            }
            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