jQuery插件datalist實作很好看的input下拉清單_jquery
- WBOY原創
- 2016-05-16 15:50:171927瀏覽
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一記。
需要程式碼的可以戳https://github.com/codetker/myDatalist。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn