今天刚好接触jquery ui，发现还挺好用的，功能比较强大，很多想实现的效果不再需要去使用庞大繁杂的jquery插件了。。随便写了一下觉得最常用的功能，主要是怎么使用jquery ui（导入），至于那么多的功能，官方网站http://jqueryui.com/download非常好，可以让你任意选择制定自己需要的组件，有弹出对话框，日历，进度条等等。如果把全部的库都导进去的话，有点儿打，几百k，不过可以选择性针对性地导入。
自己写了一下弹出框/日历/tabs菜单的代码，纯测试使用。。
注：此处直接从google上导进需要的库，如果自己去官网下载的话样式有点儿不同。这里只是想尝试一下而已，不做太深的研究，需要的时候再好好参考官方文档。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <title>feng-jquery ui</title> 7 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 8 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 9 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 10 <style type="text/css"> 11 #main{width:600px; text-align:center;} 12 #left{width:40%;height:500px; background-color:#456; float:left;} 13 #right{width:60%;height:500px; background-color: #999; float:right; text-align:center;} 14 </style> 15 <script type="text/javascript"> 16 $(function(){ 17 $("#opendialog").click(function(){ 18 $("#dialog").dialog(); 19 }); 20 $("#tabs").tabs(); 21 $("#datepicker").datepicker(); 22 }) 23 </script> 24 </head> 25 <body> 26 <div id="main"> 27 <div id="header"> 28 <p>Hi,I am chenfeng...</p> 29 </div> 30 <div id="left" style="font-size: 65%;"> 31 Date:<input type="text" id="datepicker" /> 32 </div> 33 <div id="right"> 34 <div> 35 <button id="opendialog">opendialog</button> 36 <p id="dialog" style="display:none;">hello,this is dialog...</p> 37 </div> 38 <div id="tabs" style="font-size:62%;"> 39 <ul> 40 <li><a href="#fragment-1"><span>One</span></a></li> 41 <li><a href="#fragment-2"><span>Two</span></a></li> 42 <li><a href="#fragment-3"><span>Three</span></a></li> 43 </ul> 44 <div id="fragment-1"> 45 <p>First tab is active by default:</p> 46 <pre><code>$('#example').tabs();</code></pre> 47 </div> 48 <div id="fragment-2"> 49 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 50 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 51 </div> 52 <div id="fragment-3"> 53 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 54 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 55 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 56 </div> 57 </div> 58 </div> 59 </div> 60 </body> 61 </html>