jQuery UI简介

jQuery UI包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。

jQuery UI组件构成

jQuery UI 主要分为3个部分：交互、微件和效果库。

交互（Interactions）

交互部件是一些与鼠标交互相关的内容，包括缩放（Resizable） , 拖动（Draggable） , 放置（Droppable） , 选择（Selectable） , 排序（Sortable）等。

小部件（Widgets）

主要是一些界面的扩展，包括折叠面板（Accordion） , 自动完成（Autocomplete） , 按钮（Button） , 日期选择器（Datepicker） , 对话框（Dialog） , 菜单（Menu） , 进度条（Progressbar） , 滑块（Slider） , 旋转器（Spinner） , 标签页（Tabs） , 工具提示框（Tooltip）等，新版本的UI将包含更多的微件。

效果库（Effects）

用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效（Effect） , 显示（Show） , 隐藏（Hide） , 切换（Toggle） ,添加 Class（Add Class） , 移除 Class（Remove Class） , 切换 Class（Toggle Class） , 转换 Class（Switch Class） , 颜色动画（Color Animation）等。

插件（Plug-in）

是遵循一定接口规范编写的程序

是原有系统平台功能的扩展和补充

只能运行在规定的系统平台下，而不能单独运行

Tip：jQuery插件是指基于jQuery脚本库开发出来的扩充函数库，jQuery的官方插件叫做jQuery UI。

Dialog插件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'dialog.jsp' starting page</title>

<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

  <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

  <script type="text/javascript">

     $(function(){

       $('#dlg').dialog({

          autoOpen:false,

          buttons:{

            'close':function(){

              $('#dlg').dialog('close')

            }

            open:function(){

            alert(1)

            }

          },

          modal:true,

          show:{

           effect:'blind',

                  duration:1000

          },

          hide:{

          effect:'explode',

                  duration:2000

          }

       })

     })

  </script>

  </head>

  <body>

    <button id="openbut" onclick="$('#dlg').dialog('open')">打开窗口</button>

    <div id="dlg" title="用户登录">

        用户名<br/>

        <input type="text"><br/>

        密码<br/>

        <input type="text"><br/>

    </div>

  </body>

</html>

运行效果：

Tabs插件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'tabs.jsp' starting page</title>

  <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

  <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

  <link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>

  <script type="text/javascript">

  $(function(){

      $('#tabs').tabs({

        //折叠

        //collapsible:true,

        //从第几位开始展示，第一位是0

        //active:1,

        //设置切换选项卡的触发事件

        //event:'mouseover',

        //打开后触发

        //activate:function(){

        //    alert(1)

        //}

        //打开时触发

        beforeActivate:function(){

            alert(1)

        },

        //内容重载时触发

        beforeLoad:function(){

            alert(1)

        }

      });

  })

  </script>

  </head>

  <body>

  <div id="tabs">

        <ul>

            <li><a href="#tabs-1">Tabs1</a>

            </li>

            <li><a href="#tabs-2">Tabs2</a>

            </li>

            <li><a href="#tabs-3">Tabs3</a>

            </li>

        </ul>

        <div id="tabs-1">

            <p>content of tab one</p>

        </div>

        <div id="tabs-2">

            <p>content of tab two</p>

        </div>

        <div id="tabs-3">

            <p>content of tab three</p>

        </div>

    </div>

  </body>

</html>

Menu插件

实现效果：

autocomplete插件

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>My JSP 'autocomplete.jsp' starting page</title>

     <script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>

  <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>

  <link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>

  <link rel="stylesheet" href="../jquery-ui-1.9.2/demos/demos.css" type="text/css"></link>

  <script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery.ui.autocomplete.js"></script>

  <script type="text/javascript">

  $(function(){

     // var data=["aa","aaa","bb","cc"];

      //json

      var data=[{"label":"aa","value":"1"},{"label":"bb","value":"2"}]

      $('#ao').autocomplete({

          //绑定数据

          source:data,

          //最少长度激活

          //minLength:2,

          //延迟

          //delay:2000,

          //默认选择第一项

          //autoFocus: true,

          //创建时触发

          // create:function(){

          //      alert(1)

          // }

          //开始查找请求

          //search:function(){

          //  alert(1)

          //},

          //列表被选中时触发

          //select:function(){

          //       alert(1)

          //}

          //列表任意一项获得焦点时触发

          //focus:function(){

          //      alert(1)

          //}

      });

  })

  </script>

  </head>

  <body>

    <input id="ao" />

  </body>

</html>

效果

Jquery UI的更多相关文章

  1. jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧

    这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...

  2. jQuery UI与jQuery easyUI的冲突解决办法

    jQuery UI与jQuery easyUI都是基于jQuery开发的.难免里面会有些方法名冲突! 因此对jQuery.easyui其中的两个方法名:resizable 和 draggable进行替 ...

  3. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  4. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  5. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  6. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  7. 解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...

  8. 使用requireJS的shim参数 解决插件 jquery.ui 等插件问题

    没有requireJS框架之前,如果我们想使用jquery框架,会在HTML页面中通过<script>标签加载, 这个时候jquery框架生成全局变量$和jQuery等全局变量.如果项目中 ...

  9. Struts2 JQuery UI常用插件

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

随机推荐

  1. javascript中的函数式声明与变量式声明

    观察下面两段代码,试写出hello('word');的运行结果: // 变量式声明 function hello(msg){ alert(msg); var msg = function(){}; a ...

  2. 非关系型数据库来了,CRL快速开发框架升级到版本4

    轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...

  3. Oracle 11g RAC 应用补丁简明版

    之前总结过<Oracle 11.2.0.4 RAC安装最新PSU补丁>, 这次整理为简明版,忽略一切输出的显示,引入一些官方的说明,增加OJVM PSU的补丁应用. 环境:RHEL6.5 ...

  4. 手把手教从零开始在GitHub上使用Hexo搭建博客教程(四)-使用Travis自动部署Hexo(2)

    前言 前面一篇文章介绍了Travis自动部署Hexo的常规使用教程,也是个人比较推荐的方法. 前文最后也提到了在Windows系统中可能会有一些小问题,为了在Windows系统中也可以实现使用Trav ...

  5. 未能加载文件或程序集“Owin, Version=1.0.0.0, Culture=neutral, PublicKeyToken=f0ebd12fd5e55cc5”或它的某一个依赖项。系统找不到指定的文件。

    在创建ASP.NET MVC项目过程中发生了这个异常 未能加载文件或程序集"Owin, Version=1.0.0.0, Culture=neutral, PublicKeyToken=f0 ...

  6. IBatisNet -- 保护你的配置文件及映射文件信息

    通常情况下我们在使用IBatisNet的时候,配置文件和映射文件都是暴露在外的,如果能进入到服务器,那么你的程序的操作数据库的SQL语句,数据库连接字符串等信息都将很轻松的被看到,这样是很危险的.然而 ...

  7. xUnit入门一

    看了下Nhibernate的入门Demo,感觉测试驱动开发会更效率.当然,你可能觉得不是还要额外编程单元测试代码吗?开发怎么会更效率? 一句话解释之,磨刀不误砍柴工. 那就开始入门吧 ~.~ 笔者使用 ...

  8. 原生js可爱糖果数字时间特效

    效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> ...

  9. HTML5简介

    HTML5简介 HTML5是HTML的最新修订标准.2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成. HTML5的设计目的是在移动设备上使用多媒体. HT ...

  10. CentOS 6.2 Eclipse CDT 开发环境搭建

    一.安装中文语言支撑 我当初安装CentOS6.2时选择了中文语言支持,有iBus和拼音输入法,有gnome和kde 没有安装的可以参考:CentOS英文环境下使用中文输入法  安装中文语言支持和输入 ...