选项卡应用

ziyuewang

浏览: 40112 次
性别:
来自: 济南

最近访客更多访客>>

gaokuitai

kingwell.leng

幽幽潭中叶

honlin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-04 ( 21)
更多存档...

博客分类：

JavaScript练习

jQuery Dojo YUI Ajax JavaScript


<!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>

查看图片附件

分享到：

右键小菜单练习---JavaScript | FAQ小应用 O(∩_∩)O哈哈~

2011-04-09 18:43
浏览 727
评论(0)
论坛回复 / 浏览 (0 / 1548)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

选项卡应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

选项卡应用

评论

发表评论

相关推荐

JavaScript实现的计算器（一种全新的继承方式，模拟多态，策略模式）

JavaScript实现继承---extend函数

JavaScript---Tooltip提示（很早以前写的）

JQuery遮罩层

简洁的表单验证器---FormValidator

短小简洁的ImageSlider

JavaScript模拟数据库curd(包含数据导入导出，操作日志)

自己写的XGrid O(∩_∩)O~

自己写的TagBOX---随机变换的字体颜色和大小

X-WebOS的界面雏形

右键小菜单练习---JavaScript

FAQ小应用 O(∩_∩)O哈哈~

自适应大小的MsgBox

短小快捷的EasyCombox (*^__^*) 嘻嘻……

写一个分页插件分享给大家---PageToolkit

基于JQuery写的Grid，大家多多指点

最近访客更多访客>>

短小快捷的EasyCombox (^__^) 嘻嘻……