条件，引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js。
一、自动完成 http://www.w3cschool.cc/jqueryui/example-autocomplete.html
var availableTags = [
"ActionScript",
"AppleScript"];
$( "#mytags" ).autocomplete({
source: availableTags
});
<div class="ui-widget">
<label for="tags">标签：</label>
<input id="mytags">
</div>
二、折叠面板 http://www.w3cschool.cc/jqueryui/example-accordion.html
<script> $(function() { $( "#accordion" ).accordion(); }); </script> <div id="accordion"> <h3>部分 1</h3> <div> <p>hello，我是第一段。 </p> </div> <h3>部分 1</h3> <div> <p>hello，我是第er段。 </p> </div> <h3>部分 1</h3> <div> <p>hello，我是第三段。 </p> </div> </div>
三、标签页切换 http://www.w3cschool.cc/jqueryui/example-tabs.html
<script> $(function() { $( "#tabs" ).tabs(); }); </script> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>第一</p> </div> <div id="tabs-2"> <p>第二</p> </div> <div id="tabs-3"> <p>第三</p> <p>还是第三</p> </div> </div>
四、标签页的排序： http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-tabs-sortable
五、标签页的动态添加和移除
http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-tabs-manipulation
六、带图标的按钮 http://www.w3cschool.cc/jqueryui/example-button.html
1 <script> 2 $(function() { 3 4 $( "#btnleft" ).button({ 5 icons: { 6 primary: "ui-icon-locked" 7 } 8 }); 9 $("#btntwopic").button({ 10 icons: { 11 primary: "ui-icon-gear", 12 secondary: "ui-icon-triangle-1-s" 13 } 14 }); 15 16 }); 17 </script> 18 19 20 <button id="btnleft">图标在左侧的按钮</button> 21 <button id="btntwopic">带有两个图标的按钮</button>
//如果需要执行服务器端事件
<asp:button id="btnleft" runat="server" onclick="btnleft_Click" Text="确认">确认</asp:button>
//在后台的page_load函数中增加属性可以先执行web前端的函数
btnleft.attributes.add("onclick","return btnleft_clientclick()");
七、日期选择器
<script> $(function() { $( "#fldfirstdate" ).datepicker(); }); </script> </head> <body> <p>日期：<input type="text" id="fldfirstdate" ></p>
八、格式化日期格式，例如[yy-mm-dd] 参考tongfang吧。