jQuery 封装function
// JavaScript Document
(function($){
/*drop menu packaging*/
$.fn.dropmenu = function(options){
var defaults = {
contanier: '',
itemsCss: ''
}
var options = $.extend(defaults,options);
this.each(function(){
var obj = $(this);
var objspan = obj.children('li').children('span');
/*objspan.each(function(index){
var self = $(this);
self.bind('click',function(evt){
if(self.next('ul').size() != 0 ){
var selfParentSilbings = self.parent().siblings();
self.toggleClass(options.itemsCss,'');
self.next().toggle(200);
selfParentSilbings.children('span').removeClass(options.itemsCss);
selfParentSilbings.children('ul').hide();
}
});
});*/
objspan.click(function(){
var self = $(this);
if(self.next('ul').size() != 0 ){
var selfParentSilbings = self.parent().siblings()
self.toggleClass(options.itemsCss,'');
self.next().toggle(200);
selfParentSilbings.children('span').removeClass(options.itemsCss);
selfParentSilbings.children('ul').hide();
}
});
});
}
$('.tb_space tr:even').addClass('even'); //give table tr:even add style
})(jQuery);
//html document
<ul class="navigation">
<li><span class="current"><a href="javascript:void(0);" title="Geographic Settings">Geographic Settings</a></span>
<ul style="display:block">
<li><a href="countryList.html" title="Countries">Countries</a></li>
<li><a href="setState.html" title="">setState</a></li>
</ul>
</li>
<li><span><a href="javascript:void(0);" title="Manage City Profiles">Manage City Profiles</a></span>
<ul>
<li><a href="#" title="Countries">Countries</a></li>
<li><a href="#" title="">Countries</a></li>
</ul>
</li>
<li><span><a href="javascript:void(0);" title="Manage Genre Profiles">Manage Genre Profiles</a></span>
</li>
</ul>
//css style
.navigation li span,.navigation li li a{width:150px;margin:0 0 2px;padding:2px 14px 2px 26px;}
.navigation li span{font-size:1.4em;display:block;line-height:22px;color:#333;background:#fff url(../../images/a_i/a_bg.png) no-repeat -1px -28px;}
.navigation li span a:link,.navigation li span a:visited{color:#333;text-decoration:none;line-height:22px;}
.navigation li .current{background-position:-1px 0;}
.navigation li ul{display:none;}
.navigation li li a{display:block;font-size:1.2em;height:1.6em;line-height:1.6em;color:#666;text-decoration:none;background:#fff url(../../images/a_i/a_bg.png) no-repeat 0 -81px;}
.navigation li li a:hover,.navigation li li .current{background-position:0 -56px;color:#333;}
写法2
/**
* @jQuery Active
* @Create 03/26/1011
* @Use function $('#box').funname({item1:'', item2:''});
*/
(function($){
$.FunName = function ($ele, options){
this.options = options;
alert(this.options.item1);
}
$.fn.funname = function(options){
if (typeof options === 'string') {
options = {
url: options
};
}
var o = $.extend({},$.fn.funname.defaults,options);
this.each(function(){
$this = $(this);
var FN = new $.FunName($this, o);
$this.data('funname', FN);
});//元素操作
}
$.fn.funname.defaults = {
item1: '',
item2: ''
};//设置传参
})(jQuery);
/*
跟第二种一样
*/
(function($){
var a = {
duration: 500,
play: false,
nextPage: "",
prePage: "",
};
function b(d,e){
this.options = $.extend({}, a, e);
this.init(d);
}
$.extend(b.prototype, {
init: function(d){
console.log(this.options.duration);
},
play: function(){
},
next: function(){
}
});
//return b;
$.fn.slideshow = function(arg){
var self = $(this)
return new b(self,arg);
}
})(jQuery);
$('.mod-slide').slideshow({});