学习jquery选项卡插件
2012-05-15 10:57
232 查看
(function($){
$.fn.tabPlugins=function(options){
var seting={
event:"mouseover", //事件
LiClass:"liclass", //li的样式设置
HideClass:"hideclass"//切换隐藏内容
};
options=$.extend(seting,options);
var seft=$(this),
tabBox=seft.children("div.tab_box").children("div"),
menu=seft.children("ul.tab_menu"),
items=menu.find("li");
var tabHands=function(elem){
elem.siblings('li').removeClass(options.LiClass).end().addClass(options.LiClass);
tabBox.siblings('div').addClass(options.HideClass).end().eq(elem.index()).removeClass(options.HideClass);
},
delay=function(elem,time){
time?setTimeout(function(){tabHands(elem);},time):tabHands(elem); //时间的设置
};
items.bind(options.event,function(){
delay( $(this) );
});
}
})(jQuery);
$(function(){
/*例如<div class="demo1">
<ul class="tab_menu">
<li class="current"></li>
<li></li>
<li></li>
</ul>
<div class="tab_box">
<div class="hide"></div>
<div class="hide"></div>
<div class="hide"></div>
</div>
</div>*/
$('.demo1').tabPlugins({event:'click',LiClass:'current',HideClass:'hide'});
})
$.fn.tabPlugins=function(options){
var seting={
event:"mouseover", //事件
LiClass:"liclass", //li的样式设置
HideClass:"hideclass"//切换隐藏内容
};
options=$.extend(seting,options);
var seft=$(this),
tabBox=seft.children("div.tab_box").children("div"),
menu=seft.children("ul.tab_menu"),
items=menu.find("li");
var tabHands=function(elem){
elem.siblings('li').removeClass(options.LiClass).end().addClass(options.LiClass);
tabBox.siblings('div').addClass(options.HideClass).end().eq(elem.index()).removeClass(options.HideClass);
},
delay=function(elem,time){
time?setTimeout(function(){tabHands(elem);},time):tabHands(elem); //时间的设置
};
items.bind(options.event,function(){
delay( $(this) );
});
}
})(jQuery);
$(function(){
/*例如<div class="demo1">
<ul class="tab_menu">
<li class="current"></li>
<li></li>
<li></li>
</ul>
<div class="tab_box">
<div class="hide"></div>
<div class="hide"></div>
<div class="hide"></div>
</div>
</div>*/
$('.demo1').tabPlugins({event:'click',LiClass:'current',HideClass:'hide'});
})
相关文章推荐
- jQuery插件学习之选项卡Tab
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- JQUERY插件学习之jQuery UI
- jquery插件开发学习笔记(七)——页面平滑滚动改进
- jquery的ui插件,ajax学习和使用
- 20151225jquery学习笔记---选项卡UI
- 遮罩输入插件jquery.maskedinput.js学习
- 学习--jquery 自定义插件 页面按照模块 垂直滚动
- 轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
- jQuery的表格插件datatables学习总结
- 基于jQuery简单实用的Tabs选项卡插件
- 学习写了一个点击按钮倒计时的jquery小插件
- jquery-uploadifyv3.2.1 文件上传插件 学习
- 7月3日 学习仿腾讯游戏首页小幻灯片jquery插件
- jquery插件学习1
- 一个简单的jQuery插件制作,学习过程及实例
- jQuery框架学习第十一天:实战jQuery表单验证及jQuery自动完成提示插件
- JQuery插件学习之--ajaxfileupload
- JQUERY插件学习之jQuery UI
- JQuery学习使用笔记 -- JQuery插件开发