巧用ui.tabs.js生成二级菜单

利用ui.tabs.js生成一级菜单，一般都很简单。

不过实际应用中，二级菜单更具备实用性，用ui.tabs.js达到目的也很简单。

以下示例在jquery1.3.2和jquery ui1.7.2中通过。

 

javascript导入如下：

<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" src="ui.core.js"></script>
<script language="javascript" src="ui.tabs.js"></script>

 

css导入如下：

<link type="text/css" href="css/ui.core.css" rel="stylesheet" />
<link type="text/css" href="css/ui.tabs.css" rel="stylesheet" />
<link type="text/css" href="css/ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/demos.css" rel="stylesheet" />

其中demos.css是jquery.ui下载包中示例的样式，里面包括字体的定义，可以用自己定义的。

 

一级菜单定义如下：

<div id="tabsEx1">
<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');" value="Add new tab">
<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);" value="Insert tab">
<input type="button" onclick="$('#tabsEx1 > ul').tabs('disable', 1);" value="Disable tab 2">
<input type="button" onclick="$('#tabsEx1 > ul').tabs('enable', 1);" value="Enable tab 2">
<input type="button" onclick="$('#tabsEx1 > ul').tabs('select', 2);" value="Select tab 3">
<br><br>
<ul style="height: 30px;">
<li><a href="#fragment-1">
<span>One</span></a>
</li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>

//这里正常情况是应该填入id分别为fragment-1、fragment-2、fragment-3的div
</div>

 

上面一级菜单定义缺少了内容模版格式的定义，我们在其中填入二级菜单内容定义：

 <div id="fragment-1" class="fragment">
 <ul style="height: 30px;">
 <li><a href="#fragment-content"><span>One-1</span></a></li>
 <li><a href="#fragment-content"><span>One-2</span></a></li>
 <li><a href="#fragment-content"><span>One-3</span></a></li>
 </ul>
 </div>
 <div id="fragment-2" class="fragment">
 <ul style="height: 30px;">
 <li><a href="#fragment-content"><span>Two-1</span></a></li>
 <li><a href="#fragment-content"><span>Two-2</span></a></li>
 <li><a href="#fragment-content"><span>Two-3</span></a></li>
 </ul>
 </div>
 <div id="fragment-3" class="fragment">
 <ul style="height: 30px;">
 <li><a href="#fragment-content"><span>Three-1</span></a></li>
 <li><a href="#fragment-content"><span>Three-2</span></a></li>
 <li><a href="#fragment-content"><span>Three-3</span></a></li>
 </ul>
  </div>

<div id="fragment-content"> <p>Three</p> </div>
可以看到，二级菜单的内容模版定义均为<div id="fragment-content">......</div>。

在实际应用中，菜单最终刷新的内容区域仅采用一个DIV定义来实现是最为方便的。

基于以上的HTML格式，我们还需要进行tabs定义。

 

$(function(){
 $("#tabsEx1").tabs({
  show:function(event,ui){
   var idx = ui.index;
   $("#fragment-"+(idx+1)).tabs("select",0);
  },
  //全部置为-1，是让一级菜单的初始化选择能触发show事件
  selected:-1
 });
 $(".fragment").tabs({
  select:function(event,ui){
   //这里最适合用来通过判断来显示DIV ID为fragment-content的内容
   $("#fragment-content").html("successfully load fragment content-"+$("#tabsEx1").tabs("option","selected")+":"+ui.index);
  },
  //全部置为-1，是让一级菜单的初始化触发show事件，其中的执行动作能够触发二级菜单的select事件
  selected:-1
 });
 $("#tabsEx1").tabs("select",0);
});

 

以上示例测试过，如果有什么问题，可以留言。