jquery插件的写法

发布时间:2017-04-27 浏览次数:2880 文章来源:个人博客

jquery插件的写法一共有三种,插件经常用到,记录一下。


第一种:

对jquery自身的扩展插件,类似与$.ajax的写法,如:

$.extend({
    handleTableUI: function(table){
        varthisTable = $("#" +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" });
        });
    }
});

这样来扩展插件,调用方法如下:

<scripttype="text/javascript">
    $(document).ready(function() {
        $.handleTableUI("newTable");
    });
</script>


第二种:

对HTML标记或页面元素进行扩展,如:

(function ($) {
    $.fn.setTableUI= function(options){
        var defaults = {
            evenRowClass:"evenRow",
            oddRowClass:"oddRow",
            activeRowClass:"activeRow"
        }
        varoptions = $.extend(defaults, options);
        this.each(function(){
            varthisTable=$(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);

这种方式,调用的办法如下:

<script type="text/javascript">
    $(document).ready(function() {
        $("#newTable").setTableUI();
    });
</script>


第三种:

不要用在页面显式调用JQuery的方法,而是通过直接添加JQuery插件脚本引用,即可实现对该插件的调用。

这种是常见的引入插件的方式:

(function ($) {
    $.tableUI= { set: function (){
        varthisTable = $("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);

这样定义以后,需要调用就用script scr=‘‘这种引入。

key-word
插件 jq插件写法 如果写插件 jq插件