基于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 相关文章推荐
通过JAVAScript实现页面自适应
Jan 19 Javascript
js活用事件触发对象动作
Aug 10 Javascript
JavaScript函数、方法、对象代码
Oct 29 Javascript
jQuery替换字符串(实例代码)
Nov 13 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
js不常见操作运算符总结
Nov 20 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
网站加速 PHP 缓冲的免费实现方法
2006/10/09 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
2016/10/25 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
保险内勤岗位职责
2014/04/05 职场文书
什么是就业协议书
2014/04/17 职场文书
激励口号大全
2014/06/17 职场文书
法人委托书
2014/07/31 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
《山中访友》教学反思
2016/02/24 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
MySQL创建管理HASH分区
2022/04/13 MySQL
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python