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

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

---

 

                               $(function () {             var city = ["上海", "北京", "西安", "哈尔滨", "广州", "深圳", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "珠海", " 中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江"];             $("#txtCity").beDropdownlist(city, function () { alert($("#txtCity").val()) });             //$("#txtCity").beDropdownlist(city);             var country = ["中国", "日本", "美国", "德国"];             $("#txtCountry").beDropdownlist(country);         });                  
     
     国家：     城市：  

 

编写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);

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

网站名称：jquery插件编写：文本框实现下拉框效果
路径分享：http://cdkjz.cn/article/peccpo.html