条件，引用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. NETBEANS + XDEBUG + IIS PHP 代码 调试 DEBUG

    参考: http://domainwebcenter.com/?p=936 http://www.sitepoint.com/debugging-and-profiling-php-with-xdeb ...

  2. COM学习笔记

    2015-10-22 10:24 在第八章学习Aggregation的时候搞晕了,所以就建了一个Workspace名为"COMAggregationDemo"来调试一下,使用的源码 ...

  3. 帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  4. MVC1

  5. struts 2.0部署

    环境:linux centos 64位. 1)下载JDK6.0,具体文件名是:jdk-6u45-linux-x64.bin 安装:chmod 755 jdk*.bin ./jdk....bin 设置环 ...

  6. Codeforce Round #215 Div2 C

    还以为就这么点分了,不会跪了,起码有点加,生活都这么艰难了,为什么不让我好好地活下去! 是不是世界对我充满了恶意! 当然还是自己太菜! B题没初始化第一个就杯具了一次 C题大概的弄出来了,调了半个小时 ...

  7. 找区间连续值(HDU5247)

    找连续数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. fences(桌面整理软件)与eDiary3.3.3下载链接

    fences:  http://www.jb51.net/softs/309746.html http://jingyan.baidu.com/article/e8cdb32b6e958337042b ...

  9. StringBuffer类总结

    package day13; /* StringBuffer是字符串缓冲区. 是一个容器. 特点: 1,长度是可变化的. 2,可以字节操作多个数据类型. 3,最终会通过toString方法变成字符串. ...

  10. 【皇甫】☀那些事儿......STEP

    写项目之前呢,先来缕缕思路,既然要写学生管理系统,那肯定上不了从数据库中读取信息,然而想要从数据库中拿到你想要的东西,就要先登录,得到他的权限才行,所以我们第一步就要先搞出一个登录页面并且能连接到数据 ...