首页 > 代码库 > jQuery 插件开发

jQuery 插件开发

 1. 直接给jQuery 添加全局函数(市面上基本上不用这种方式)

$.myAlert = function(){
  alert(‘我是通过调用插件弹出的警告框‘);
}

$.myAlert2 = function(str){
  alert(str);
}

2. 用extend()方法(市面上基本上不用这种方式)

$.extend({
  myAlert:function(){
    alert(‘我是通过调用插件弹出的警告框‘);
  },
  myAlert2:function(str){
    alert(str);
  }
})

3.使用命名空间(市面上基本上不用这种方式)


$.zxit = {
  myAlert:function(){
  alert(‘我是通过调用插件弹出的警告框‘);
},
  myAlert2:function(str){
    alert(str);
  }
}

 

// 输出到页面

$(function(){
  $.zxit.myAlert2(‘aaaa‘);
})

// 4. 类级插件开发(市面上基本上不用这种方式)


  var div = $(‘#div1‘);

  $.zxit = {

  centerDiv:function(obj){
    obj.css({
      ‘top‘:($(window).height()-div.height())/2,
      ‘left‘:($(window).width()-div.width())/2,
      ‘position‘:‘absolute‘
    });

    return obj; //注意:一定要返回,才能使用jQuery链式操作

    }
  }

$.zxit.centerDiv(div).css(‘background‘,‘red‘);

 

 推荐!!!!!.对象级插件开发(模板)

;(function($){

  $.fn.tab = function(options){

    //各种参数,各种属性
    var defaults = {

    }

    // 合并参数
    var options = $.extend(defaults, options);


  // 实现功能的代码
  this.each(function(){

  })

  // 返回this, 实现jQuery链式操作

  return this;
 }

})(jQuery);

注意: 参数后面是对象形式,不要直接赋值(‘=’),用分号隔开参数,小心犯错,参考下面代码。

 

================= .利用jQuery 对象级插件模板,开发tab插件 =================

;(function($){

$.fn.tab = function(options){

// 各种参数,各种属性
var defaults = {
  li_active : ‘active‘, // tab 标题
  item_active : ‘active‘, // tab 内容
  title_node :‘.title li‘, // tab 标题节点
  item_node :‘.cont .item‘, // tab 内容节点
  event_type : ‘mouseover‘ // tab 触发事件
}

// 合并options
options = $.extend(defaults, options);

// 实现功能代码
this.each(function(){
  var _this = $(this);
  _this.find(options.title_node).bind(options.event_type,function(){
    $(this).addClass(options.li_active).siblings().removeClass(options.li_active);
    _this.find(options.item_node).eq($(this).index()).addClass(options.item_active).siblings().removeClass(options.item_active);
  })

})

  // 返回this, 实现jQuery链式操作
  return this;

}

})(jQuery);

 

 

 

 

//输出到页面

$(‘.tab‘).tab({
  event_type:‘click‘
}).css(‘background‘,‘red‘);

 

jQuery 插件开发