嗷嗷答 - 嗷嗷好的公务员考试网络答题平台

简单的语义化jQuery选项卡

作者：不烦恼 发布时间：April 9, 2011 分类：快乐学习

选项卡是计划中CMS主题的一部分，本想直接用jquery现有的插件来实现选项卡效果，网上找了两天也没有找到合适的，主要原因是不符合我对选项卡html结构的要求，于是自己造了这个简单的语义化选项卡，侧边栏就是最终的效果。代码如下：
jQuery插件：（bufannaoTabs.js）

  1. ;(function($) {
  2. 	$.fn.bufannaoTabs = function(options){
  3. 		var defaults = {};
  4. 		var options = $.extend(defaults, options);
  5. 		this.each(function(i, d) {
  6. 			var current = 0;
  7. 			$('.tabs_item', d).hide();
  8. 			$('.tabs_control', d).each(function(ii, dd) {
  9. 				if(ii == current){
  10. 					$(dd).addClass("control_current");
  11. 					$(d).height($('.tabs_item:eq('+current+')', d).height() + $(dd).height());
  12. 					$('.tabs_item:eq('+current+')', d).show();
  13. 				}
  14.  
  15. 				$(dd).mouseover(function(){
  16. 					if(ii == current){
  17. 						return false;
  18. 					}
  19. 					$('.tabs_control:eq('+current+')', d).removeClass("control_current");
  20. 					$(this).addClass("control_current");
  21. 					$('.tabs_item:eq('+current+')', d).hide();
  22. 					$('.tabs_item:eq('+ii+')', d).show();
  23. 					$(d).height($('.tabs_item:eq('+ii+')', d).height() + $(this).height());
  24. 					current = ii;
  25. 				});
  26. 			});
  27. 		});
  28. 	};
  29. })(jQuery);

html调用：
  2. <!-- ……………… -->
  3. <script type="text/javascript" src="……/js/bufannaoTabs.js"></script>
  4. <script charset="utf-8" type="text/javascript">
  5. $(function(){	
  6. 	$(".bufannaotabs").bufannaoTabs({});
  7. });
  9. <!-- ……………… -->
  10. </head>
  11.  
  13. <!-- ……………… -->
  14. <div class="bufannaotabs">
  15. <h3 class="tabs_control">……</h3>
  16. <ul class="tabs_item">
  17. ……
  18. </ul>
  19. <h3 class="tabs_control">……</h3>
  20. <p class="tabs_item">……</p>
  21. </div>
  22. <!-- ……………… -->
  23. </body>

CSS示例：
  1. .bufannaotabs { position:relative; margin:0 0 20px 20px; padding:0; clear:both; zoom:1;}
  2. .bufannaotabs .tabs_control {display:block-inline; float:left; margin-right:-1px; padding:0 15px; height:30px; line-height:30px; font-weight:normal; text-align:center; cursor:pointer; font-size:16px; border:1px solid #eeeeee; }
  3. .bufannaotabs .control_current {background:#f4f4f4;}
  4. .bufannaotabs .tabs_item {position:absolute;  left:0; top:31px;  padding-top:5px; border-top:1px solid #eeeeee; display:none; width:100%; overflow:hidden; }

已有 5 条评论 »

  1. mybg mybg
    April 11th, 2011 at 10:56 am

    随机文章 最新文章
    热评文章 推荐文章
    最新评论 最新留言
    热门话题 访客足迹

    已初具cms的功能了，不错，不过模板得也需要找个cms的来做吧？

    1. 不烦恼 不烦恼
      April 11th, 2011 at 11:25 am

      还有幻灯文章、相册文章等功能，有的功能目前没展示出来。
      CMS的各种功能大多都可以实现了，下一步就是要弄个CMS的模板了（这部分是最不愿意做的，有好的推荐一个，我先直接扒下来）

      1. mybg mybg
        April 11th, 2011 at 11:50 am

        好多功能啊，强！！
        http://wpued.com/
        这个如何？模板还是得看自己的喜好来定。

        回复
      回复
    回复
  2. 冰剑 冰剑
    April 10th, 2011 at 09:56 am

    同上。。
    留下印记，哈哈。

    回复
  3. mybg mybg
    April 10th, 2011 at 12:53 am

    抢沙发，目前我还没有用tab的需要。以后或许用得上。

    回复

添加新评论 »