控件中国网现已改版,您看到的是老版本网站的镜像,系统正在为您跳转到新网站首页,请稍候.......
中国最专业的商业控件资讯网产品咨询电话:023-67870900 023-67871946
产品咨询EMAIL:SALES@COMPONENTCN.COM

自定义下拉框ComboBox

作者:未知 出处:cnblog 2013年04月19日 阅读:

 现在使用各种系统和浏览器的上网用户都一大堆,为了统一网站样式,也少不了自定义控件。

 
因考虑到门户站,也特别引入皮肤功能,已使用于任意网站或页面。
 
此控件从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
 

热推产品

  • ActiveReport... 强大的.NET报表设计、浏览、打印、转换控件,可以同时用于WindowsForms谀坔攀戀Forms平台下......
  • AnyChart AnyChart使你可以创建出绚丽的交互式的Flash和HTML5的图表和仪表控件。可以用于仪表盘的创......
首页 | 新闻中心 | 产品中心 | 技术文档 | 友情连接 | 关于磐岩 | 技术支持中心 | 联系我们 | 帮助中心 Copyright-2006 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 电话:023 - 67870900 传真:023 - 67870270 产品咨询:sales@componentcn.com 渝ICP备12000264号 法律顾问:元炳律师事务所 重庆市江北区塔坪36号维丰创意绿苑A座28-5 邮编:400020
在线客服
在线客服系统
在线客服
在线客服系统