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