三方TabNavigator“斗艳”（Flex、JQuery UI和DoJo）
第一方TabNavigator-Flex
1、新建Flex项目，并在src中新建应用程序TabNavigator.mxml
TabNavigator.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.gridhead{
background-color:#CCCCCC;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//教师信息数据绑定
private var teacherArray:ArrayCollection = new ArrayCollection([
{tno:"2013010101",tname:"张三丰",tage:"32",tsex:"男"},
{tno:"2013010102",tname:"李晓雪",tage:"35",tsex:"女"},
{tno:"2013010103",tname:"赵华强",tage:"42",tsex:"男"},
{tno:"2013010104",tname:"刘三姐",tage:"26",tsex:"女"},
{tno:"2013010105",tname:"魏忠贤",tage:"43",tsex:"男"},
{tno:"2013010106",tname:"士方琼",tage:"32",tsex:"女"},
{tno:"2013010107",tname:"贾世道",tage:"29",tsex:"男"},
{tno:"2013010108",tname:"茅桂花",tage:"35",tsex:"女"},
{tno:"2013010109",tname:"诸葛流云",tage:"45",tsex:"男"},
{tno:"2013010110",tname:"紫琼瑶",tage:"36",tsex:"女"}
]);
[Bindable]
//学生信息数据绑定
private var studentArray:ArrayCollection = new ArrayCollection([
{sno:"2013020101",sname:"刘晓华",sage:"21",ssex:"女"},
{sno:"2013020102",sname:"吴晓",sage:"20",ssex:"男"},
{sno:"2013020103",sname:"孙华闻",sage:"25",ssex:"男"},
{sno:"2013020104",sname:"鲁直花",sage:"21",ssex:"女"},
{sno:"2013020105",sname:"方世玉",sage:"18",ssex:"男"},
{sno:"2013020106",sname:"李明",sage:"23",ssex:"女"},
{sno:"2013020107",sname:"质料",sage:"21",ssex:"女"},
{sno:"2013020108",sname:"芦花生",sage:"22",ssex:"男"},
{sno:"2013020109",sname:"之子满",sage:"20",ssex:"女"},
{sno:"2013020110",sname:"东方虹",sage:"22",ssex:"男"}
]);
[Bindable]
//课程信息数据绑定
private var classArray:ArrayCollection = new ArrayCollection([
{cno:"2013030101",cname:"高等数学",cnum:"32",cteacher:"刘三姐"},
{cno:"2013030102",cname:"英语",cnum:"32",cteacher:"李晓雪"},
{cno:"2013030103",cname:"计算机导论",cnum:"23",cteacher:"赵华强"},
{cno:"2013030104",cname:"计算机网络",cnum:"20",cteacher:"魏忠贤"},
{cno:"2013030105",cname:"Android",cnum:"18",cteacher:"茅桂花"},
{cno:"2013030106",cname:"HTML",cnum:"10",cteacher:"诸葛流云"},
{cno:"2013030107",cname:"Java",cnum:"30",cteacher:"紫琼瑶"},
{cno:"2013030108",cname:"C++",cnum:"24",cteacher:"贾世道"},
{cno:"2013030109",cname:"历史纲要",cnum:"10",cteacher:"士方琼"},
{cno:"2013030110",cname:"马克思",cnum:"12",cteacher:"张三丰"}
]);
]]>
</fx:Script>
<mx:TabNavigator width="80%" height="80%" paddingTop="10" paddingLeft="10">
<s:NavigatorContent label="教师信息表" width="100%" height="100%">
<mx:DataGrid dataProvider="{teacherArray}" width="99%" height="99%" headerStyleName="gridhead" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5" verticalAlign="middle" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="教师编号" dataField="tno"/>
<mx:DataGridColumn headerText="教师姓名" dataField="tname"/>
<mx:DataGridColumn headerText="教师年龄" dataField="tage"/>
<mx:DataGridColumn headerText="教师性别" dataField="tsex"/>
</mx:columns>
</mx:DataGrid>
</s:NavigatorContent>
<s:NavigatorContent label="学生信息表" width="100%" height="100%">
<mx:DataGrid dataProvider="{studentArray}" width="99%" height="99%" headerStyleName="gridhead" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5" verticalAlign="middle" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="学生编号" dataField="sno"/>
<mx:DataGridColumn headerText="学生姓名" dataField="sname"/>
<mx:DataGridColumn headerText="学生年龄" dataField="sage"/>
<mx:DataGridColumn headerText="学生性别" dataField="ssex"/>
</mx:columns>
</mx:DataGrid>
</s:NavigatorContent>
<s:NavigatorContent label="课程信息表" width="100%" height="100%">
<mx:DataGrid dataProvider="{classArray}" width="99%" height="99%" headerStyleName="gridhead" paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5" verticalAlign="middle" textAlign="center">
<mx:columns>
<mx:DataGridColumn headerText="课程编号" dataField="cno"/>
<mx:DataGridColumn headerText="课程名称" dataField="cname"/>
<mx:DataGridColumn headerText="课程数目" dataField="cnum"/>
<mx:DataGridColumn headerText="教授教师" dataField="cteacher"/>
</mx:columns>
</mx:DataGrid>
</s:NavigatorContent>
</mx:TabNavigator>
</s:Application>
2、结果如下图：
（1）教师信息表
（2）学生信息表
（3）课程信息表
第二方TabNavigator-JQuery UI
1、源码如下
tabs.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../style/jquery.ui.all.css">
<script src="../scripts/jquery-1.10.2.js"></script>
<script src="../scripts/jquery.ui.core.js"></script>
<script src="../scripts/jquery.ui.widget.js"></script>
<script src="../scripts/jquery.ui.tabs.js"></script>
<link rel="stylesheet" href="../style/demos.css">
<style type="text/css">
table {
width: 100%;
height: 500px;
font-size: 16px;
border: 1px solid #000;
}
table tr th{
background-color: #CCCCCC;
border: 1px solid #000;
}
table tr td{
text-align: center;
border-left: 1px solid #000;
}
.tr_odd{
background-color: #FFFFFF;
}
.tr_even{
background-color: #B9DAFA;
}
</style>
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
$("table tr:odd").addClass("tr_odd");
$("table tr:even").addClass("tr_even");
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1" style="font-size: 14px; font-weight: bold;">教师信息表</a></li>
<li><a href="#tabs-2" style="font-size: 14px; font-weight: bold;">学生信息表</a></li>
<li><a href="#tabs-3" style="font-size: 14px; font-weight: bold;">课程信息表</a></li>
</ul>
<div id="tabs-1">
<table cellpadding="0" cellspacing="0">
<tr>
<th>教师编号</th>
<th>教师姓名</th>
<th>教师年龄</th>
<th>教师性别</th>
</tr>
<tr>
<td>2013010101</td>
<td>张三丰</td>
<td>32</td>
<td>男</td>
</tr>
<tr>
<td>2013010102</td>
<td>李晓雪</td>
<td>35</td>
<td>女</td>
</tr>
<tr>
<td>2013010103</td>
<td>赵华强</td>
<td>42</td>
<td>男</td>
</tr>
<tr>
<td>2013010104</td>
<td>刘三姐</td>
<td>26</td>
<td>女</td>
</tr>
<tr>
<td>2013010105</td>
<td>魏忠贤</td>
<td>43</td>
<td>男</td>
</tr>
<tr>
<td>2013010106</td>
<td>士方琼</td>
<td>32</td>
<td>女</td>
</tr>
<tr>
<td>2013010107</td>
<td>贾世道</td>
<td>29</td>
<td>男</td>
</tr>
<tr>
<td>2013010108</td>
<td>茅桂花</td>
<td>35</td>
<td>女</td>
</tr>
<tr>
<td>2013010109</td>
<td>诸葛流云</td>
<td>45</td>
<td>男</td>
</tr>
<tr>
<td>2013010110</td>
<td>紫琼瑶</td>
<td>36</td>
<td>女</td>
</tr>
</table>
</div>
<div id="tabs-2">
<table cellpadding="0" cellspacing="0">
<tr>
<th>学生编号</th>
<th>学生姓名</th>
<th>学生年龄</th>
<th>学生性别</th>
</tr>
<tr>
<td>2013020101</td>
<td>刘晓华</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>2013020102</td>
<td>吴晓</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>2013020103</td>
<td>孙华闻</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>2013020104</td>
<td>鲁直花</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>2013020105</td>
<td>方世玉</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2013020106</td>
<td>李明</td>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>2013020107</td>
<td>质料</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>2013020108</td>
<td>芦花生</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>2013020109</td>
<td>之子满</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>2013020110</td>
<td>东方虹</td>
<td>22</td>
<td>男</td>
</tr>
</table>
</div>
<div id="tabs-3">
<table cellpadding="0" cellspacing="0">
<tr>
<th>课程编号</th>
<th>课程名称</th>
<th>课程数目</th>
<th>教授教师</th>
</tr>
<tr>
<td>2013030101</td>
<td>高等数学</td>
<td>32</td>
<td>刘三姐</td>
</tr>
<tr>
<td>2013030102</td>
<td>英语</td>
<td>32</td>
<td>李晓雪</td>
</tr>
<tr>
<td>2013030103</td>
<td>计算机导论</td>
<td>23</td>
<td>赵华强</td>
</tr>
<tr>
<td>2013030104</td>
<td>计算机网络</td>
<td>20</td>
<td>魏忠贤</td>
</tr>
<tr>
<td>2013030105</td>
<td>Android</td>
<td>18</td>
<td>茅桂花</td>
</tr>
<tr>
<td>2013030106</td>
<td>HTML</td>
<td>10</td>
<td>诸葛流云</td>
</tr>
<tr>
<td>2013030107</td>
<td>Java</td>
<td>30</td>
<td>紫琼瑶</td>
</tr>
<tr>
<td>2013030108</td>
<td>C++</td>
<td>24</td>
<td>贾世道</td>
</tr>
<tr>
<td>2013030109</td>
<td>历史纲要</td>
<td>10</td>
<td>士方琼</td>
</tr>
<tr>
<td>2013030110</td>
<td>马克思</td>
<td>12</td>
<td>张三丰</td>
</tr>
</table>
</div>
</div>
</body>
</html>
2、结果显示
（1）教师信息表
（2）学生信息表
（3）课程信息表
