jquery插件编写【基本格式】

jquery插件基本格式:

/**
* @authors shimily (shimilywell@126.com)
* @date    2015-03-05 15:30:51
* @version 
*/

;(function($){

    /**
     *tab切换
     */

    $.fn.demo=function(options){

        var defaults={
            //各种属性:属性值            
        }

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

        this.each(function(){
            //各种执行语句
        });

        return this;  //方便链式操作
    };


    /**
     *提交数据
     */

})(jQuery);

插件执行方法:

    $(document).demo({
        data:{name:"shimily",age:"24",s_class:"09级网络技术一班"},
        eventType:"click"
    });
    

    $(document).ajaxFn();

 

比较全的插件编写例子:

;(function($){

    /**
     * 居中对齐的div
     */

    $.fn.demo=function(options){

        var defaults={
            btn:$(".btn"),
            obj:$(".box"),
            data:{name:"Tom",age:"22",s_class:"三年级一班"},
            eventType:"mouseover",
            addClass:"border"
        }

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

        this.each(function(){

            options.obj.css({

                "top":($(window).height()-options.obj.height())/2,

                "left":($(window).width()-options.obj.height())/2,

                "position":"absolute"

            });

            options.btn.bind(options.eventType,function(){

                $(".line").toggleClass(options.addClass);

                $(".line").html("姓名:"+options.data.name+"<br>年龄:"+options.data.age+"<br>班级:"+options.data.s_class);

            });


        });

        return this;

    };


    /**
     *ajax获取data数据
     */

     $.fn.ajaxFn=function(list){

         var defaults={

             btn:$(".link"),

             obj:$(".content"),

             addClass:"blue",

             eventType:"click"

         };

         var lists=$.extend(defaults,list);

         this.each(function(){

             lists.btn.bind(lists.eventType,function(){

                    $.ajax({
                           type: "POST",
                           url: "data/1.html",
                           //data: "name=John&location=Boston",
                           dataType:"json",
                           success: function(msg){
                           
                                   var data=msg.data,

                                       str = '';

                                   for(var i = 0; i < data.length; i++){

                                     str +='<li>'+'姓名:'+data[i].name+'  年龄:'+data[i].age+'班级:'+data[i].banji+'</li>';
                                }

                                lists.obj.html('<ul>'+str+'</ul>');
                           }
                        });

             });


         });

         return this;

     };


})(jQuery);

 

posted @ 2015-03-17 21:30  Shimily  阅读(196)  评论(0)    收藏  举报