基于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 相关文章推荐
围观tangram js库
Dec 28 Javascript
一个封装js代码-----展开收起效果示例
Jul 03 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
详解用node编写自己的cli工具
May 23 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
ES5和ES6中类的区别总结
Dec 21 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
2015/04/07 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
基于jquery实现在线选座订座之影院篇
2015/08/24 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
详解Node.js串行化流程控制
2017/05/04 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Python入门篇之函数
2014/10/20 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python实现远程控制电脑
2019/05/23 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
应届大学生的推荐信
2013/11/20 职场文书
酒店总经理助理职责
2014/02/12 职场文书
人事专员的岗位职责
2014/03/01 职场文书
大学生评语大全
2014/04/18 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
员工工作及收入证明
2014/10/28 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
面试官问我Mysql的存储引擎了解多少
2022/08/05 MySQL