当前位置:编程学习 > JAVA >>

自定义下拉框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);
         &nbs

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,