Jquery UI 教程

最新推荐文章于 2020-05-28 17:33:43 发布

dreamboycx

最新推荐文章于 2020-05-28 17:33:43 发布

阅读量2.7k

点赞数

分类专栏：前端设计

前端设计专栏收录该内容

121 篇文章 1 订阅

订阅专栏

jQuery Tools 是一套非常优秀的 Web UI 库，包括 Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等等，可以为你的站点带来非同寻常的桌面般体验，这套工具的主要作用是显示内容，这是绝多多数站点最需要的东西。这套令人惊异的 UI 库只有 5.59K 大小，基于 MIT 和 GPL 两种许可模式。

和别的 Web UI 库不同，别的 UI 库很多是面向行为的，如拖放，滚动，表格排序，可拖放窗口等等，它们更适合于富 Web 应用，如 Email 客户端，任务管理，图片组织整理等。而 jQuery Tools 主要面向内容展示，因此更适用于单纯的内容型网站。

jQuery Tools 使用也很简便，只需几行调用代码即可，其官方站点包含大量演示和调用代码可以参考。以下是该 UI 库中包含的主要 UI 工具介绍。

jQuery Tools / Tabs

Web 上最受欢迎的 UI 部件当属 Tab 容器，如果没有 Tab，我们的很多网页不知要多么混乱，所有用户都熟悉 Tab 这种用户友好的部件，jQuery Tools / Tab 非常好用，甚至可以使用浏览器的前进后退导航按钮在 Tab 间前进或后退。

jQuery Tools / Flashembed

如今 JavaScript 真是越来越快了，所有浏览器都在 JavaScript 引擎上较量，我们会看到越来越多的基于 JavaScript 的 Web 部件面世，然而至少在当下， Flash 仍有其用武之地，比如播放视频。

jQuery Tools / Flashembed 可以用来在网页中加载 Flash 对象，虽然类似的工具比比皆是，但 Flashembed 绝对是其中最好用的一个。

jQuery Tools / Overlay

Overlay （浮动层）可以用来浮动在任何 HTML 对象的上方，在现代 Web 设计中，浮动层是一种非常有效的 UI 概念，可以用来

1. 着重显示你的产品。

2. 显示警示信息。

3. 提示用户输入。

4. 以灯箱风格浏览图片库。

jQuery Tools / Overlay 可以很轻松地处理上述各种情形和各种效果。

jQuery Tools / Tooltip

工具提示是 Web 上最实用的工具，Web 默认的提示工具太简陋，jQuery Tools / Tooltip 会以一种非常漂亮的视觉效果显示提示内容。

jQuery Tools / Scrollable

jQuery Tools / Scrollable 可以在网页中实行定制的，局部的滚动，在现代 Web 设计中，这几乎是最受欢迎的一种技术，可以用在下面这些场合：

· 产品目录

· 滚动新闻

· 在表单中实现定制选择框

· 浏览图片库

· 视频播放列表

· 各种站点导航

HTML设置

这里是上面的例子中的HTML设置。

<imgid="overlaytrigger" src="img/gustavohouse.jpg"rel="#overlay"/> 
 
<!--overlayed element, everything is styled with external stylesheet --> 
<divid="overlay"> 
   <imgsrc="img/gustavohouse-medium.jpg" /> 
 
   <div class="details"> 
      <h2>BerlinGustavohouse</h2> 
 
      <p> 
         The Gustavo House in StorkowerStrasse. It was built in 1978 
         and reconstructed in 1998 by theSpanish artist Gustavo. 
      </p> 
  </div> 
 
</div>

JavaScript的设置

$("#overlaytrigger").overlay({effect:'apple', expose: '#004C7D'});

HTML设置

所有你需要的是触发元素和一个提示元素。所有方面都可以用CSS样式：

<!--a couple of trigger elements --> 
<divid="tooltips"> 
    <img src="img/tooltip/1.jpg"title="My tooltip #1"/> 
 
    <img src="img/tooltip/2.jpg"title="My tooltip #2"/> 
 
    <imgsrc="img/tooltip/3.jpg"  title="Mytooltip #3"/> 
</div> 
 
<!--the tooltip --> 
<divid="tooltip"> </div>

JavaScript的设置

$("#tooltipsimg").tooltip({ 
    tip: '#tooltip', 
    offset: [-15, 2], 
    effect: 'slide'} 
 
//use dynamic plugin to take care of the repositioning of the tip 
).dynamic();

HTML设置

我们必须为内容的标签和容器。内容区域被称为“窗格”。一次。一切都可以用CSS样式。

<!--tabs --> 
<ulclass="tabs"> 
    <li><ahref="#page1">Tab 1</a></li> 
    <li><ahref="#page2">Second tab</a></li> 
    <li><ahref="#page3">Third tab</a></li> 
</ul>  
 
<!--tab panes --> 
<divclass="panes"> 
 
    <div> .. content #1..</div> 
    <div> .. content #2..</div> 
    <div> .. content #3..</div> 
 
</div>

JavaScript的设置

$("ul.tabs").tabs("div.panes > div").history();

jQuery UI 是基于 jquery 基础类库开发的开源的 javascript 网页UI代码组件库，包含底层用户交互、动画、特效和可更换主题的可视控件，我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+,Opera 9.6+, 和 Google Chrome。目前最新的版本，使用 jQuery UI 前，需了解 jQuery 核心库使用方法和 HTML、CSS、JavaScript 基础知识.

jQuery UI 践行渐进增强原则，通过标准 HTML 代码保证禁用 JavaScript 环境或移动设备的内容可访问性。利用 JavaScript 代码增强主流浏览器中交互特性，并兼容 WAI-ARIA 标准。各组件“综述”页会提供实例化各组件所需的标准 HTML 结构。

jquery ui主要包含三部分：

1.交互组件，主要包含Draggable,Droppable（拖拽组件）,Resizable（可调整大小组件）,Selectable（选择组件）和Sortable（排序组件）等。这些都是要与鼠标打交道的，所以属于交互组件。

2. 微件，微件是组成页面的一个个小组件包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等。

3.效果库，jquery ui 的效果库提供了更加炫酷的效果，是你的动画效果与众不同更加惊艳，效果库在effect目录本页面就嵌入了一个jquery ui effet效果，是不是很惊艳，下一节开始分析 jquery ui 的目录结构，让你想用什么效果就可以找到什么效果。你可以先看下这篇文章，下载了 jquery UI 如何使用，进行预热。

从这篇文章开始，我们就要开始讲解 jquery ui 中的具体的一些组件的使用方法，本文讲解 jquery ui dialog 的使用：

我们在做交互的时候经常要用到对话框，没错 jquery ui dialog 就是为此而生的,jquery ui dialog 为我们提供了一个简单的接口来实现平常需要大量 javascript 代码来实现的效果，我们可以使用 jquery ui dialog 实现很多的功能，例如做登录、注册和消息提示等功能。

在使用 dialog 组件前，先要将 dialog 所依赖的 js 文件引入到页面中，这些文件包括 js 文件和 css 文件，所有的 dialog 样式的实例代码，在/development-bundle/demos/dialog/目录下，打开源码看到一种类型的 dialog 的使用方法，如果是不明白我在说什么，就先去看看，下载了 jquery UI 后如何使用。如果你还没有jquery ui 代码包，那你就先去下载：各版本 jquery UI 下载.

我们以/development-bundle/demos/dialog/default.html 为例看下jqueryui dialog 的头部文件引入情况

<link rel="stylesheet"href="../../themes/base/jquery.ui.all.css"> <!--载入主题样式-->
<scriptsrc="../../jquery-1.6.2.js"></script>  <!--载入 jquery 核心类库-->
<scriptsrc="../../external/jquery.bgiframe-2.1.2.js"></script>  <!--这个主要是为了兼容 IE6 而载入的一个插件-->
<scriptsrc="../../ui/jquery.ui.core.js"></script> <!--载入 jqueryui 核心类库-->
<scriptsrc="../../ui/jquery.ui.widget.js"></script> <!--载入jquery ui 组件核心类库-->
<scriptsrc="../../ui/jquery.ui.mouse.js"></script> <!--载入 jqueryui 鼠标相关组件-->
<scriptsrc="../../ui/jquery.ui.draggable.js"></script> <!--载入jquery ui 拖动相关组件，主要是为了让 dialog 能够被拖动-->
<script src="../../ui/jquery.ui.position.js"></script><!--载入 jquery ui 位置相关组件，主要是为了让 dialog 能够居中或者控制位置-->
<scriptsrc="../../ui/jquery.ui.resizable.js"></script> <!--载入jquery ui 调整大小相关组件，主要是为了让 dialog 的大小能够通过鼠标来调整-->
<scriptsrc="../../ui/jquery.ui.dialog.js"></script> <!--载入 jqueryui 对话框组件-->
<link rel="stylesheet"href="../demos.css">

这些引入的文件，有些不是必要的，需要根据 dialog 的参数来定，比如你不需要调整 dialog 的大小，你就没有必要载入jquery.ui.resizable.js这个文件，再看看 dialog 是如何被弹出的，

<script>
$(function(){
$("#dialog" ).dialog();
});
</script>

没错，dialog 的使用就是这么简单，当然 dialog 还有很多的参数来帮助你实现很多复杂的功能，我们在后面还会给大家讲解，这些参数的使用基本都很简单

这里给大家提供一个实例来加深印象，jquery ui dialog的简单例子.

jQuery ui框架很多，除了官方提供的jqueryUI（如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用），还有很多第三方提供的ui框架，因官方提供的jquery ui框架体积较大，所以很多人都不喜欢用，但不论是官方提供还是第三方提供，他们都是基于jquery核心类库实现的ui框架。

1、jQuerySmart UI

官网地址http://smartui.chinamzz.com JQuery Smart UI是基于JQuery的Ajax开发的一个jqueryui框架，实现前、后台分离、功能和数据分离，UI层全部使用htm+js+json完成，通过一个统一数据接口与服务端进行数据交换。下载地址http://dl.dbank.com/c0dxum4xi9

2、Liger UI框架

官网地址http://www.ligerui.com/， LigerUI是基于jQuery开发的一系列控件组组成的jquery ui框架，包括表单、布局、表格等等常用UI控件使用LigerUI可以快速创建风格统一的界面效果，下载地址http://ligerui.googlecode.com/

3、DWZ富客户端框架(jQuery RIA framework)

地址http://code.google.com/p/dwz/，DWZ富客户端框架是中国人自己开发的基于jQuery实现的Ajax RIA开源jquery ui 框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。DWZ支持用html扩展的方式来代替javascript代码,基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化.国内很多程序员javascript不熟,大大影响了开发速度. 使用DWZ框架自动邦定javascript效果. 不需要开发人员去关心javascript怎么写, 只要写标准html就可以了. DWZ简单扩展了html标准,给HTML定义了一些特别的class 和attribute. DWZ框架会找到当前请求结果中的那些特别的class 和attribute, 并自动关联上相应的js处理事件和效果.DWZ基于jQuery可以非常方便的定制特定需求的UI组件,并以jQuery插件的形式发布，下载地址http://code.google.com/p/dwz/downloads/list

4、angela UI

官方地址http://code.google.com/p/angela/，angela UI 是基于jQuery的UI,最新版本0.7.1，新增tree, grid,scrollBar, tip等，服务器开启gzip压缩，jquery.angela.min.js：30KB,jquery.angela.min.css：6KB。示例下载包http://angela.googlecode.com/files/angela_0.7.1.zip

以上是目前知道的几个jQuery UI框架，如何还有其他的框架请留言，这里是官方的jquery ui的下载地址请点击此处，jqueryui下载

dreamboycx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery UI 教程

jQuery Tools 是一套非常优秀的 Web UI库，包括 Tab 容器，可折叠容器，工具提示，浮动层以及可滚动容器等等，可以为你的站点带来非同寻常的桌面般体验，这套工具的主要作用是显示内容，这是绝多多数站点最需要的东西。这套令人惊异的 UI库只有 5.59K 大小，基于 MIT 和 GPL两种许可模式。和别的 Web UI库不同，别的 UI 库很多是面
复制链接

扫一扫