jquery插件编写：文本框实现下拉框效果

版权声明：本文由一只博客发表于 bloghome博客
10年积累的成都网站制作、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站设计后付款的网站建设流程，更有高坪免费网站建设让你可以放心的选择与我们合作。
文章链接： https://www.bloghome.com.cn/user/cnn237111

先上代码：

jQuery.beDropdownlist.js

(function ($) {//jquery插件编写中，不能假设$是有效的，因此，使用这种包装函数，使得在下面的代码中可以继续写$,对于这个函数的分析，可以具体看下面的分析。     $.fn.beDropdownlist = function (data, fn) {// $.fn对象是$.prototype的别名，使用fn为了简洁。          //默认值         var defaults = {             data: ['nothing']         }          var options = { data: data };         options = $.extend(defaults, options); //使得参数覆盖          var bindevent = function (o) {             var tmpid = "tmpselector_" + $(o).attr("id"); //生成临时的id             if ($("#" + tmpid).length > 0)                 return; //退出，不在继续下去              var data = options.data; //数据源              //此处style中设置为absolute             var html = "<div id='" + tmpid + "' style='border: 1px solid grey;max-height: 150px;position:absolute; overflow: auto;background:white;'><ul class='ui-menu'>";             //动态生成一个div，内含li元素             for (var item in data) {                 html += "<li>" + data[item] + "</li>";             }             html += "</ul></div>";             var left = $(o).offset().left;             var top = $(o).offset().top + $(o).height() + 4;              var finalize = function () {                 $("#" + tmpid + " li").die('click'); //取消事件绑定                 $("#" + tmpid).remove();             }             $("body").append(html);             //设置该div的宽度，位置等。             $("#" + tmpid).width($(o).width() + 5);             $("#" + tmpid).offset({ top: top, left: left });             $("#" + tmpid).live('mouseleave', function () { finalize(); });             $("#" + tmpid + " li").live('click', function () {                 $(o).val($(this).text());                 finalize();                 if (fn != undefined) {                     fn(); //调用传进来的函数。                 }             });         }          this.each(function () {//由于jquery的选择符可能匹配多个对象，所以需要用each，对每个匹配的元素做操作。             if ($(this).is(":text") == true) {                 $(this).click(function () {                     bindevent($(this)); //设置要做的内容                 })             }         });     }; })(jQuery);

jQuery.beDropdownlist_demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>     <title></title>     <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>     <script src="jQuery.beDropdownlist.js" type="text/javascript"></script>     <script type="text/javascript">         $(function () {             var city = ["上海", "北京", "西安", "哈尔滨", "广州", "深圳", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "珠海", " 中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江"];             $("#txtCity").beDropdownlist(city, function () { alert($("#txtCity").val()) });             //$("#txtCity").beDropdownlist(city);             var country = ["中国", "日本", "美国", "德国"];             $("#txtCountry").beDropdownlist(country);         });      </script>     <link rel="stylesheet" type="text/css" href="jQuery.beDropdownlist.css" /> </head> <body>     <br>     <br>     国家：<input type="text" id='txtCountry' value="" />     城市：<input type="text" id='txtCity' value="" /> </body> </html>

编写jquery有几点注意：

$.fn对象是$.prototype的别名，使用fn为了简洁。

options = $.extend(defaults, options); 使得参数覆盖，该函数的具体说明可以参考jQuery手册。

由于jquery的选择符可能匹配多个对象，所以需要用each，对每个匹配的元素做操作。

jquery插件编写中，不能假设$总是是有效的，因此，使用包装函数，使得在下面的代码中可以继续写$。

包装函数的形式如下：

(function ($) {              })(jQuery);

该方式使用的是一种匿名函数的方式，传入的参数是jQuery，函数体内部仍然用$符合作为jQuery对象，因此很方便，与之等价的写法其实就是：

var baozhuanghanshu=function ($) {   //具体实现 } baozhuanghanshu(jQuery)

也就是说，上面的jquery插件也可以采用这种写法，直接调用baozhuanghanshu即可。甚至可以把$写成$my$作为jQuery。如下：

var baozhuanghanshu=function ( $my$ ) { //具体实现        } baozhuanghanshu(jQuery)

但是一般遵循约定，包装方法都是写成

(function ($) {

})(jQuery);

这种形式，有利于不同程序员的阅读。

附件：http://down.51cto.com/data/2361333

网页题目：jquery插件编写：文本框实现下拉框效果
文章转载：https://www.cdcxhl.com/article30/peccpo.html

成都网站建设公司_创新互联，为您提供网站排名、定制开发、建站公司、云服务器、网站营销、外贸建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容