开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

自制jquery可编辑的下拉框

简介:
+关注继续查看

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件;在网上查了很多,没有找到合适自己的,所以决定自动制作一个。

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

一、制作静态效果

先用css和html,做出一个应该有的样子。这里这两个我使用的是字体,可以在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: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)">'+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


    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/3884721.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery 事件
什么是事件? 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 实例: 在元素上移动鼠标。 选取单选按钮 点击元素 | 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 | | click |...
843 0
jquery级联下拉框
$(document).ready(function(){     //找到三个下拉框     var carnameSelect = $(".carname").children("select");     var cartypeSelect = $(".cartype").children("select");     var wheeltypeSelect = $(".wheelty
1391 0
JQuery 初探
放暑假了,终于有时间能学点前端的东西了。JQuery就是我第一个选择,锋利的JQuery。这本书真的很好。下面以一个ToggleButton形式的小例子开场吧。 引入JQuery库 在网页上引用JQuery并不是一件难事,我们通常来说有两种方式。
934 0
JQuery实战--可以编辑的表格
       廊坊下雪了,15年的第二场雪,比14的来的稍晚一些,停靠在11教门前的自行车,成了廊坊师范学院最美丽的风景线。还记得以前学习css的时候,就曾经接触过如何编写设计一些表格和表单的样式,例如如何设计表格中的颜色,隔行变色等等,相关链接,请点击。
1135 0
jQuery 事件
什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 ...
765 0
jquery 例子
引用:http://hi.baidu.com/coolcat_police/blog/item/fb7b7f458ebde12ccffca3bb.html                     JSP Page                    .
715 0
Jquery(引)
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
863 0
Jquery(引)
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
852 0
21114
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载