主页
问答

*请求帮助[SOS]**

huangwenquan123 2010-12-21 10:24:17

很少来js版块逛，来了次发现这里好多大牛，看他们写法手段，在对照自己，自残形愧
这里向大家请教个问题
一般jquery插件我都这样写



(function($){

    $.fn.face=function(options)

    {

        var defaults = {

            "ID":"content"

        };

        options = $.extend(defaults,options);

        $(this).click(function(e){

            //每次我都把那些事件都写在里面，长的话就一大堆，可读性不怎么好，该怎么改呢

            //一般大家都砸写的呢？

            //....

             $("#maindiv li").mouseover(function(e){

                   //....

());

            }).bind("click",function(event){

                //....

            })

        })

    }

})(jQuery);

...全文

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

tian_he_wang 2010-12-22

其实你写的也没什么大问题，只要相同的功能就可以写在同一个处理事件里，至于要如何合理的利用jquery，这个就要按照实际情况和自身的习惯来衡量。任何东西都要用的其所

回复赞

猿敲月下码 2010-12-22

关键是你这些事件是固定死的还是可变的

如果是固定死的可以放在另外一个文件里面

如果是活的,可以把函数句柄放在options里面让用户设置,然后在内部赋值

回复赞

fxs_2008 2010-12-22

还是要理解函数机制才能灵活处理啊

回复赞

xf_taoran 2010-12-21

回复赞

kagetu_toki 2010-12-21

不過我自己一般都這樣寫



(function ($) {

  $.a = {

    fna: function (p) {

    },

    fnb:function(pa,pb){

    }

  };

  $.extend($.a);

})(jQuery);

調用的時候可以通過 $.a.fna(p);或者$.a.fnb(a,b);的形式調用相應函數

回复赞

kagetu_toki 2010-12-21

一般插件的三種寫法實例，在網上收集到的
同樣都是實現鼠標經過表格行時高亮，可參考下



//实现鼠标经过表格行时高亮，调用方法为：$.handleTableUI("table_content_list");

; (function ($) {

  $.extend({

    handleTableUI: function (table) {

      var thisTable = $("#" + table);



      $(thisTable).find("tr").bind("mouseover", function () {

        $(this).css({ color: "#ff0011", background: "blue" });

      });

      $(thisTable).find("tr").bind("mouseout", function () {

        $(this).css({ color: "#000000", background: "white" });

      });

    }

  });

})(jQuery);



//实现鼠标经过表格行时高亮，调用方法为：$("#table_content_list").setTableUI();

; (function ($) {

  $.fn.setTableUI = function (options) {

    var defaults = {

      evenRowClass: "evenRow",

      oddRowClass: "oddRow",

      activeRowClass: "activeRow"

    }

    var options = $.extend(defaults, options);

    this.each(function () {

      var thisTable = $(this);

      $(thisTable).find("tr").bind("mouseover", function () {

        $(this).css({ color: "#ff0011", background: "blue" });

      });

      $(thisTable).find("tr").bind("mouseout", function () {

        $(this).css({ color: "#000000", background: "white" });

      });

    });

  };

})(jQuery);

//实现鼠标经过表格行时高亮，该方法自行调用

; (function ($) {

  $.tableUI = { set: function () {

    var thisTable = $("table");

    $(thisTable).find("tr").bind("mouseover", function () {

      $(this).css({ color: "#ff0011", background: "blue" });

    });

    $(thisTable).find("tr").bind("mouseout", function () {

      $(this).css({ color: "#000000", background: "white" });

    });

  }

  };

  //此处进行自调用

  $(function () {

    $.tableUI.set();

  });

})(jQuery);