基于jquery扩展漂亮的下拉框可以二次修改


Posted in Javascript onNovember 19, 2013

继续发一篇关于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、示例图:
基于jquery扩展漂亮的下拉框可以二次修改
Javascript 相关文章推荐
jQuery实现的立体文字渐变效果
May 17 Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
js事件(Event)知识整理
Oct 11 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
Node.js操作系统OS模块用法分析
Jan 04 Javascript
微信小程序实现轨迹回放的示例代码
Dec 13 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 #Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 #Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 #Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 #Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 #Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 #Javascript
jQuery控制iFrame(实例代码)
Nov 19 #Javascript
You might like
初探PHP5
2006/10/09 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python全局变量用法实例分析
2016/07/19 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
Python用input输入列表的实例代码
2020/02/07 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
农民工工资支付承诺函
2014/03/31 职场文书
爱我中华教学反思
2014/04/28 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
MySQL普通表如何转换成分区表
2022/05/30 MySQL
nginx配置指令之server_name的具体使用
2022/08/14 Servers