你的位置:首页 > Java教程

[Java教程]jQuery插件开发之datalist

      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一记。