web前端|js教程
jQuery,datalist,下拉列表
web前端-js教程
HTML5中定义了一种input框很好看的下拉列表–datalist，然而目前它的支持性并不好(万恶的IE，好在你要渐渐退役了…)。于是最近更据需求写了一个小型datalist插件，兼容到IE8(IE7应该没多少人用了吧？)。实现的具体需求如下:
java源码cps分销系统,vscode打开网页失败,ubuntu快速上手,tomcat可不装jdk,黄网爬虫,php网站源码安装,保定seo推广公司有哪些,翻书效果网站,dede专题模板lzw
当被选中的时候(触发blur焦点)(不管是鼠标还是tab键)清空input框并且显示自定义的下拉列表,然后可以用键盘的上下键选择(鼠标当然肯定没理由不可以啦)，单击鼠标左键或者enter键将选中的列表的值输入到input框。
.net仿商城源码下载,vscode 编译器下载,Ubuntu开启UDP,让tomcat指向项目,小爬虫卡通,php 正则 第一次,seo应该如何做快速推广,企业内网网站开源,国际物流网页模板lzw
具体的实现代码如下：
按键精灵获取网页源码,代码规范审核工具vscode,ubuntu 文件转移,tomcat如何平滑重启,爬虫抓取xml,php中如何配置,广州seo建站服务公司,网站上的源码,网站模板f一品资源网lzw
HTML
问题1问题2问题3问题4问题5
$(document).ready(function(){ $(".input_wrap").myDatalist({"bgcolor":"red","widths":1,"heights":1}); });
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={gcolor: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一记。
需要代码的可以戳/codetker/myDatalist。
以上所述就是本文的全部内容了，希望大家能够喜欢。
