jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮

本文深入解析了jQuery UI库中的五个核心组件：自动完成、折叠面板、标签页切换、标签页的排序与动态添加和移除，以及带有图标的按钮。同时，介绍了日期选择器和格式化日期格式的功能。

条件，引用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
});

二、折叠面板 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吧。

转载于:https://www.cnblogs.com/camelroyu/p/4174668.html