基于jquery扩展漂亮的下拉框——ComboBox

继续发一篇关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，只需要列表初始值（默认值），列表值，和选择事件就可以轻松绑定下拉框。绑定选中拓展事件可实现选中数据后执行的操作。简单易用。希望有用的同仁们可以收藏，或进行二次修改，达到你想要的效果。

分解自定义下拉框：

1。创建构造函数，初始化赋值控件值。

2。绑定控件呈现在前台。

3。点击下拉框控件，展示下拉列表

4。点击触发下拉框控件，收起下拉列表。

5。点击下拉项触发事件。

代码如下：

Html代码：

<b class="select_type"></b>

css样式：

.dropdown span a{float:left;background:url(/img/Icon_BG.png);}
/*下拉框 http://power.76741.com*/
.dropdown span a{background-position: -213px -75px;}
.dropdown{float:left;width:105px;}
.dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url(/img/tbline_bg.png);border-radius:8px;overflow:hidden;}
.dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;}
.dropdown span.active{border-radius:8px 8px 0px 0px;}
.dropdown span font{width:auto;margin-right: 0px;float:left;}
.dropdown span a{float:right;width:20px;height:20px;margin:4px 0;}
.dropdown p{border:solid 1px #ccc;border-top:0px;width:103px;display:none;position:absolute;margin-top:28px;background-color:#fff;z-index:3;max-height:280px;overflow-y: auto; overflow-x: hidden;}
.dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px;color:#666;font-size:14px;cursor:default;text-align:left;width:100%;overflow:hidden;}
.dropdown p a:hover{background:url(/img/tbline_bg.png);color:#666;}

Js代码：

1。自定义类：

//下拉框
var ComboBox = function () {
    this.tag;
    this.data_default;
    this.data_list;
    this.index = 0;

    var _this = this;
    var _index, _tag, _value;
    //初始化
    this.init = function () {
        _tag = _this.tag;
        _index = _this.index;
        //设置对象
        _this.setDropdown(_this.data_default, _this.data_list);
        //赋值绑定事件
        if (_tag.find('span font').length > 0) _value = _tag.find('span font').attr('_id');
        if (_tag == undefined) { return false; }
        _this.showEvent();
        _this.selectedIndex(_index);
        return true;
    }
    //设置下拉列表
    this.setDropdown = function (default_data, list) {
        var css = _tag.attr('class');
        if (default_data == undefined) {
            default_data = { id: 'null', name: '' };
        }
        var _html = '';
        if (_tag.find('p').length > 0 && _tag.find('span').length > 0) {
            $.each(list, function (i, value) {
                _html += '<a _id="' + value.id + '">' + value.name + '</a>';
            });
            _tag.find('span font').replaceWith('<font _id="' + default_data.id + '">' + default_data.name + '</font>');
            _tag.find('p').html(_html);
        } else {
            _html = '<div class="dropdown ' + css + '">';
            _html += '<span><font _id="' + default_data.id + '">' + default_data.name + '</font><a></a></span>';
            _html += '<p>';
            if (list) {
                $.each(list, function (i, value) {
                    _html += '<a _id="' + value.id + '">' + value.name + '</a>';
                });
            }
            _html += '</p>';
            _html += '</div>';
            var parent = _tag.parent();
            _tag.replaceWith(_html);
            _tag = parent.find('.dropdown' + (css.length > 0 ? '.' + css.replace(' ', '.') : ''));
        }
    }
    //下拉事件
    this.showEvent = function () {
        _tag.find('span').unbind('click').click(function () {
            var p = $(this).parent().find('p');
            if (p.css('display') == 'block') {
                p.css('display', 'none');
                $(this).removeClass('active');
            } else if (p.html().length > 0) {
                p.css('display', 'block');
                $(this).addClass('active');
            }
        });
    }
    //选中事件
    this.selectedIndex = function (index) {
        _tag.find('p a').unbind('click').click(function () {
            var parent = $(this).parent().parent();
            //给下拉框赋值
            if ($(this).text().length > 0) {
                var font = parent.find('font');
                font.text($(this).text());
                font.attr("_id", $(this).attr('_id'));
                _this.selectedIndexExpand(parent, $(this).index());
                parent.find('span').removeClass('active');
            }
            parent.find('p').css('display', 'none');
        });
        if (_tag.find('p a').length <= _index) _index = 0;
        if (_value && _value != '') {
            _index = _tag.find('p a[_id="' + _value + '"]').index();
        }
        _tag.find('p a:eq(' + _index + ')').click();
    }
    //选中事件扩展
    this.selectedIndexExpand = function (tag, index) { }
}

2。示例代码：

       //http://www.naoqiu.com
       var array_state = [{ id: -1, name: '状态' }, { id: 1, name: '未成功' }, { id: 2, name: '成功' }, { id: 3, name: '失败'}];
       //状态下拉控件
        var select_type = new ComboBox();
        select_type.tag = $('.select_type');
        select_type.data_default = array_state[0];
        select_type.data_list = array_state;
        select_type.selectedIndexExpand = function (tag, index) {
            //fun_Pager();
        }
        select_type.init();

3.示例图：

以下为示例教程：

ComboBox()

Contents

ComboBox()

html代码

<head>

<／head>

<body>

<／body>

init()

初始化控件，加载列表框。

示例:

展示效果:

selectedIndexExpand(tag,index)

选中拓展事件，选中记录后执行的操作。

参数:

tag:下拉框对象
index:选择的索引值

示例:

$(document).ready(function () {
var grade = [{ id: 0, name: "默认值" }, { id: 1, name: "第二个" }, { id: 2, name: "第三个"}];
　　　var combobox = new ComboBox();
　　　combobox.tag = $('.com_table');
　　　combobox.data_default = grade[0];
　　　combobox.data_list = grade;
　　　//选择拓展事件
　　　combobox.selectedIndexExpand = function (tag, index) {
　　　　　　alert("您选择了第" + index + "个");
　　　}
　　　combobox.init();
})

展示效果:

下载地址：

jQuery拓展的下拉框控件

http://www.tiaoceng.com/assemblydetail_5.html

posted @ 2016-06-17 09:48 跳层阅读(4376) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

基于jquery扩展漂亮的下拉框——ComboBox

公告