基于jquery实现的可编辑的下拉框
2016-07-17 00:00
561 查看
最近做的一个小项目需要用到下拉框,但这个下拉框最好需要可编辑,网上找了几个都不太满意,自己动手改了一个,现在分享给大家。
1、效果如下
2、使用方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可编辑的下拉框</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.combox.js"></script> <link rel="stylesheet" href="styles/style.css" type="text/css"/> <script type="text/javascript"> $(document).ready(function() { $('#combox').combox({datas:['选项一','选项二','选项三']}); }) </script> </head> <body> <span id="combox"></span> </body> </html>
3、js源码
(function($){ $.fn.combox = function(options) { var defaults = { borderCss: "combox_border", inputCss: "combox_input", buttonCss: "combox_button", selectCss: "combox_select", datas:[] }; var options = $.extend(defaults, options); function _initBorder($border) {//初始化外框CSS $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss); return $border; } function _initInput($border){//初始化输入框 $border.append('<input type="text" class="'+options.inputCss+'"/>'); $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>'); //绑定下拉特效 $border.delegate('font', 'click', function() { var $ul = $border.children('ul'); if($ul.css('display') == 'none') { $ul.slideDown('fast'); $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top'); }else { $ul.slideUp('fast'); $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom'); } }); return $border;//IE6需要返回值 } function _initSelect($border) {//初始化下拉列表 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">'); var $ul = $border.children('ul'); $ul.css('top',$border.height()+1); var length = options.datas.length; for(var i=0; i<length ;i++) $ul.append('<li><a href="javascript:void(0)">'+options.datas[i]+'</a></li>'); $ul.delegate('li', 'click', function() { $border.children(':text').val($(this).text()); $ul.hide(); $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变 }); return $border; } this.each(function() { var _this = $(this); _this = _initBorder(_this);//初始化外框CSS _this = _initInput(_this);//初始化输入框 _initSelect(_this);//初始化下拉列表 }); }; })(jQuery);
4、css源码
ul{list-style-type:none;margin:0;padding-left:0;} li{margin:0;} @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal; } .ficomoon{font-family:'icomoon';} .icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"} /*可根据自己的实际情况做修改*/ .combox_border{border:1px solid #c2c2c2;height:28px;width:245px} .combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;} .combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2} .combox_select{border:1px solid #c2c2c2;border-top:0;width:100%} .combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;} .combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;} .combox_select a:hover {text-decoration: none;background:#f5f5f5}
5、完整源码下载
http://download.csdn.net/detail/feiyang123_/9578563相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- JavaScript 各种遍历方式详解
- 数组方法汇总
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?