第一方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）课程信息表

第三方TabNavigator-DoJo

三方TabNavigator“斗艳”（Flex、JQuery UI和DoJo）相关推荐

Dijit、ExtJS、jQuery UI 异同浅析
钟思奇是 IBM CDL 的一名软件工程师,主要从事 Dojo 控件库及基于 J2EE 的项目开发,热衷于学习各类新技术. 王修文, 软件工程师, Sungard 王修文是 Sungard SGT ...
使用Asp.net MVC, Jquery, Jquery UI构建基于Ajax的RIA应用.(更新Demo下载)
前天初学Asp.net MVC,发现有些东西用Web Form来做的确会比较方便. 但Asp.net MVC也有它的优点. 它如果跟Jquery和Jquery UI结合起来做基于Ajax的应用实在是太 ...
jQuery UI vs Kendo UI jQuery Mobile vs Kendo UI Mobile
jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...
jQuery Tools：Web开发必备的 jQuery UI 库
基本介绍 jQuery Tools 是基于 jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡).Tooltip(信息提示).Overlay(遮罩.弹窗).Scrollable(滚动控制 ...
学习 jQuery UI
jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序 ...
《jQuery UI 开发指南》——1.3　什么是CSS主题
本节书摘来自异步社区<jQuery UI开发指南>一书中的第1章,第1.3节,作者:[美]Eric Sarrion 译者:罗晴明 ,包勇明更多章节内容可以访问云栖社区"异步社区& ...
JQuery UI库 - Dialog
在网站中我们经常会做一些好看的Popup Dialog,我们前面曾经讲过用JQuery的Importo插件来做自定义的AlertBox. 其实,我们可以利用JQuery官方提供的UI库来做. 而且, ...
rails2.3.5 添加jquery ui 找不到images
为什么80%的码农都做不了架构师?>>> 要维护老版本的rails,添加jquery ui 的时候,images放在sytlesheets下是找不到的,所以把文件放到publi ...
一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览源码下载实现的代码. html代码: & ...
jQuery UI 1.10.1 发布
jQuery UI 发布了 1.10 的首个维护版本,该版本修复了 Accordion, Autocomplete, Datepicker, Dialog, Menu, Slider, Draggab ...

三方TabNavigator“斗艳”（Flex、JQuery UI和DoJo）

第一方TabNavigator-Flex

1、新建Flex项目，并在src中新建应用程序TabNavigator.mxml

2、结果如下图：

第二方TabNavigator-JQuery UI

1、源码如下

2、结果显示

第三方TabNavigator-DoJo

三方TabNavigator“斗艳”（Flex、JQuery UI和DoJo）相关推荐

最新文章

热门文章