[关闭]
@wxf 2017-11-27T01:29:37.000000Z 字数 738 阅读 608

jQuery插件开发

前端


类级别的插件开发

类级别的插件开发就是给jQuery添加静态方法
· 添加新的全局函数
· 使用$.extend(obj)
· 使用命名空间

需求:写一个弹窗。针对于这个需求,下面使用三种方式实现一个弹窗插件。

直接给jQuery添加全局函数

实现:

  1. //插件代码
  2. $.myAlter = function(var){
  3. alert(var);
  4. }
  5. //调用
  6. $.myAlter("使用全局函数实现的弹窗");

用$.extend(obj)方法

实现:

  1. //插件代码
  2. $.extend({
  3. myAlter:function(var){
  4. alert(var);
  5. }
  6. });
  7. //调用
  8. $.myAlter("使用$.extend()方法实现的弹窗");

使用命名空间

  1. //插件代码
  2. $.wxf={
  3. myAlter:function(var){
  4. alert(var);
  5. }
  6. }
  7. //调用
  8. $.wxf.myAlter("使用命名空间实现的弹窗");

代码实例:设置div水平上下居中

  1. $.wxf={
  2. centerDiv:function(obj){
  3. obj.css({
  4. "top":($(window).height()-obj.height())/2,
  5. "left":($(window).height()-obj.height())/2,
  6. "position":"absolue"
  7. });
  8. return obj;
  9. }
  10. }

对象级别的插件开发

插件开发模板

  1. ;(function($){
  2. $.fn.plugin = function(options){
  3. var defaults={
  4. //各种参数,属性
  5. }
  6. var options = $.extend({}, defaults,options);
  7. this.each(function(){
  8. //实现功能的代码
  9. });
  10. }
  11. })(jQuery);
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注