首页 > 代码库 > tab 插件封装
tab 插件封装
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab 插件封装</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script><style>.tab{ width:98%;}.tab_menu ul{ width:98%; list-style:none;}.tab_menu li{ list-style:none; float:left; margin-right:4px; display:block; border-right:#4488BB solid 1px;border-left:#4488BB solid 1px; border-top:#4488BB solid 1px; cursor:pointer; color:#000; height:20px; width:auto; padding:5px;}.tab_box{ border:solid #4488BB 1px; padding:4px; height:auto; width:98%; float:left;}.tab_selected{ background:#4488BB;}.tab_displayNone{ display:none;}li{ background:#EEEEEE; list-style:none;}</style><script type="text/javascript" src="js/jquery.tab.js"></script></head><body><script type="text/javascript"> $(function() { $(".tab").XQHTab({tabWidth:‘500px‘,autoHeight:‘400px‘}); }); </script> <div class="tab"> <div class="tab_menu"> <ul> <li class="tab_selected">JQuery</li> <li>ExtJs</li> <li>Sliverlight</li> </ul> </div> <div class="tab_box"> <div>Hello JQuery!</div> <div class="tab_displayNone">Hello ExtJs!</div> <div class="tab_displayNone">Hello Sliverlight!</div> </div> </div></body></html>
jquery.tab.js：
(function($) { $.fn.extend({ //Tab插件名称 XQHTab: function(options) { //默认值 var defaults = { tabSelected: "tab_selected", tabWidth: "100%", autoHeight: "true" }; var options = $.extend(defaults, options); $(this).css("width", options.tabWidth); //选项卡 this指通过当前选择器获取的JQuery对象 var tab = $(".tab_menu ul li", this); //选项内容 var tabContent = $(".tab_box > div", this); if (options.autoHeight != "true") { tabContent.css("height", options.autoHeight); } //单击选项卡 tab.click(function() { $(this).addClass(options.tabSelected).siblings().removeClass(options.tabSelected); var curIndex = tab.index(this); tabContent.eq(curIndex).show().siblings().hide(); }); //return this使JQuery方法可链 return this; } });})(jQuery);
tab 插件封装
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。