现在位置首页 / 前端开发 /正文

jquery 自定义datalist/下拉框插件:datalist

作者: IT小兵 | 2015年7月30日| 热度:℃ | 评论: |参与:

本站分享了好多jquery的下拉框插件,比如:[Jquery select美化增加版Select2使用]. 但是源代码都比较庞大,因为支持功能比较多。

今天分享的datalist ,比较简单。实现html5中input元素datalist的效果,    兼容IE8+,Firefox,Chrome等常见浏览器


源代码下载:链接:http://pan.baidu.com/s/1nt69N4X 密码:n88p

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>

插件源代码:

/*
    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,
                    width = this.options.widths,
                    height = this.options.heights, //属性值
                    obj = this.$element, //obj为最外层包裹的div之类的元素,应该拥有positive:relative属性,方便datalist定位。
                    input = $(obj).children().eq(0), //input元素
                    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').hover(function() {
                    $(this).css("background-color",color);
                }, function() {
                    $(this).css("background-color","#fff");
                });*/
                $(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);
                    /*
                     * 改进:仅在focus的时候触发,增强用户体验
                     * 1.绑定上下按钮事件
                     * 2.绑定enter事件
                     * 3.去掉默认属性
                     */
                    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);

调用方式:

<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>


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询