自制jquery可编辑的下拉框
昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个。
原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAACDCAIAAAAGdOnwAAADcUlEQVR4nO3csWtddRjH4QuhdLhz1y7+ATo5SP4Hh25CcZHsTkJQEJwcMnRwl0Dp6FBEh06lgwgi7RJwEYVAcFD0uhQCX4fX1pBwz/3l3nvOPSc+z9Sm9x4aeD9pfic97yxAMtv1XwBGQQmQXC3hKdx0rSX0UhyMgxIgUQIUJUCiBCak1yFUApOhBEiUAEUJkFxvCBdH9/fnd/Z/PFtseHElMDrNQ7g4ur8/m92az2+1x6AEJqNtCCuD+UdffP3zT0/fvjNvjEEJTEbDEP6XwQ/Pvnpw/OTX59++2RaDEpiMlUP43Zcf7/2bwcO7t/dms9m9w0cVw1vvfvrXWhdXAqPTMIQvT385ffHs4d3be2+88/7R4Xt7s9m9w0d//v7bH3+/XO/iSmB0Wobw5FUGJ2eL5Pzx5x9UDOfrXlwJjM7KITx9/vhCBqU1BiUwGSuHcHH24pMPPzu5fDg+f3L84Pib75XADeFnzJAoAYoSIFECFCVAogQYgBIgUQIUJUCiBCjXKAFuttYSNs8ORksJkCgBihIgUQKUfks4ODhY410wvK2VcHHoX/+6vYSDJRrfDhva5r8JVwNYY5RNPzvRVwkdX927/+janwFsw/bPCe2T3Z2HKhjSLk/M3c0ogSFtoYRLX8WXnX27Z30rZwxYWy/nhLQNdGMJHWn5hoptmUAJMAAlQNL3zxOWfbDlZUpgSDsu4eI5e9kbYQDbL6F74q/+tuUK0Lct/7+jxiHuyKDjBdCf7ZRwaYjXuMvZfYqAvo3i+YRlQy8GBjOKEmDnlACJEqAoARIlQFECJEqAogRIlABFCZAoAYoSIFECFCVAYlc2FLuyIbErG8pkdmV3PxSqHzZkVzYkdmVDsSsbEntRoSgBEiVAsSsbkp2XcPGcveyNMIAJ7MruuBm18vYUNLIrGxK7sqGM4vmEZUMvBgYzihJg55QAiRKgKAESJUBRAiRKgKIESJQARQmQKAGKEiBRAhQlQGJXNhS7siGZyq5sDzHTt8nsyoZe2ZUNiV3ZUOzKhmRCe1E7AvOtFJubTAnQKyVAsvMNwR0vUwJDsisbkknsyoYBTGBX9sq7Ru4gsTm7siEZyfMJy4ZeDAxmFCXAzikBEiVAUQIkSoCiBEiUAEUJkCgByjVKgJutqQT4f1ICJEqAogRIlABFCZAoAco/wuWnEzqjp3gAAAAASUVORK5CYII=" alt="" />
一、制作静态效果
先用css和html,做出一个应该有的样子。这里这两个aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAXCAIAAABrvZPKAAAAwklEQVQ4jWP4TxlgGNb6P/fG2nCL2px/8ZkM/Z97Y20YGFi5uVnxGIFLP0Qzd/nUrfdvHTIT5cZlBFb9CM1nj6yfuGjPo4s79HEYgUX/iQU1zFDNS+XYmRkYGIKrlkOMMPBv+ESE/T+fPnx66chSOXZmZav43qooZgaG4KrlH9+9ev/lJ1H+vw7TfP3F5////2zuTIEY8YcY/z+9uBlJMwTgNAKL/s8vLtUWNl9HD6o/exZNXLT9FGH9JIFR/aP6KQEAnLQ+lLu2SbcAAAAASUVORK5CYII=" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAASCAIAAADQR7l6AAAAxElEQVQ4jWP4TzFgGNZGfD5z6tIfDNGn187dfvGZKCNOLKhhZmAILFvyE0nw+pGlcuzMBv4Nn4hzxZ/NnSnIpkD0K1vFXyfSFWimXMKrH7sRTy9uNZK32nfrOcQUBgYGZav4q09u57kYJTWvxgwjLEZ8fnHJT12cmV1u88VHW/vyjFxSrj65nWmlzMwuN3P7KaKMQDXl6Z9fT/Hox2kEkiniBroyePTjMwLZLXj0EzDi////n1/cPnLqBh79hI0gBgwbIwCNaDpcLXAPbQAAAABJRU5ErkJggg==" alt="" />我使用的是字体,可以在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)">选项一</a></li>
- <li><a href="javascript:void(0)">选项二</a></li>
- <li><a href="javascript:void(0)">选项三</a></li>
- <li><a href="javascript:void(0)">选项四</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:;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:;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);
|
最外面包裹的样式,就是上面的span |
|
输入框的样式 |
|
按钮的样式,就是aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAiCAIAAACiBwxcAAAA9ElEQVRYhWP4P0CAYcAsPkR3MDA+HrV4UFgMlxu1eNTi////f+6NteEWtTn/4jM9Lf7cG2vDwMDKzc1KvN2UWwyxlbt86tb7tw6ZiXITaTeFFiNsPXtk/cRFex5d3KFPnN0UWXxiQQ0z1NalcuzMDAwMwVXLIXYb+Dd8op3F////fPrw6aUjS+XYmZWt4nuropgZGIKrln989+r9l5/4dVIax9dhtl5/8fn//z+bO1Mgdv8hpJEii59e3IxkKwQQazdFFn9+cam2sPk6ejr6s2fRxEXbT9HQYkrAqMWjFg+IxTQFoxaPJItp0CsjAAbaxwNlMQAPJyKIQru+VQAAAABJRU5ErkJggg==" alt="" /> |
|
下拉列表的样式 |
|
下拉列表中的内容 |
然后是一个渲染的方法
- 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)">'+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>
一句话就可以了,挺方便的。
2014-08-22补充
最近在实际项目中使用了这个插件,碰到了些新问题:
1.在实际项目中,最后是要取那个动态生成的输入框中的值的,这样的话就得定位这个输入框,可以在默认参数中新增了一个inputId,控制它
2.如果下拉列表中没有内容,那就没必要调用_initSelect这个方法了
- if(options.datas.length > 0)
- _initSelect(_this, this);//初始化下拉列表
3.点击了下来按钮后,下拉内容显示,一定要选中某个内容后,才能把下拉框隐藏掉,这个不太方便,在网上搜索了相关代码
- //点击其他地方影藏下拉列表
- $(document).click(function(e) {
- e = window.event || e; // 兼容IE7
- var $obj = $(e.srcElement || e.target);
- if($obj.closest($border).length <= 0) {
- $ul.hide();
- $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
- }
- });
完整demo下载:
http://download.csdn.net/download/loneleaf1/7703033
2014-08-22修改过的combox.js下载:
自制jquery可编辑的下拉框的更多相关文章
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jquery选中将select下拉框中一项后赋值给text文本框
jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...
- jquery+html三级联动下拉框
jquery+html三级联动下拉框及详情页面加载时的select初始化问题 html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...
- Dropdown.js基于jQuery开发的轻量级下拉框插件
Dropdown.js 前言 在SPA(Single Page Application)盛行的时代,jQuery插件的轮子正在减少,由于我厂有需求而开发了这个插件.如果觉得本文对您有帮助,请给个赞,以 ...
- jquery取消选择select下拉框
有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...
- jquery easyui无法绑定下拉框内容
最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...
- jQuery自定义多选下拉框
项目中需要自定义一个下拉框多选插件,业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去,通过调用该插件时接收,选择后的确定与取消事件采用事件传递方式 代码如 ...
- js:jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- SQL Server 2008 R2 下移动数据库的存储位置
使用场景:1. 该数据库增长的较大,存储磁盘空间不足: 2. 在特定情况下该数据库需要移动到另外一块磁盘上(呵呵...我的情况就是之前的磁盘要还给别人) 步骤: 1. 新建查询 SELECT na ...
- struts2 国际化的一个日期封装bug
输入用户的生日:时间格式是yyyy-MM-dd,这样的.使用struts2,在action中有一个熟悉是:private Date birth;struts2在默认的情况下会将birth值自动绑定,简 ...
- Python札记 -- 装饰器补充
本随笔是对Python札记 -- 装饰器的一些补充. 使用装饰器的时候,被装饰函数的一些属性会丢失,比如如下代码: #!/usr/bin/env python def deco(func): def ...
- GitHub的多人协同开发配置
GitHub For Windows 下载地址:https://windows.github.com/ 基本的注册登录就不细讲了. 在源代码管理上,最重要的就是仓库了.仓库这一概念很容易理解,所谓仓库 ...
- Fedora23Server配置
系统准备 启动网卡: sudo service network start 更新系统: sudo dnf update 远程管理: https://IP:9090/ Dnf使用: http://www ...
- js函数实现转换css中常用的颜色编码
//转换css中常用颜色编码 var toRGB = function (val){ var reg1 = /^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i; ...
- Unity3D热更新全书-重头再来
之前写了Unity3D热更新全书系列Blog 提出了下载.加载.脚本三个方面的开源类库 下载方面有EasyDown加载方面有GameObjParser脚本方面有C#Light另外有一个没有独立成库,但 ...
- [安卓] 12、开源一个基于SurfaceView的飞行射击类小游戏
前言 这款安卓小游戏是基于SurfaceView的飞行射击类游戏,采用Java来写,没有采用游戏引擎,注释详细,条理比较清晰,适合初学者了解游戏状态转化自动机和一些继承与封装的技巧. 效果展示 ...
- [ACM_动态规划] 嵌套矩形
问题描述:有n个矩阵,每个矩阵可以用两个整数a,b来表示 ,表示他的长和宽,矩阵X (a,b) 可以 嵌套 到Y (c,d) 里面当且仅当 a < c && b < d ...
- 爱上MVC3~MVC+ZTree实现对树的CURD及拖拽操作
回到目录 上一讲中,我们学习了如何使用zTree对一棵大树(大数据量的树型结构的数据表,呵呵,名称有点绕,但说的是事实)进行异步加载,今天这讲,我们来说说,如何去操作这棵大树,无非就是添加子节点,删除 ...