jQuery 插件开发

Posted 2020-09-30

 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‘);