`
sealbird
  • 浏览: 571519 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

网址收集

阅读更多
<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>15 个 JavaScript Web UI 库 - CSDN资讯</title>
<meta name="description" content="几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面。本文介绍.." />
<meta name="keywords" content="JavaScript,UI" />
<link rel="stylesheet" href="http://news.csdn.net/a/v3/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://csdnimg.cn/www/css/csdn_pubstylelib.css" type="text/css" media="all" />
<script type="text/javascript" src="http://www.csdn.net/ggmm/csdn_ggmm.js"></script>
<script type="text/javascript" src="http://news.csdn.net/script/blank.js"></script>
<script type="text/javascript" src="http://news.csdn.net/js/jquery.js"></script>
<script type="text/javascript" src="http://news.csdn.net/js/review.js"></script>
</head>
<body>
<div class="utm_wrap">
  <div class="utm_cont">
    <script src="http://csdnimg.cn/pubnav/js/pub_topnav.js" type="text/javascript" ></script>

<div class="banner" id="tlbanner">
<div class="adleft" style="float:left;"><script language="JavaScript" type="text/javascript">show_ads_zone(82);</script></div>
<div class="adright" style="float:right;"><script language="JavaScript" type="text/javascript">show_ads_zone(10);</script></div>
</div>

<div class="navigation">
<p><a href="http://news.csdn.net/"><img src="http://news.csdn.net/a/v3/images/csdn_logo.gif" alt="资讯频道" /></a>您的位置:<a href="http://www.csdn.net/">CSDN 首页</a> &gt; <a href="http://news.csdn.net/">资讯频道</a> &gt; 正文</p>
</div>

<div class="contentarea">
<div class="blkleft">
<a href="http://tag.csdn.net//" title="" style="float:right;margin:20px 6px;"><img src="http://tougao.csdn.net/tagimg/0.gif" alt="" onerror="this.src='http://tougao.csdn.net/tagimg/blank.gif';" /></a>
<h1>15 个 JavaScript Web UI 库</h1>
<div class="artInfo">
<p class="blueline">
<span>2010-05-19 07:31</span>&nbsp;|&nbsp;
<span><script language="javascript" src="http://tougao.csdn.net/count.php?id=218442"></script>次阅读</span>&nbsp;|&nbsp;
【已有<font id="remark_count1" class="cmtcount" style="font-size:12px;color:#c00;">0</font>条评论】<a href="#postcomment" target="_self">发表评论</a>
</p>
<p class="blackline">
<span><span>感谢<a href="http://hi.csdn.net/comsharp">comsharp</a>的提供</span>&nbsp;|&nbsp;
<span><cite><a href="JavaScript:d=document;t=d.selection?(d.selection.type!='None'?d.selection.createRange().text:''):(d.getSelection?d.getSelection():'');void(saveit=window.open('http://wz.csdn.net/storeit.aspx?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t),'saveit','scrollbars=no,width=590,height=300,left=75,top=20,status=no,resizable=yes'));saveit.focus();" class="fav_csdnstylebykimi" title="收藏到我的网摘中,并分享给我的朋友">收藏这篇资讯</a></cite></span>
</p>
</div>
<div class="clear"></div>
<div class="blkCont">
<p>几乎所有的富 Web 应用都基于一个或多个 Web UI 库或框架,这些 UI 库与框架极大地简化了开发进程,并带来一致,可靠,以及高度交互性的用户界面。本文介绍了 15 个非常强大的 JavaScript Web UI 库,非常适合各种各种规模的富 Web 应用的开发。</p>
<h2 class="subtitle">LivePipe</h2>
<p><a href="http://livepipe.net/">LivePipe UI</a> 基于 <a href="http://www.prototypejs.org/">Prototype Javascript 框架</a>,包含了一整套经严格测试并高度可扩展的 UI 控件,拥有很好的文档,在不支持 JavaScript 的环境中,可以无缝降级使用。包括 Tab, 窗体,文本框,多选框,评分控件,进度条,滚动条,右键菜单等多种控件。</p>
<p><a href="http://livepipe.net/"><strong>LivePipe</strong> 首页与下载</a><br /><a href="http://livepipe.net/control#rating"><strong>LivePipe</strong> 演示与示例</a></p>
<p><a href="http://livepipe.net/control#rating"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_02.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">UKI</h2>
<p><a href="http://ukijs.org/"></a></p>
<p><a href="http://ukijs.org/">UKI</a> 是一套简单的 JavaScript UI 工具集,用于快速创建桌面风格的 Web 应用。包含的控件从滑动条,到分栏视图,不一而足。熟悉 <a href="http://jquery.com/">jQuery</a> 的开发者会发现这个工具很容易上手,非常简洁,无需安装框架,不依赖 CSS 引用。</p>
<p><a href="http://ukijs.org/"><strong>UKI</strong> 主页与下载</a><br /><a href="http://ukijs.org/examples/"><strong>UKI</strong> 控件,演示,示例</a></p>
<p><a href="http://ukijs.org/examples/"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_04.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">MochaUI</h2>
<p><a href="http://mochaui.com/"></a></p>
<p><a href="http://mochaui.com/">MochaUI</a> 是 <a href="http://mootools.net/">MooTools Javascript 框架</a> 与 ExplorerCanvas 的一个备受欢迎的扩展,可以用来快速创建 Web 应用,Web 桌面,网站,饰件,独立 Windows,Modal 对话框等等。</p>
<p><a href="http://mochaui.com/"><strong>MochaUI</strong> 主页与下载</a><br /><a href="http://mochaui.com/demo/"><strong>MochaUI</strong> 控件,演示,示例</a></p>
<p><a href="http://mochaui.com/demo/"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_06.jpg" alt="" /></a></p>
<p>中文编译来源:<a href="http://www.comsharp.com"><strong>锐商企业CMS</strong> 网站内容管理系统</a> 官方网站</p>
<h2 class="subtitle">Sigma Ajax UI Builder</h2>
<p><a href="http://sourceforge.net/projects/ajaxuibuilder/">SigmaVisual</a> 是一套基于 Web 的,所见即所得的 AJAX UI 创建工具,包含超过40个不见,如 Tab,对话框,树形图,时间线等,基于 JavaScript 和 PHP。</p>
<p><a href="http://sourceforge.net/projects/ajaxuibuilder/"><strong>Sigma Ajax UI Builder</strong> 主页和下载</a><br /><a href="http://www.sigmawidgets.com/products/sigma_visual/VisualJS/index.html"><strong>Sigma Ajax UI Builder</strong> 控件,演示和示例</a></p>
<p><a href="http://www.sigmawidgets.com/products/sigma_visual/VisualJS/index.html"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_08.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">JxLib based MooTools</h2>
<p><a href="http://jxlib.org/"></a></p>
<p><a href="http://jxlib.org/">JxLib</a> 是一个基于 <a href="http://mootools.net/">MooTools</a> 的 JavaScript UI 框架,包含多数 Web 程序都需要的基本空间,如按钮,Tab,菜单,树形结构,对话框等等。JxLib 还支持换肤功能。</p>
<p><a href="http://jxlib.org/"><strong>JxLib</strong> 主页与下载</a><br /><a href="http://jxlib.org/"><strong>JxLib</strong> 控件,演示与示例</a></p>
<p><a href="http://jxlib.org/"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_10.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">Dijit &ndash; The Dojo Toolkit</h2>
<p><a href="http://dojotoolkit.org/reference-guide/dijit/index.html"></a></p>
<p><a href="http://dojotoolkit.org/reference-guide/dijit/index.html">Dijit</a> 基于 <a href="http://www.dojotoolkit.org/">Dojo</a>,也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种,甚至支持不同语种的文字书写方向以及本地化数字,日期等等。</p>
<p><a href="http://dojotoolkit.org/reference-guide/dijit/index.html"><strong>Dijit</strong> 主页,下载</a><br /><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html"><strong>Dijit</strong> 控件,演示,示例</a></p>
<p><a href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_12.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">jQuery TOOLS</h2>
<p><a href="http://flowplayer.org/tools/index.html"></a></p>
<p><a href="http://flowplayer.org/tools/index.html">jQuery Tools</a> 是一个非常轻量(2.5kb)的常用 UI 库,支持以下 jQuery 对象,Tabs, 工具提示,滚动条,层,表单以及 Flash 嵌套。</p>
<p><a href="http://flowplayer.org/tools/index.html"><strong>jQuery TOOLS</strong> 主页与下载</a><br /><a href="http://flowplayer.org/tools/demos/index.html"><strong>jQuery TOOLS</strong> 控件,演示,示例</a></p>
<p><a href="http://flowplayer.org/tools/demos/index.html"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_14.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">jQuery UI</h2>
<p><a href="http://jqueryui.com/home"></a></p>
<p><a href="http://jqueryui.com/home">jQuery UI</a> 基于 <a href="http://jquery.com/">jQuery</a>,包含 3 个大类,饰件,一些内置的 UI 对象;效果,对各种网页对象施加动画效果(如爆炸效果);鼠标交互,如拖放操作。</p>
<p><a href="http://jqueryui.com/home"><strong>jQuery UI</strong> 首页与下载</a><br /><a href="http://jqueryui.com/demos/"><strong>jQuery UI</strong> 控件,演示与示例</a></p>
<p><a href="http://jqueryui.com/demos/"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_16.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">Prototype UI</h2>
<p><a href="http://www.prototype-ui.com/"></a></p>
<p><a href="http://www.prototype-ui.com/">Prototype UI</a> 基于 <a href="http://www.prototypejs.org/">Prototype</a> 与 <a href="http://script.aculo.us/">Script.aculo.us</a>,包括多个模块(旋转木马,Modal 窗口,阴影,右键菜单等),每个模块可以单独安装使用。</p>
<p><a href="http://www.prototype-ui.com/"><strong>Prototype UI</strong> 主页与下载</a><br /><a href="http://docs.prototype-ui.com/rc0/Window"><strong>Prototype UI</strong> 控件,演示与示例</a></p>
<p><a href="http://docs.prototype-ui.com/rc0/Window"><img style="border:0px;" src="http://speckyboy.com/wp-content/uploads/2010/05/webui_18.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">Jitsu</h2>
<p><a href="http://www.jitsu.org/jitsu/index.html"></a></p>
<p><a href="http://www.jitsu.org/jitsu/index.html">Jitsu</a> 功能包括 XML 标记,页面编译,动画引擎,Ajax 以及运行时检测等等,它的 Ajax 功能使消费级 Web 应用的创建变得非常简单,支持客户端数据绑定,还可以将页面编译成 JavaScript,<a href="http://www.jitsu.org/jitsu/index.html">Jitsu</a> 在 Firefox 和 IE 中运行最佳。</p>
<p><a href="http://www.jitsu.org/jitsu/index.html"><strong>Jitsu</strong> 主页与下载</a><br /><a href="http://www.jitsu.org/jitsu/quicktours/basic_helloworld.html"><strong>Jitsu</strong> 控件,演示与示例</a></p>
<p><a href="http://www.jitsu.org/jitsu/quicktours/basic_helloworld.html"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_20.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">Qutensil</h2>
<p><a href="http://qutensil.com/">Qutensil</a> 仍在开发中,但其路线图已经显示出某些引人注目的东西,基于 <a href="http://www.prototypejs.org/">Prototype</a> 与 <a href="http://script.aculo.us/">Scriptaculous</a> ,包含消息,调色板,滑动条,工具提示,可拖放窗口以及警告,确认,提示等窗口。</p>
<p><a href="http://qutensil.com/"><strong>Qutensil</strong> 主页,下载</a><br /><a href="http://qutensil.com/pages/modules"><strong>Qutensil</strong> 控件,演示,示例</a></p>
<p><a href="http://qutensil.com/pages/modules"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_22.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">Script.aculo.us</h2>
<p><a href="http://script.aculo.us/">script.aculo.us</a> 是一个备受欢迎的 UI 工具集,基于 <a href="http://www.prototypejs.org/">Prototype 框架</a>,提供了诸如视觉效果,UI 控件以及面向 DOM 的工具。</p>
<p><a href="http://script.aculo.us/"><strong>Script.aculo.us</strong> 首页与下载</a></p>
<p><a href="http://wiki.github.com/madrobby/scriptaculous/demos"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_24.jpg" alt="" /></a></p>
<h2 class="subtitle">Alloy UI</h2>
<p><a href="http://alloy.liferay.com/">AlloyUI</a> 是一套功能丰富的 UI 框架,基于 YUI 3,部分基于 YUI 2,包含一套丰富的(超过60)UI 部件,如图片库,对话框,树形结构,面板,自动完成,按钮,日历控件,工具条等。</p>
<p><a href="http://alloy.liferay.com/"><strong>Alloy UI</strong> 首页和下载</a><br /><a href="http://alloy.liferay.com/demos.php"><strong>Alloy UI</strong> 控件,演示与示例</a></p>
<p><a href="http://alloy.liferay.com/demos.php"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_26.jpg" alt="" /></a></p>
<p>&nbsp;</p>
<h2 class="subtitle">iUI: iPhone UI 框架</h2>
<p><a href="http://code.google.com/p/iui/"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_27.jpg" alt="" /></a><a href="http://code.google.com/p/iui/"></a></p>
<p><a href="http://code.google.com/p/iui/">IUI</a> 包含一套 JavaScript 库,CSS 式样表及图片,是一个轻量级 iPhone UI 库,包含 iPhone 风格导航菜单,设备方向,iPhone 风格切换等功能,可以为你的 Web 程序带来 iPhone 般的体验。</p>
<p><a href="http://code.google.com/p/iui/"><strong>iUI</strong> 主页与下载</a></p>
<h2 class="subtitle">XUI</h2>
<p><a href="http://xuijs.com/"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_29.jpg" alt="" /></a><a href="http://xuijs.com/"></a></p>
<p><a href="http://xuijs.com/">XUI</a> 是一个用于移动 Web 应用的轻量,极简,高度模块化的框架。它之所以非常轻量的原因是,它只支持移动浏览器,所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器,如 Webkit,Fennec 以及 Opera,并有意将来对移动 IE 和黑莓提供支持。</p>
<p><a href="http://xuijs.com/"><strong>XUI</strong> 首页,下载</a></p>
<h2 class="subtitle">Yahoo! YUI Library</h2>
<p><a href="http://developer.yahoo.com/yui/"><img style="border:0px;" src="http://speckyboy.specky.netdna-cdn.com/wp-content/uploads/2010/05/webui_30.jpg" alt="" /></a></p>
<p><a href="http://developer.yahoo.com/yui/">Yahoo! YUI Library</a> 可谓所有 Web UI 之父,可靠,功能丰富,目前已经发展到第 3 版。它拥有一个很庞大的开发团队,推出了非常丰富的功能,就功能而言,无可匹敌。</p>
<p><a href="http://developer.yahoo.com/yui/"><strong>YUI Library</strong> 主页与下载</a><br /><a href="http://developer.yahoo.com/yui/2/"><strong>YUI2 入门</strong></a><br /><a href="http://developer.yahoo.com/yui/3/"><strong>YUI3 入门</strong></a><br /><a href="http://developer.yahoo.com/yui/3/"><strong>YUI3</strong> 控件,演示与示例</a></p>
<p>本文国际来源:Specky Boy <a href="http://speckyboy.com/2010/05/17/15-javascript-web-ui-libraries-frameworks-and-libraries/">15 Javascript Web UI Libraries, Frameworks and Toolkits</a></p>
<p>中文编译来源:<a href="http://www.comsharp.com"><strong>锐商企业CMS</strong> 网站内容管理系统</a> 官方网站</p><p align="right" class="comet blueline">【&nbsp;<a href="#postcomment" target="_self">发表评论</a></span>&nbsp;<font class="cmtcount" style="font-size:12px;color:#c00;" >0</font>条&nbsp;】</p>
</div>
<div class="clear"></div>
<center><script language="javascript" type="text/javascript">show_ads_zone(28);</script></center>
<br />

<div class="blkarticle">
<dl style="width:306px;">
<dt>相关文章</dt>
<dd><a href="http://news.csdn.net/a/20100519/218442.html">15 个 JavaScript Web UI 库</a></dd>
<dd><a href="http://news.csdn.net/a/20100518/218439.html">开发人员需要牢记的HTML 5安全问题</a></dd>
<dd><a href="http://news.csdn.net/a/20100518/218437.html">八大原因导致企业2.0项目屡陷泥淖</a></dd>
<dd><a href="http://news.csdn.net/a/20100518/218436.html">调查称计算机等热门专业就业率低</a></dd>
<dd><a href="http://news.csdn.net/a/20100517/218434.html">电子书内容提供平台十年难盈利</a></dd>
</dl><dl style="width:306px;"><dt>&nbsp;</dt><dd><a href="http://news.csdn.net/a/20100517/218431.html">团购网站Groupon收购德国同行拓展欧洲市场</a></dd>
<dd><a href="http://news.csdn.net/a/20100517/218430.html">维基百科创始人威尔士放弃管理员权限</a></dd>
<dd><a href="http://news.csdn.net/a/20100517/218427.html">美博客批苹果与Adobe:别拿开放说事</a></dd>
<dd><a href="http://news.csdn.net/a/20100517/218426.html">美咨询公司发布中国的数字2.0一代报告 数字媒体和商务走向主流</a></dd>
<dd><a href="http://news.csdn.net/a/20100517/218423.html">Adobe创始人谈Flash之争:从未放弃过苹果</a></dd>
</dl>
</div>

<div class="blkcomments">
<div id="comment" style="width:612px;margin:0px auto;">
<div class="tlt">网友评论(共<span class="cmtcount">0</span>条评论)..</div>
<span id="jQCmt_params" dateline="1274225489" url="http://news.csdn.net/a/20100519/218442.html">15 个 JavaScript Web UI 库</span>
<script language="javascript" src="http://comment2.csdn.net/jQCmt.mini.js"></script>
</div>
</div>
</div>
             
<div class="blkright">
<div class="rtbrill" id="digestComment"></div>

<div class="rtlist"><dl><script type='text/javascript' src='http://news.csdn.net/js/right_gg.js'></script></dl></div>

        <div class="rtlist2">
          <h1 class="title_h1"><span class="txt_gray"><a href="http://news.csdn.net" target="_blank">更多</a></span>本周热点排行</h1>
          <dl class="newstop">
            <script type="text/javascript" src="http://tougao.csdn.net/js.php?ac=read_top4homepage"></script>
          </dl>
        </div>

        <div class="rtlist4">
          <dl class="gg">
            <iframe src="http://images.china-pub.com/coop/csdn_news1.html" frameborder="0" scrolling="no" height="100px" width="360px"></iframe>
          </dl>
        </div>

        <div class="rtlist3">
          <h1 class="title_h1" >精彩专题</h1>
          <ul class="lay_photo">
            <script type="text/javascript" src="http://svc.csdn.net/ColumnService/RandomColumnContentJS.aspx?id=f229c082-8ad1-4b1a-8a3a-ef94a6fde608&c=2&t=li" ></script>
          </ul>
        </div>

        <div class="rtlist2">
          <h1 class="title_h1"><span class="txt_gray"><a href="http://blog.csdn.net" target="_blank">更多</a></span>推荐博文</h1>
          <dl class="newstop1">
           <script language="javascript" src="http://svc.csdn.net/ColumnService/RandomColumnContentJS.aspx?id=1720b341-c790-4329-8735-0e86de193aeb&c=10&t=dd"></script>
          </dl>
        </div>
       
</div>
</div>

<div class="clear"></div>
<div class="pub_footer">
<script src="http://csdnimg.cn/pubfooter/js/publib_footer.js" type="text/javascript"></script>
</div>

</div>
</div>


<script type="text/javascript" src="http://www.csdn.net/common/counter.js"></script>
<script>document.write("<img src=http://counter.csdn.net/pv.aspx?id=23 border=0 width=0 height=0>");</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10292997-3");
pageTracker._trackPageview();
} catch(err) {}</script>

<script type="text/javascript" src="http://js.tongji.linezing.com/1273337/tongji.js"></script><noscript><a href="http://www.linezing.com"><img src="http://img.tongji.linezing.com/1273337/tongji.gif"/></a></noscript>

</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics