版权声明： 本文由 一只博客 发表于 bloghome博客
文章链接： 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);
这种形式，有利于不同程序员的阅读。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
