如何写jquery插件

标签：jquery   jquery插件   

常用的JQuery插件有如下几种写法：

1. 对JQuery自身的扩展插件

这种插件是对JQuery自身的方法库进行扩展的。在使用的时候通过$.MethodName()的方式直接使用。

$.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自身进行扩展的时候，需要采用$.extend();的形式进行开发，JQuery的extend()方法为我们提供了扩展 JQuery自身的方式，在extend()方法中，我们采用{...}的形式编写具体的方法体。其中，最重要的是要定义我们自己的扩展方法，如示例中的 handleTableUI。定义的方式是：方法名 : function(参数){ 方法体 }。通过此种方式我们就可以定义JQuery自己的扩展方法，而且这个方法可以在web页面通过智能提示显示出来。

页面中调用的代码如下：

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

2、 对JQuery对象的插件开发

(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);

具体调用代码如下：

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

参考资料：  jquery插件写法   http://www.studyofnet.com/news/500.html

本文出自 “学习也休闲” 博客，请务必保留此出处http://studyofnet.blog.51cto.com/8142094/1439453

如何写jquery插件,布布扣,bubuko.com

如何写jquery插件

标签：jquery   jquery插件   

原文地址：http://studyofnet.blog.51cto.com/8142094/1439453