条件，引用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. VS2010 AlwaysCreate

    VS2010 解决方案里有两个工程,每次按F7编译都会链接一次.链接完成再按F7又会链接一次..... 提示: 正在创建“Debug\testb.unsuccessfulbuild”,因为已指定“Al ...

  2. maven 一好用的仓库镜像

    <mirror> <id>ibiblio.org</id> <name>ibiblio Mirror of http://repo1.maven.org ...

  3. MS SQL SERVER 锁研究记录

    首先创建一直数据表 ChenJi,有如下字段: ID, DanWeiID,  Name,  ChenJi CREATE TABLE [dbo].[ChenJi]( [ID] [int] NOT NUL ...

  4. 生成arff文件，csv转为arff

    一.什么是arff格式文件 1.arff是Attribute-Relation File Format缩写,从英文字面也能大概看出什么意思.它是weka数据挖掘开源程序使用的一种文件模式.由于weka ...

  5. Azure 负载均衡和可用性集

    首先要2台以上的虚拟机,一开始我找了好久都没找到如何在一个云服务里添加多个虚拟机. 因为我使用的是快速创建,快速创建的界面是要新建一个云服务的,如果你输入现有的云服务名字,它会提示你重名了. 你要用[ ...

  6. PostgreSQL Monitor pg_view

    PostgreSQL Monitor pg_view https://github.com/zalando/pg_view Requirements Linux 2.6, python 2.6, ps ...

  7. lvs负载均衡的搭建

       lvs负载均衡的搭建 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.         在部署环境前,我们需要了解一下一些协议 一.什么是arp 地址解析协议,即ARP(Addr ...

  8. 小项目：mini资源管理器【使用IO流：包含(Directory与DirectoryInfo、File与FileInfo的用法）】

    主界面是这样的 1.在点击查询引发的事件时把TextBox.Text输入的目录地址加载到TreeList控件里. private void btnSelect_Click(object sender, ...

  9. MVC权限管理系统dwpro项目权限按钮无故自动消失问题

    关于那个权限按钮丢失的问题修改方法如下: 把源文件中的XmlConfig文件夹里的Config.xml文件剪切到根目录下,并修改文件名为:app.config(关键是后缀不是xml了是config) ...

  10. C#与js的各种交互

    今天遇到一个问题,查到不错的资料,放上来记录一下,以防忘记地址,算是我的笔记吧! 很多人都向在服务器端调用客户端的函数来操作,也就是在asp中调用javascript脚本中已经定义好的脚本函数.经过研 ...