您所在的位置:小祥子 » 编程 » JavaScript » 正文

jQuery插件开发之datalist

时间:2015-07-13 编辑:codetker 来源:CnBlogs

      HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...)。于是最近更据需求写了一个小型datalist插件,兼容到IE8(IE7应该没多少人用了吧?)。实现的具体需求如下:

      当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦),单击鼠标左键或者enter键将选中的列表的值输入到input框。

      具体的实现代码如下:

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />
<meta name="author" content="codetker" />
    <title> 表单选中弹出框</title>
<link href="CSS/reset.css" type="text/css" rel="Stylesheet" /> 
<link href="css/master.css" type="text/css" rel="Stylesheet" /> 

<script type="text/javascript" src="JS/jquery-1.11.0.js"></script>
</head>

<body>
    <div class="wrap">
        <form class="center">
            <div class="input_wrap">
                <input name="input1" class="input input1" type="text"/>
                <ul class="input1_ul select_list">
                    <li>问题1</li>
                    <li>问题2</li>
                    <li>问题3</li>
                    <li>问题4</li>
                    <li>问题5</li>
                </ul>
            </div>
        </form>
    </div>
<script type="text/javascript" src="js/jquery.codetker.datalist.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); 
});
</script>
</body>
</html>

CSS(reset.css里面是初始化浏览器默认值用的,这里是style.css)

.wrap{ margin:0 auto; font-family: "微软雅黑";font-size: 14px;}
.center{ margin: 0 auto; width:500px;}
.input{ margin: 0; padding: 0; /*border:none;*/ width:140px; height: 24px; float:left;}
.select_list{display: none; position:absolute; z-index: 100;}
.select_list li{ height:24px; margin: 0; padding: 0; background-color: #fff; cursor: pointer; list-style: none; position:relative;}
.select_list li:hover{ background-color: red;}
.input_wrap{ position:relative; }

JavaScript

/*
    datalist 0.1 
    自定义datalist插件,实现html5中input元素datalist的效果
    兼容IE8+,Firefox,Chrome等常见浏览器
*/

;(function($,window,document,undefined){ //undefinde是真实的undefined,并非参数
    //将可选择的变量传递给方法

    //定义构造函数
    var Datalist=function(ele,opt){
        this.$element=ele;
        this.defaults={
            'bgcolor':'green',
            'widths':1,
            'heights':1
        },
        this.options=$.extend({}, this.defaults, opt);
    }
    //定义方法
    Datalist.prototype={
        showList:function(){
            var color=this.options.bgcolor;
            var width=this.options.widths;
            var height=this.options.heights; //属性值

            var obj=this.$element; //obj为最外层包裹的div之类的元素,应该拥有positive:relative属性,方便datalist定位。
            var input=$(obj).children().eq(0); //input元素
            var inputUl=$(obj).children().eq(1); //datalist元素
            //设置弹出datalist的大小和样式
            $(inputUl).css({
                "top":$(input).outerHeight()+"px",
                "width":$(input).outerWidth()*width+"px"
            });
            $(inputUl).children().css({
                "width":$(input).outerWidth()*width+"px",
                "height":$(input).outerHeight()*height+"px"
            });

            $(inputUl).children('li').mouseover(function() {
                $(this).css("background-color",color);
                $(this).siblings().css("background-color","#fff");
            });
            $(inputUl).children('li').mouseout(function() {
                $(this).css("background-color","#fff");
            });
            //再次focus变为空,也可以改为某个默认值
            //datalist的显示和隐藏
            $(input).focus(function() {
                if($(this).val()!=""){
                    $(this).val("");
                }
                $(inputUl).slideDown(500);

                var n=-1;  //记录位置,-1表示未选中。当n=-1时直接按enter浏览器默认为倒数第一个
                $(document).keydown(function(event) {
                    /* 点击键盘上下键,datalist变化 */
                    stopDefaultAndBubble(event);
                    if(event.keyCode==38){//向上按钮
                        if(n==0||n==-1){
                            n=4;
                        }else{
                            n--;
                        }
                        $(inputUl).children('li').eq(n).siblings().mouseout();
                        $(inputUl).children('li').eq(n).mouseover();
                    }else if(event.keyCode==40){//向上按钮
                        if(n==4){
                            n=0;
                        }else{
                            n++;
                        }
                        $(inputUl).children('li').eq(n).siblings().mouseout();
                        $(inputUl).children('li').eq(n).mouseover();
                    }else if(event.keyCode==13){//enter键
                        $(inputUl).children('li').eq(n).mouseout();
                        $(input).val( $(inputUl).children('li').eq(n).text() );
                        n=-1;
                    }
                });


                //去掉浏览器默认
                function stopDefaultAndBubble(e){
                    e=e||window.event;
                    //阻止默认行为
                    if (e.preventDefault) {
                        e.preventDefault();
                    }
                    e.returnValue=false;

                    //阻止冒泡
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }
                    e.cancelBubble=true;
                }

            });
            $(input).blur(function() {
                $(inputUl).slideUp(500);
            });
            $(inputUl).delegate('li', 'click', function() {
                    $(input).val( $(this).text() );
            });

            return this;
        }
    }
    //在插件中使用Datalist对象
    $.fn.myDatalist=function(options){
        //创建实体
        var datalist=new Datalist(this,options);
        //调用其方法
        return datalist.showList();
    }
 
})(jQuery,window,document);

      这里用ul li列表模拟datalist options。实现逻辑非常简单,稍微需要注意点的是div.input_wrap是用相对定位的,方便ul.input1_ul相对进行定位。由于需求有很多的输入框且相互之间不影响,因此这里是input1。好歹是我自己开发的第一个插件,mark一记。

关键词:插件 data li