条件，引用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>部分 </h3>

  <div>

    <p>hello，我是第一段。 </p>

  </div>

  <h3>部分 </h3>

  <div>

    <p>hello，我是第er段。 </p>

  </div>

  <h3>部分 </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

 <script>

   $(function() {

  $( "#btnleft" ).button({

       icons: {

         primary: "ui-icon-locked"

       }

     });

 $("#btntwopic").button({

       icons: {

         primary: "ui-icon-gear",

         secondary: "ui-icon-triangle-1-s"

       }

     });

   });

   </script>

 <button id="btnleft">图标在左侧的按钮</button>

 <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吧。

jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）的更多相关文章

  1. 弹窗中使用jquery ui的autocomplete自动完成插件无效果 实际是被遮挡了

    在普通页面上使用jquery ui的autocomplete自动完成插件时正常显示提供选择的下拉框,但是放到弹窗中的时候就无法显示这个选择的下拉框,其它效果正常: 估计是被弹出窗遮挡了,网络搜索了jq ...

  2. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  3. Struts2 JQuery UI常用插件

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  4. jQuery UI常用插件使用

    一.什么是插件 ①是遵循一定接口规范编写的程序 ②是原有系统平台功能的扩展和补充 ③只能运行在规定的系统平台下,而不能单独运行 注:由于jQuery插件是基于jQuery脚本库的扩展,所以所有jQue ...

  5. jQuery(UI)常用插件

    jQuery 官方网站:http://jquery.com/ 下载地址:http://jquery.com/download/ 插件地址: http://plugins.jquery.com/ 常用插 ...

  6. jquery的常用操作（操作html页面的Dom对象的元素）

    一:页面加载完成时,会执行jquery的方法(不需要等待图片加载完成,只要dom结构加载完成,就执行该方法) //第一种写法: $(document).ready(function() { // 执行 ...

  7. jquery ui 常用（二）（对话框 | 旋转器 | 工具提示框（表单） | 特效（百叶窗） ）

    一.添加信息的对话框  http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-dialog-modal-form. 模态表单 ...

  8. jQuery UI：邮箱自动补全函数

    $('#email').autocomplete({ delay:0, autoFocus:true, source:function(request,response){ var hosts = [ ...

  9. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?

    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...

随机推荐

  1. Summary: Final Keyword

    In this tutorial we will learn the usage of final keyword. final keyword can be used along with vari ...

  2. SQL server 表之间的关系生成图

    选择数据库名->数据库关系鼠标右键->新建数据库关系图 按着ctrl选择要添加的表 点击添加

  3. javascript浏览器对象

    window对象 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JS全局对象.函数以及变量均自动成为window对象的成员 全局变量是window对象的 ...

  4. 怎样解决MySQL数据库主从复制延迟的问题---流行网站的解决办法（转载）

    像Facebook.开心001.人人网.优酷.豆瓣.淘宝等高流量.高并发的网站,单点数据库很难支撑得住,WEB2.0类型的网站中使用MySQL的 居多,要么用MySQL自带的MySQL NDB Clu ...

  5. spark on mesos 两种运行模式

    spark on mesos 有粗粒度(coarse-grained)和细粒度(fine-grained)两种运行模式,细粒度模式在spark2.0后开始弃用. 细粒度模式 优点 spark默认运行的 ...

  6. 07---Net基础加强

    第六节复习 泛型和非泛型集合的区别 通常情况下,建议您使用泛型集合,因为这样可以获得类型安全的直接优点而不需要从基集合类型派生并实现类型特定的成员.此外,如果集合元素为值类型,泛型集合类型的性能通常优 ...

  7. u盘安装centos

    1. 下载centos系统2. 使用UltraISO制作u盘启动.制作方法:http://jingyan.baidu.com/article/a378c960630e61b329283045.html ...

  8. -XX:+PrintHeapAtGC 每次一次GC后，都打印堆信息

    -XX:+PrintHeapAtGC每次一次GC后,都打印堆信息 {Heap before GC invocations=0 (full 0): def new generation   total ...

  9. Install the 64bit library in Ubuntu13.10

    After installed Ubuntu13.10, and i want to run a 32bit software, in the pass, you just run sudo apt- ...

  10. JSP-01-搭建Web应用环境

    一.搭建Web应用环境 Tomcat 下载会有两种版本,安装版和解压版,这里以解压版为例 Web服务: 是实现“基于Web无缝集成”的目标而提出的全新概念,希望通过Web服务能够实现不同的系统之间的相 ...