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

最新推荐文章于 2024-05-30 15:52:26 发布
最新推荐文章于 2024-05-30 15:52:26 发布
阅读量110 收藏
点赞数
文章标签： ui java 网络

第一方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

iteye_8264
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Dojo高级Web2.0 UI组件库---Dialog组件
张天疯的专栏
02-19 1670
 Dialog相对应于 HTML 的对话框，是一个模式对话框。用户能通过此 widget 上的关闭按钮关闭此对话框，同时也可以在此对话框上放置表单 widgets，并且可以在此对话框上直接提交表单。对话框包括两种，一种是普通的对话框，一种是提示窗口的对话框，用起来都很方便。Dialog的属性和方法如表8-17和8-18所示。表8-17 Dialog 的属性属性 描述duration 对象处
谈 Dojo 应用的 UI 自动化测试
Free355的博客
07-11 236
Dojo是一个流行的JavaScript框架，用于构建富客户端Web应用程序。在开发和维护Dojo应用时，UI自动化测试是至关重要的。它可以帮助测试人员验证应用的功能和用户界面，并确保其在不同浏览器和设备上的一致性。虽然本文探讨的主题是 Dojo 应用的 UI 自动化测试，但不少内容也适合其他的 Web 2.0 应用。希望读者朋友或多或少都能从中获益。
Dojo高级Web2.0 UI组件库---Tree组件
张天疯的专栏
02-19 1562
 Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode.而初始化树，打开树节需要的数据，是通过dojo.data.ItemFileReadStore来提供的。dojo.data提供了封装的标准的数据存取API，作为统一的数据访
Flex样式-TabNavigator篇
游海东的技术专栏
12-31 3106
TabNavigator { tabHeight: 31; tabWidth: 96; cornerRadius: 10; horizontalGap: -2; horizontalAlign: left; tabOffset: 2; textIndent: 2; backgroundAlpha: 0.77; backgroundColor:
Flex中TabNavigator隐藏和显示选项卡
游海东的技术专栏
10-28 3495
1、问题背景      遇到这样一个问题：有四个Tab选项卡，根据不同的参数隐藏和显示选项卡 2、实现实例 （1）隐藏“春季” protected function springClickHandler(event:MouseEvent):void { tabs.getTabAt(0).visible = false; tabs.getTabAt(0).includeInLay
flex 和 flexlib类库 实现 菜单和 TabNavigator
freewebsys的专栏
03-04 1890
看到 extjs 的 TabNavigator和漂亮. 很实用.   对于一个后台管理程序来说 可以同时操作多个 任务.   如果用 flex 做一个后台管理程序 是否可以实现同样的功能呢.   答案是是的.并且已经 测试成功. 功能一样. 代码更简单.   其实并不复杂 .   上网络上面搜索下了..找到了一篇关于 flexlib的 文章可以实现 带关闭 按钮 的 TabN
Flex中TabNavigator设置Tabs样式
游海东的技术专栏
11-10 2713
1、设计思路 （1）设计一个TabNavigator，其中包含两个Tabs； （2）设置Tabs样式 2、设计源码 Tabs.mxml： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:m
Flex TabNavigator Tab
qq 117791303
03-24 161
1. 可正确初始化TabNavigator Tab页子控件。 1）creationPolicy="auto" 2）creationComplete()函数添加以下代码： //----------------------------------------------------------- //初始化Tab页子控件 //----------------------------------------------------------- var chi.
Flex中TabNavigator设置Tabs样式思路及
10-25
主要介绍了Flex中TabNavigator如何设置Tabs样式有哪些思路，感兴趣的朋友可以看看下面的源码
Flex3 竖排TabNavigator
11-18
Flex3 排版为竖着的TabNavigator实例。
Flex3 TabNavigator
03-12
Flex3 TabNavigator 可关闭tab简单实现
flex TabNavigator tab倒置
11-30
flex TabNavigator tab倒置
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 359
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
Firebase Local Emulator Suite详解
最新发布
江上清风山间明月的博客
05-30 456
Firebase Local Emulator Suite 是一组本地服务，可以模拟 Firebase 平台的在线服务，帮助开发者在本地环境中开发和测试应用程序，而不必依赖实时的 Firebase 项目。以下是关于 Firebase Local Emulator Suite 的详细介绍及其使用方法。
Android USB调试模式下自动上下滑动（Go实现）
听我一言的博客
05-28 611
Golang实现通过ADB控制手机自动上下滑动
Compose第一弹 可组合函数+Text
joedan0104的专栏
05-29 1074
定义包含文本显示的MessageCard")可以看出，Compose的UI系统不再依赖XML布局，以及布局编辑器。
animate+tabBar
08-11
这个库提供了一个TabNavigator组件，它可以让您轻松地创建和切换不同的选项卡。 以下是一个使用react-navigation库创建带有选项卡的导航栏的示例代码： ```javascript import { createAppContainer } from 'react-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值