五大前端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>
选项卡应用
