接觸jQuery UI，是因為當初想給頁面加一個日期控制項，可以點擊擷取日期，本想著使用ASP.NET內建的Calendar控制項，但是使用比較複雜：頁面載入時控制項隱藏，文字框擷取焦點時，控制項顯示，點擊日期控制項的日期時，擷取日期再賦值給文字框。我只想獲得一個日期，要不要這麼艱難？
終於，找到了jQuery UI，實際上就是使用javascript封裝好的控制項或是效果代替ASP.NET內建的。下面來介紹一下使用到的jQuery UI控制項及使用方法。
使用方法使用方法
<html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#datepicker" ).datepicker(); }); </script></head><body> <p>Date: <input type="text" id="datepicker" /></p> </body></html>
效果：點擊文字框自動出現日期控制項，選擇日期自動填滿到文字框中。
datapicker控制項和Calendar控制項：
ToolTip
使用方法類似，能產生更柔和的效果(第一個為jquery ui tooltip，第二個為asp.net tooltip)，
使用方法：
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <link href="新檔案夾1/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="新檔案夾1/jquery1.9.0.js" type="text/javascript"></script> <script src="新檔案夾1/jquery-ui.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(document).tooltip(); }); </script></head><body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server" title="I'm a textbox"></asp:TextBox> </div> </form></body></html>
其它jQuery UI使用方法類似，且效果更炫，參見http://jqueryui.com/。
使用者往往只關心他所見到的介面，同時也很大程度上減少了程式員的代碼量，最重要的是不用再考慮瀏覽器的相容問題，所以，開始使用jQuery UI吧。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
