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,内含li元素             for (var item in data) {                 html += "
  • " + data[item] + "
  • ";             }             html += "
    ";             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);

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

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

    网站标题:jquery插件编写:文本框实现下拉框效果
    URL网址:http://scyanting.com/article/peccpo.html

    其他资讯