`
ziyuewang
  • 浏览: 40286 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

选项卡应用

jQueryDojoYUIAjaxJavaScript 
阅读更多 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
			.tab {
				padding : 0px ;
				margin : 0 auto ;
				margin-top : 50px ;
				width : 450px ;
				background : #fff ;
			}
			.tab ul {
				padding : 0px ;
				margin : 0px ;
				width : 450px ;
				list-style : none ;
			}
			.tab ul li {
				padding : 0px ;
				margin-left : 10px ;
				width : 80px ;
				height : 24px ;
				line-height : 24px ;
				font-size : 13px ;
				font-family : arial ;
				background : #eee ;
				font-weight : bold ;
				float : left ;
				text-align : center ;
				cursor : pointer ;
			}
			.tab .content {
				padding : 0px ;
				margin : 0px ;
				width : 450px ;
				clear : both ;
				border : 1px solid #000 ;
			}
			.tab .content div {
				padding-top : 14px ;
				padding-bottom : 16px ;
				padding-left : 10px ;
				padding-right : 10px ;
				margin : 0px ;
				width : 430px ;
				font-size : 13px ;
				font-family : arial ;
				color : #000 ;
				word-wrap : break-word ;
				line-height : 20px ;
				display : none ;
			}
			.highLight {
				color : #7D0000 ;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				Tab.load(".tab") ;
			}) ;
			var Tab = function(){
				function load(renderTo){
					var renderTo = renderTo ;
					$(renderTo).find("ul > li").each(function(i){
						$(this).click(function(){
							var jq = $(this).parent("ul") ;
							_thumb(jq,i) ;
						}) ;
					}) ;
					_setCurrent(renderTo) ;
				} ;
				function _thumb(jq,index){
					var jq_content = jq.next() ;
					jq_content = jq_content.find("div").hide() ;
					jq_content.eq(index).show() ;
					var jq_titles = jq.find("li") ;
					jq_titles = jq_titles.removeClass("highLight") ;
					jq_titles.eq(index).addClass("highLight") ;
				} ;
				function _setCurrent(renderTo){
					var jq_title = $(renderTo).find("ul") ;
					var jq_content = jq_title.next() ;
					jq_title.find("li").eq(2).addClass("highLight") ;
					jq_content.find("div").eq(2).show() ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>
	</head>
	
	<body>
		<div class="tab">
			<ul>
				<li>JQuery</li>
				<li>Prototype</li>
				<li>ExtJS</li>
				<li>Dojo</li>
				<li>Yahoo-YUI</li>
			</ul>
			<div class="content">
				<div>
					Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

				</div>
				<div>
					prototype.js是由Sam Stephenson写的一个javascript类库。这个构思奇妙！而且兼容标准的类库，能帮助你轻松建立有高度互动的web2.0特性的富客户端页面一些实用的函省这个类库带有很多预定义的对象和实用函数，这些东东的目的显然是把你从一些重复的打字中解放出来 。
				</div>
				<div>
					ExtJS是一种主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。 　　功能丰富，无人能出其右。 　　无论是界面之美，还是功能之强，ext的表格控件都高居榜首。 　　单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。 　　自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。 　　再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。 
				</div>
				<div>
					Dojo是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些，长期存在、历史问题。historicalproblemswithDHTML跨浏览器问题。
				</div>
				<div>
					YUI 是 Yahoo! User Interface 的缩写，这是由 Yahoo! 所开发出来的工具库，包含了多种程式工具、函数库和网页操作介面，能够更快速的开发互动性高、丰富的网站应用程式，尤其是那些使用到 DOM、DHTML 和 Ajax 的网页。YUI 全部都是使用 Javascript 写出来的（其中也包含了一些 CSS ），而且是公开给大家免费使用的 Open Source 软体。
				</div>
			</div>
		</div>
	</body>
</html>
  • 大小: 32.2 KB
分享到：
| FAQ小应用 O(∩_∩)O哈哈~
评论
发表评论

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

相关推荐

    matlab gui 选项卡应用

    "选项卡应用"是指在GUI界面上使用选项卡控件，让用户通过不同的选项卡来访问和操作不同的功能区域，使得界面更加清晰、操作更加方便。本篇将深入探讨如何在MATLAB中实现GUI的选项卡应用。 首先，`tabpanelcopydemo....

    一个图片文字混合排版的TAB选项卡应用.rar

    一个图片文字混合排版的TAB选项卡应用，在网页上实现标签切换的选项卡效果，基于JavaScript特效代码实现，不过本款选项卡的亮点是，在其内部不但可以布局LI列表，也可以图文混版，大大提高了TAB的实用性，在老外的...

    java实现选项卡

    Java 实现选项卡功能在软件开发中非常常见，特别是在GUI（图形用户界面）设计中，选项卡用于组织和展示多个视图或页面，使得用户可以在...结合事件监听器和其他高级特性，你可以实现更加动态和用户友好的选项卡应用。

    JavaScript排他算法实现选项卡的应用研究.pdf

    本文探讨了JavaScript排他算法在实现选项卡应用中的研究。JavaScript是一门轻量级解释性语言，广泛应用于Web应用开发，常用于为网页添加动态功能，以提供更流畅美观的浏览效果。选项卡是Web页面中常见的交互组件，...

    jQuery选项卡选项卡选项卡

    这种完整的例子对于开发者来说是非常有价值的，因为它提供了快速理解和应用jQuery选项卡功能的方式，同时也便于自定义和扩展。 总结一下，这个“jQuery选项卡”示例展示了如何使用jQuery轻松创建动态选项卡，包括...

    C#窗体中的Tab选项卡应用实例

    这也是一个非常实用、面向基础学者的一个窗体应用，在C#的窗体中布局一个Tab选项卡，大家都知道TAB现在很流行，不管是WEB设计或是Win Form编程，都使用很普遍，因此，想让你的应用软件操作更方便，提升人性体验，...

    多个选项卡

    在描述中提到的"实习多选项卡应用"可能指的是在实际项目中实现这一功能。这通常涉及到JavaScript和CSS的使用，这两种技术是构建动态和交互式网页的关键。JavaScript负责处理用户与选项卡的交互，如点击选项卡时切换...

    VB_仿360安全卫士Tab选项卡

    9. **代码组织**：对于复杂的Tab选项卡应用，可以考虑使用MVC（Model-View-Controller）或MVVM（Model-View-ViewModel）设计模式，将业务逻辑与界面展示分离，提高代码可维护性。 在www.NewXing.com提供的文件中，...

    选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡_

    标题“选项卡切换_labview选项卡切换_Labview界面切换_labview_labview选项卡”表明我们要讨论的是LabVIEW中的选项卡切换技术，这通常涉及到如何在LabVIEW程序中实现不同界面或工作空间之间的平滑过渡。 描述中提到...

    选项卡控件的应用

    本示例“选项卡控件的应用”是基于Visual Studio 2012这一老牌开发工具的实践案例，旨在帮助开发者理解和掌握如何在项目中有效利用选项卡控件。 Visual Studio 2012是微软提供的一个强大的集成开发环境（IDE），...

    neodym-apptemplate-tabs:具有基于Ionic选项卡应用程序模板的预配置Gruntfile的选项卡应用程序模板

    在这个模板中，开发者可以预期找到一个完整的 Ionic 选项卡应用结构，包括不同选项卡的 HTML、CSS 和 JavaScript 文件，以及通过 Grunt 自动化处理这些文件的流程。这使得开发者可以专注于编写业务逻辑，而无需过多...

    microsoft-teams-sample-todo:该示例显示了如何将现有的Web应用适应到Microsoft Teams的选项卡应用中

    page_type 描述产品语言扩展名样本这是一个示例[Microsoft Teams的选项卡应用程序]（ ）。 办公室团队办公室外观office-365 打字稿节点js 内容类型技术创建日期样本制表符2016/10/19下午12:06:51Microsoft Teams“ ...

    android选项卡demo

    在Android应用开发中，选项卡（Tab）是一种常见的用户界面元素，用于组织和展示多个相关的视图或内容区域。在本“android选项卡demo”中，开发者已经简单实现了选项卡的切换、颜色设置等基本功能。这个Demo主要涉及...

    android 选项卡功能完整的代码

    下面将详细讲解如何使用`TabHost`来创建一个功能完整的选项卡应用。 1. **TabHost介绍** `TabHost`是Android中的核心组件，用于创建选项卡式界面。它包括两个主要组件：`TabWidget`和`FrameLayout`。`TabWidget`...

    选项卡设计

    3. **VS2005中的选项卡应用** 在VS2005中，选项卡设计用于项目管理、代码编辑、调试等多个功能区。例如，代码编辑器中的“文件”选项卡允许用户在多个源代码文件之间轻松切换；“解决方案资源管理器”则使用选项卡...

    框架选项卡，框架选项卡

    在IT行业中，框架选项卡是一种常见的用户界面设计模式，它被广泛应用于网页和应用程序中，以帮助用户在多个视图或内容之间进行切换，而无需不断地打开和关闭新窗口。框架选项卡允许用户在一个单一的界面空间内组织和...

    Windows Form窗体应用的TabControl控件手动添加选项卡页面的C#代码

    在Windows Forms应用程序中，TabControl控件是一个非常常用的组件，它允许开发者将多个界面或功能集合成一个单一的视图，用户可以通过不同的选项卡在这些界面间切换。在本例程中，我们将深入探讨如何通过C#代码手动...

    Android高级应用源码-Android ViewPager Fragment实现选项卡.zip

    在选项卡应用中，每个选项卡通常对应一个Fragment，当用户在选项卡间切换时，ViewPager会加载相应的Fragment来显示内容。 1. **ViewPager的使用**： - 实现适配器：ViewPager需要一个适配器来提供页面数据，这个...

    选项卡的禁用

    在LabVIEW编程环境中，选项卡（Tab Control）是一种常见的用户界面元素，用于组织和展示多个相关的子VI或数据显示区域。本文将深入探讨如何在LabVIEW中禁用和启用选项卡，以及如何通过属性节点来操作这些功能，这对...

    labview通过程序动态修改选项卡名称

    在LabVIEW中，"选项卡"是一种常用的界面元素，它允许用户在不同的功能或数据集之间切换，类似于传统应用程序中的“窗口”或“标签页”。 在标题中提到的“labview通过程序动态修改选项卡名称”，这是一个高级的...

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