码迷,mamicode.com
首页 > Web开发 > 详细

jquery ui 常用

时间:2014-12-19 20:42:37      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

条件,引用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

jquery ui 常用

标签:

原文地址:http://www.cnblogs.com/camelroyu/p/4174668.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!