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. ROC曲线、PR曲线

    在论文的结果分析中,ROC和PR曲线是经常用到的两个有力的展示图. 1.ROC曲线 ROC曲线(receiver operating characteristic)是一种对于灵敏度进行描述的功能图像. ...

  2. Sass：初识Sass与Koala工具的使用

    一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...

  3. 菜鸟浅析JAVA,.NET,C/C++的区别

    前言 以前经常看一些文章说到JAVA,.NET的区别,有时候C++er也会过来 凑凑热闹,突然发现这几天手停不下来了,也想写一篇文章 来分析一下 JAVA,.NET,C/C++的优缺点以及他们之间谁“ ...

  4. 微信小程序（微信应用号）开发ide安装解决方法

    这两天整个技术圈都炸锅了,微信小程序(微信应用号)发布内测,首批200家收到邀请,但是没受邀请的同学,也不用担心,下面介绍一下解决方法. 首先需要下载ide,昨天只需要下载0.9版本的编辑器并替换文件 ...

  5. 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇

    http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...

  6. TeamCity : .NET Core 插件

    笔者在<TeamCity : 配置 Build 过程>一文中提到 "TeamCity 内置支持几乎所有的 build 类型".在当今这个软件语言和各种框架飞速发展的时代 ...

  7. Git同步原始仓库到Fork仓库中

    前言 本文介绍的是Git同步原始仓库到Fork仓库示例教程,废话不多说,下面直接到实操部分. 这里以aspnetcore-doc-cn的github仓库为例,同步dev分支. 步骤 1.初始化本地仓库 ...

  8. 从零开始学 Java - Spring 集成 Memcached 缓存配置（一）

    硬盘和内存的作用是什么 硬盘的作用毫无疑问我们大家都清楚,不就是用来存储数据文件的么?如照片.视频.各种文档或等等,肯定也有你喜欢的某位岛国老师的动作片,这个时候无论我们电脑是否关机重启它们永远在那里 ...

  9. nginx+lua

    一场电闪与雷鸣的结合, 公司原有服务器已经配置好nginx,需要重新装载lua模块,哈哈哈,无法无法.   安装LUA模块需要以下 pcre       ftp://ftp.csx.cam.ac.uk ...

  10. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...