基于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 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
JS实现仿苹果底部任务栏菜单效果代码
Aug 28 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
token 机制和实现方式
Dec 15 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
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
js异或加解密效果代码
2008/06/25 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
2016/06/24 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
javascript如何创建对象
2016/08/29 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
JS中的继承操作实例总结
2020/06/06 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
利用python求相邻数的方法示例
2017/08/18 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
python集合常见运算案例解析
2019/10/17 Python
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
介绍一下gcc特性
2015/10/31 面试题
护理专业本科生自荐信
2013/10/01 职场文书
工厂门卫岗位职责
2013/11/25 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
幼儿体育课教学反思
2016/02/16 职场文书