zoukankan      html  css  js  c++  java
  • jquery插件学习(五)

    这节封装插件了,进展怎么样呢?

    一般对外发布的插件都应该进行封装,封装的插件还应该符合规范,只有这样写的插件才具有推广价值,并得到其他用户的喜爱。

    首先第一步,是定义一个独立域,代码如下所示。

    (function($){
        //自定义插件代码
    })(jQuery)   //封装插件

    确定创建插件类型,选择创建方式,例如,创建一个设置元素字体颜色的插件,则应该创建jquery对象方法,考虑到jquery提供了插件扩展方法extend(),调用该方法会更为规范。

    (function($){
        //自定义插件代码
        $.extend($.fn,{  //jquery对象扩展方法
            
        })
    })(jQuery)   //封装插件

    一般插件都会接受参数,用来控制插件的 行为,例如,对于设置颜色的插件,应该允许用户设置字体颜色,同时,应该考虑如果用户没有设置颜色,则应该保持默认色进行设置。

    (function($){
        //自定义插件代码
        $.extend($.fn,{ 
            color : function(options){
                   var options = $.extend({bcolor :"white",fcolor:"black"},options);
                   //
            }
        })
    })(jQuery)   //封装插件

    最后完善插件

    ;(function($){
        $.extend($.fn,{
            color : function(options){var options = $.extend({bcolor :"white",fcolor :"black"},options);
                //函数体
                return this.each(function(){
                    $(this).css("color",options.bcolor);    
                    $(this).css("background",options.fcolor);
                });
            }//color==end
        })
    })(jQuery);

    调用看看

    $("h1").color({bcolor : "#ccc",fcolor:"#eee"});
    $('a').color("#fff");
  • 相关阅读:
    【自学php】第三天
    【自学php】第二天
    【自学php】第一天-macbook上配置php
    js数值转换
    js题
    【练习】响应式布局
    6.数据查询
    5.删除数据
    4.更新数据
    3.插入数据
  • 原文地址:https://www.cnblogs.com/jine/p/2623593.html
Copyright © 2011-2022 走看看