`
niulanshan
  • 浏览: 565364 次
文章分类
社区版块
存档分类
最新评论

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


第三方TabNavigator-DoJo

分享到：
| 会“变身“的柱形图（FusionChart）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    flex TabNavigator tab倒置

    1. **TabNavigator组件**：TabNavigator是Flex中的一种容器，继承自Accordion类，用于组织和展示多个子组件，这些子组件可以通过可见的选项卡进行访问。默认情况下，选项卡位于组件的顶部，并水平排列。 2. **定制...

    flex3 tabnavigator一个很好的例子

    这个例子可能是为了展示如何在Flex3中有效地使用TabNavigator来组织和管理用户界面。 在Flex3中，TabNavigator组件是Container类的一个子类，允许用户通过点击不同选项卡来切换内容。它的主要特点包括自定义选项卡...

    Flex4.6 带图标的TabNavigator的使用

    在Flex4.6中，我们可以使用MXML或者ActionScript来创建和配置`TabNavigator`。 以下是一个简单的MXML代码示例，展示了如何创建一个带有图标的`TabNavigator`： ```xml xmlns:s="library://ns.adobe....

    Flex3 竖排TabNavigator

    在Flex3中，TabNavigator是一个容器组件，用于展示多个子组件，并通过标签页的形式进行切换。默认情况下，TabNavigator的标签页是水平排列的，但在这个特定的实例中，我们将讨论如何将TabNavigator的标签页设置为...

    Flex tabNavigator 的初级应用

    NULL 博文链接：https://zhangyinyou.iteye.com/blog/671128

    flex 和 flexlib类库 实现 菜单和 TabNavigator

    NULL 博文链接：https://toeo.iteye.com/blog/644341

    flex 遮盖式 TabNavigator

    - Flex Builder或Flash Builder：这些是开发Flex应用的主要IDE，提供了图形界面设计工具和源代码编辑器，帮助开发者创建和调试TabNavigator。 - CSS编辑：可能需要使用CSS来调整TabNavigator的样式，如边框、背景...

    Flex3 TabNavigator

    总结一下，这个示例展示了如何利用Flex3的组件扩展机制，通过创建自定义的`RichTabNavigator`、`RichTabBar`和`RichTab`类，实现TabNavigator的标签页可关闭功能。这种技术在需要灵活控制标签页行为的富互联网应用...

    Flex UI组件使用全集

    ### Flex UI组件使用全集详解 #### 概述 本文档是基于阿树对Adobe Flex UI组件库的全面整理，并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架，尤其适用于创建...

    Flex垂直button

    在本文中，我们将深入探讨如何在Flex环境中创建一个垂直排列的按钮（Flex Vertical Button）以及一个包含垂直标签的TabNavigator组件。Flex是一个基于ActionScript 3.0的开放源代码框架，用于构建富互联网应用程序...

    flex TabNavigatorTab 选项卡标题标签皮肤设置

    这是一个封装好的flex项目，可以直接运行，TestTabNavigator.mxml是运行主页。里面定义了TabNavigator控件选中与被选中的皮肤类，皮肤类可以自己进行更改，也可以设置颜色渐变等等。希望对大家有帮助。

    flex中文帮助.rar

    5. **Flex组件**：Flex包含一系列预定义的UI组件，如Button、Label、Canvas、Accordion、TabNavigator等，这些组件可以帮助快速构建用户界面。 6. **数据绑定**：Flex支持数据绑定，这意味着UI组件的状态可以直接与...

    很好的flex项目源码

    5. **数据绑定**：Flex中的数据绑定允许UI元素和数据模型之间的自动同步，简化了数据驱动的UI开发。 6. **事件处理**：学习如何在Flex中添加事件监听器和触发事件，以实现用户交互和应用程序逻辑。 7. **项目构建...

    刚学会Flex自己做的一个简单的聊天室

    - Flex框架：它是基于Apache OpenSource的Spark和MX组件集，提供了一套完整的UI组件库。 - MXML：这是一种声明式语言，用来定义Flex应用的用户界面布局和组件结构。 - ActionScript：Flex中的脚本语言，基于...

    Flex中实现多行tab的源代码

    默认情况下，Flex的TabNavigator组件的TabBar控件只会在一行内显示Tab项，但通过自定义布局和样式，我们可以轻松实现多行Tab的展示。本示例将详细讲解如何在Flex中创建多行Tab，并提供相关源代码。 首先，让我们...

    Flex4.0API中文手册完整版

    3. **Flex组件**：手册详细介绍了Spark和Halo组件集，包括Button、Label、TextInput等基本组件，以及Canvas、Accordion、TabNavigator等容器组件。理解这些组件的用法和交互模式对于构建用户界面至关重要。 4. **...

    flex的ppt（flex和java的整合及flex组件的应用共31章）

    第二到第五章可能深入到Flex组件库的使用，包括各种基本和高级组件，如Button、Label、TextInput、TextArea、List、Accordion、TabNavigator等。这些组件能够快速构建用户友好的交互界面。 第六至第十章可能会讲解...

    my flex example3

    4. **Flex组件库**：Flex提供了一系列预定义的UI组件，如Button、TextInput、Label、Accordion、TabNavigator等，这些组件可以帮助快速构建用户界面。 5. **数据绑定**：Flex支持数据绑定，允许视图组件和模型数据...

    设置TabNavigator组件的标签头的自定义皮肤

    在开发移动应用或者Web应用时，常常会使用到导航组件来组织不同的页面，其中TabNavigator是一种常见的导航方式，它在底部或顶部展示一系列标签，用户可以通过点击这些标签切换不同的页面。在React Native或React.js...

    FLEX3程序的皮肤集合

    1. **组件皮肤**：Flex3中的每个UI组件，如Button、Slider、TabNavigator等，都有预定义的皮肤。这些皮肤由MXML或ActionScript3代码定义，包含组件的各个部分，如背景、边框、文本样式等。通过替换这些皮肤，可以...

Magicbox
Global site tag (gtag.js) - Google Analytics