条件，引用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. [转] 被遗忘的Logrotate

    FROM : http://huoding.com/2013/04/21/246 我发现很多人的服务器上都运行着一些诸如每天切分Nginx日志之类的CRON脚本,大家似乎遗忘了Logrotate,争相 ...

  2. Java基础之读文件——使用通道读取混合数据1(ReadPrimesMixedData)

    控制台程序,本例读取Java基础之写文件部分(PrimesToFile2)写入的Primes.txt. 方法一:可以在第一个读操作中读取字符串的长度,然后再将字符串和二进制素数值读入到文本中.这种方式 ...

  3. IDEA文件编码修改

    上图标注 1 所示,IDE 的编码默认是 UTF-8,Project Encoding 虽然默认是 GBK,但是一般我都建议修改为 UTF-8.上图标注 2 所示,IntelliJ IDEA 可以对 ...

  4. Dictionary中的结构体转出来

    CGRect keyBoardFrame = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];

  5. 使用MJExtension中要注意的地方

    MJExtension git地址  https://github.com/CoderMJLee/MJExtension#JSON_Model Model contains model-array[模 ...

  6. [原创]java WEB学习笔记76：Hibernate学习之路---Hibernate介绍，hibernate 环境的搭建

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. URAL 1018 Binary Apple Tree（树DP）

    Let's imagine how apple tree looks in binary computer world. You're right, it looks just like a bina ...

  8. $.getJSON异步请求和同步请求

    先说一下我遇到的问题吧,我之前的一个函数想调用上一个函数的返回值,但是它的返回值一直为空,后来翻了一些资料才明白是异步请求在作怪,不多说,看例子,这是我之前有返回值函数的代码: function ge ...

  9. Windows平台上安装搭建iPhone/iPad的开发环境

    http://www.cnblogs.com/hanxianlong/archive/2015/09/20/4824227.html http://blog.csdn.net/yahohi/artic ...

  10. struts拦截器

    struts中的拦截器相当于过滤器的作用 一在struts.xml中配置拦截器或拦截器栈 <interceptors>!--全部的拦截器 <interceptor name=&quo ...