基于jquery实现的可编辑下拉框实现代码


Posted in Javascript onAugust 02, 2014

原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮。

基于jquery实现的可编辑下拉框实现代码

一、制作静态效果

先用css和html,做出一个应该有的样子。这里这两个基于jquery实现的可编辑下拉框实现代码基于jquery实现的可编辑下拉框实现代码我使用的是字体,可以在icomoon网站上面自己制作。用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示这种字体,但可以通过一些其他方法实现,大家可以自己尝试下。下面是html代码

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>

1、标签中有style和class,这个style就是必须属性,一定要有
2、最外围是用span来做包裹的,然后给了个inline-block属性,之所以用行内元素是为了以后布局的方便,换成块元素也是可以的,但很多时候块元素会伴随着float浮动等样式,控制起来比较麻烦
3、ficomoon icon-angle-bottom在定义字体
4、span的属性position是relative,下拉我就打算用ul定位来模拟,ul的position是absolute,top以后可以根据jquery来获取span的高度设置,left就写死了
5、li里面的内容我加了个a标签,这里就是想偷懒一下,a标签有个:hover伪类,移上去可以改变CSS,这样我就能少写这个移到内容上去变样式的特效

下面是CSS代码:

@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}

这里的combox_border等样式可以自定义,可以加CSS3样式美化,我这里就做了个朴素的样式。

二、制作JS特效

在做JS的时候,碰到个奇怪的问题,就是放在任何浏览器中都不会报错,但是在IE6死活提示未设置的对象属性的错误,最后发现是因为js文件编码的问题,不是UTF-8,改变下编码就可以了。

先是一个jquery插件格式

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);

然后是添加默认参数

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);

borderCss 最外面包裹的样式,就是上面的span
inputCss 输入框的样式
buttonCss 按钮的样式,就是
selectCss 下拉列表的样式
datas 下拉列表中的内容

然后是一个渲染的方法

this.each(function() {
var _this = $(this);
_this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
_this = _initInput(_this);//初始化输入框
_initSelect(_this);//初始化下拉列表
});

动态的生成输入框,按钮,下拉框,附上样式和时间。我将三个渲染分别放在了三个函数中,这样清晰一点

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)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+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;
 }

三个函数中的参数我都加了个$符号,便于自己知道这是一个jquery对象。这几个函数中没什么技术难点,都是非常普通自然的逻辑,大家也可以随时根据自己的不同需求改变代码,插件总共只有50几行,非常容易修改。

下面是调用插件:

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
<span id="combox"></span>
</body>
</html>

一句话就可以了,挺方便的。

demo演示:http://demo.3water.com/js/2014/combox_jquery/

demo下载:https://3water.com/jiaoben/199034.html

Javascript 相关文章推荐
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
原生js实现弹出层效果
Jan 20 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 Javascript
基于编写jQuery的无缝滚动插件
Aug 02 #Javascript
js使用removeChild方法动态删除div元素
Aug 01 #Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 #Javascript
js中的getAttribute方法使用示例
Aug 01 #Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 #Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 #Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
PHP学习之数组的定义和填充
2011/04/17 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
python模块之time模块(实例讲解)
2017/09/13 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python烟花效果的代码实例
2020/02/25 Python
django使用JWT保存用户登录信息
2020/04/22 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
python 实现有道翻译功能
2021/02/26 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
法律专业实习鉴定
2013/12/22 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
离职报告范文
2014/11/04 职场文书
幼儿园感谢信
2015/01/21 职场文书
感谢信模板大全
2015/01/23 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
python Polars库的使用简介
2021/04/21 Python
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL