如何写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插件

上一篇:一个sql语句中用多个where


下一篇:HTML 基础 内联与块元素