梳理jQuery UI

原创 Aimeelin 随笔 Javascript 1247阅读 2016-03-09 10:54:09 举报
一、jQuery UI 1946bv1946伟德游戏下载 (1)jQuery UI简介 jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。
jQuery UI 包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。
jQuery UI 特性
简单易用:
继承 jQuery 简易使用特性,提供高度抽象接口,短期改善网站易用性。
开源免费:
采用 MIT & GPL 双协议授权,轻松满足自由产品至企业产品各种授权需求。
广泛兼容:
兼容各主流桌面浏览器。包括IE 6+、Firefox 2+、Safari 3+、Opera 9+、Chrome 1+。
轻便快捷:
组件间相对独立,可按需加载,避免浪费带宽拖慢网页打开速度。
标准先进:
支持 WAI-ARIA,通过标准 XHTML 代码提供渐进增强,保证低端环境可访问性。
美观多变:
提供近 20 种预设主题,并可自定义多达 60 项可配置样式规则,提供 24 种背景纹理选择。
开放公开:
从结构规划到代码编写,全程开放,文档、代码、讨论,人人均可参与。
强力支持:
Google 为发布代码提供 CDN 内容分发网络支持。
完整汉化:
开发包内置包含中文在内的 40 多种语言包。
缺点、不足:
1.代码不够健壮:缺乏全面的测试用例,部分组件 Bugs 较多,不能达到企业级产品开发要求。
2.构架规划不足:组件间 API 缺乏协调,缺乏配合使用帮助。
3.控件较少:相对于 Dojo、YUI、Ext JS 等成熟产品,可用控件较少,无法满足复杂界面功能要求。
(2)下载
下载地址:http://jqueryui.com/download/
下载生成器(Download Builder)页面的第一栏列出了 jQuery UI 所有的 JavaScript 组件分类:核心(UI Core)、交互部件(Interactions)、小部件(Widgets)和效果库(Effects)。
(3)jQuery UI 使用
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
一旦您引用了这些必要的文件,您就能向您的页面添加一些 jQuery 小部件。比如,要制作一个日期选择器(datepicker)小部件,您需要向页面添加一个文本输入框,然后再调用.datepicker(),如下所示:
HTML:
<input type="text" name="date" id="date" />
JavaScript:
$("#date").datepicker();
(4)jQuery UI 定制 jQuery UI 基础:使用选项
jQuery UI 中的每个插件都有一个默认配置,默认配置值一般是根据最基本最常见的使用情况设置的。如果您想要让某个插件设置成非默认值,您可以使用 "options" 重写它的默认设置。选项是一组属性,作为参数传递给 jQuery UI 小部件。例如,滑块(slider)小部件具有 orientation 选项,该选项允许您指定滑块是水平的还是垂直的。为了设置滑块的该选项,您只需将它作为一个参数传递,如下所示:
$( "#mySliderDiv" ).slider({
orientation: "vertical"
});
您可以传递更多不同的选项,每个选项之间用逗号分隔:
$( "#mySliderDiv" ).slider({
orientation: "vertical",
min: 0,
max: 150,
value: 50
});
视觉定制:设计一个 jQuery UI 主题
如果您想要设计自己的主题,jQuery UI 提供了一个非常完美的用于主题定制的应用程序,这就是 ThemeRoller。具体定制请访问:http://jqueryui.com/themeroller/
ThemeRoller 为所有使用 jQuery UI 小部件设计的元素提供了一个自定义接口。当您调整左栏中的"levers",右栏中的小部件将根据您的设计进行显示ThemeRoller 的 Gallery 选项卡提供了一些与设计主题,与下载生成器(Download Builder)页面提供的一样。您可以基于这些主题做调整,或者直接下载。
(5)jQuery UI 工作原理
jQuery UI 包含了许多维持状态的小部件(Widget),因此它与典型的 jQuery 插件使用模式略有不同。其安装方式与大部分jQuery插件的安装方式类似,jQuery UI 的小部件是基于 部件库(Widget Factory) 创建的,小部件库提供了通用的 API。所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget)。以进度条(progressbar)小部件为例。
安装
为了跟踪部件的状态,我们首先介绍一下小部件的全生命周期。当小部件安装时,生命周期开始。我们只需要在一个或多个元素上调用插件,即安装了小部件。
$( "#elem" ).progressbar();
这将会初始化 jQuery 对象中的每个元素,在本例中,元素 id 为 "elem"。因为我们调用无参数的 .progressbar() 方法,小部件则会按照它的默认选项进行初始化。我们可以在安装时传递一组选项,这样既可重写默认选项。
$( "#elem" ).progressbar({ value: 20 });
安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。
选项是小部件状态的组成部分,所以我们也可以在安装后再进行设置选项。我们将在后续的 option 方法中介绍这部分内容。
方法 既然小部件已经初始化,我们就可以查询它的状态,或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法,我们可以向 jQuery 插件传递方法的名称。例如,为了在进度条(progressbar)小部件上调用 value 方法,我们应该使用:
$( "#elem" ).progressbar( "value" );
如果方法接受参数,我们可以在方法名后传递参数。例如,为了传递参数 40 给 value 方法,我们可以使用:
$( "#elem" ).progressbar( "value", 40 );
就像 jQuery 中的其他方法一样,大部分的小部件方法为链接返回 jQuery 对象。
$( "#elem" )
.progressbar( "value", 90 )
.addClass( "almost-done" );
公共的方法
每个小部件都有它自己的一套基于小部件所提供功能的方法。然而,有一些方法是所有小部件都共同具有的。
option
正如我们前面所提到的,我们可以在初始化之后通过 option 方法改变选项。例如,我们可以通过调用 option 方法改变 progressbar(进度条)的 value 为 30。
$( "#elem" ).progressbar( "option", "value", 30 );
请注意,这与之前我们调用 value 方法的实例有所不同。在本实例中,我们调用 option 方法,改变 value 选项为 30。
我们也可以为某个选项获取当前的值。
$( "#elem" ).progressbar( "option", "value" );
另外,我们可以通过给 option 方法传递一个对象,一次更新多个选项。
$( "#elem" ).progressbar( "option", {
value: 100,
disabled: true
});
您也许注意到 option 方法有着与 jQuery 代码中取值器和设置器相同的标志,就像 .css() 和 .attr()。唯一的不同就是您必须传递字符串 "option" 作为第一个参数。
disable
disable 方法禁用小部件。在进度条(progressbar)实例中,这会改变样式让进度条显示为禁用状态。
$( "#elem" ).progressbar( "disable" );
调用 disable 方法等同于设置 disabled 选项为 true。
enable
enable 方法是 disable 方法的对立面。
$( "#elem" ).progressbar( "enable" );
调用 enable 方法等同于设置 disabled 选项为 false。
destroy
如果您不再需要小部件,那么可以销毁它,返回到最初的标记。这意味着小部件生命周期的终止。
$( "#elem" ).progressbar( "destroy" );
一旦您销毁了一个小部件,您就不能在该部件上调用任何方法,除非您再次初始化这个小部件。如果您要移除元素,可以直接通过 .remove(),也可以通过 () 或 .empty() 修改祖先,小部件会自动销毁。
widget
一些小部件生成包装器元素,或与原始元素断开连接的元素。在下面的实例中,widget 将返回生成的元素。在进度条(progressbar)实例中,没有生成的包装器,widget 方法返回原始的元素。
$( "#elem" ).progressbar( "widget" );
事件 所有的小部件都有跟他们各种行为相关的事件,用于在状态改变时通知您。对于大多数的小部件,当事件被触发时,名称以小部件名称为前缀。例如,我们可以绑定进度条()的 change 事件,一旦值发生变化时就触发。
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
每个事件都有一个相对应的回调,作为选项进行呈现。我们可以使用进度条(progressbar)的 change 回调,这等同于绑定 progressbarchange 事件。
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}
});
公共的事件
大多数事件是针对特定的小部件,所有的小部件都有一个公共的 create 事件。该事件在小部件被创建时即被触发。
二、jQuery UI 主题 所有的 jQuery UI 插件都允许开发人员无缝集成 UI 小部件到他们网站或应用程序的外观和感观。每个插件通过 CSS 定义样式,且包含了两层样式信息:标准的 jQuery UI CSS 框架 样式和具体的插件样式。
jQuery UI CSS 框架提供了语义表示的类,用来表明小部件内元素的角色,比如标题、内容或可点击区域。这些在所有的小部件中都是一致的,一个可点击的 tab(标签页)、accordion(折叠面板)或 button(按钮)都有相同的 ui-state-default class,用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时,这个 class 就变成 ui-state-hover,当选中这些元素时则变成 ui-state-active。这些 class 的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。
CSS 框架样式封装在一个单独的文件中,名为 ui.theme.css。这个文件时通过 ThemeRoller 应用程序来修改的。框架样式只包含影响外观和感观的属性,只要是颜色、背景图像、图标等。所以这些是 "安全的" 样式,不会影响到插件的功能。这种分隔意味着开发人员可以通过在 theme.css 文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者 bug 修复将是可用的,这些不通过修改即可与主题一起使用。
由于框架样式只覆盖了外观和感观,所以还需要包含具体的插件样式表,这些样式表包括了所有额外的让小部件具有功能性的结构样式规则,比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于 themes/base 文件夹内,且配合插件进行命名,比如 "jquery.ui.accordion.css"。这些样式必须认真编辑,因为它们与脚本一起提供了框架样式的覆盖。
我们鼓励所有的开发人员创建 jQuery 插件,jQuery UI CSS 框架使得最终用户更容易定制主题和使用插件。
主题化
下面列出了三种主题化 jQuery UI 插件的一般方法:
下载 ThemeRoller 主题:最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的 ui.theme.css 文件和一个包含了所有必需的背景图像及图标精灵的 images 文件夹。这个方法是最早的创建和维护主题的方式,但是它对 ThemeRoller 中提供的选项限制了自定义。
修改 CSS 文件:为了对外观和感观做进一步的控制,您可以选择从默认主题(Smoothness)开始,或者从一个由 ThemeRoller 生成的主题开始,然后调整 ui.theme.css 文件,或者任意一个独立插件的样式表。例如,您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值,或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围,您甚至可以在一个 UI 中同时使用多个主题。为了易于维护,建议只更改 ui.theme.css 文件和图像。
重新编写自定义的 CSS:为了最大程度地控制外观和感观,可以重新开始编写每个插件的 CSS,而不使用框架类或者特定的插件样式表。如果想要的外观和感观不能通过修改 CSS 来实现或者使用高度自定义的标记,那么就可以采用这个方法。这个方法要求在 CSS 方面有深厚的专业知识,且要求手动更新未来的插件。
(1)jQuery UI ThemeRoller ThemeRoller 简介
ThemeRoller 是一个 Web 应用程序,为 jQuery UI 设计和下载自定义主题提供了直观的界面。您可以访问 jQuery UI ThemeRoller 进行主题定制。
jQuery UI ThemeRoller 是由波士顿的 Filament Group, Inc 设计和开发的。
ThemeRoller 界面
ThemeRoller 的界面分为不同面板,各面板分别是全局字体和圆角半径设置、小部件容器样式、可点击元素的互动状态,及覆盖和阴影的各种样式。这些面板允许配置各种 CSS 属性,比如字体尺寸、颜色、粗细、背景颜色和纹理、边框颜色、文本颜色、图标颜色、圆角半径,等等。
主题馆(Gallery):预先设计主题
ThemeRoller 主题可以通过永久链接 URL 进行查看,它包含一些预先设计的主题可供选择。主题馆(Gallery)可以通过位于应用程序界面顶端的标签栏进行访问。从主题馆(Gallery)中,您可以预览和下载主题,甚至可以选择一个主题,然后切换到 "Roll Your Own" 标签页进行调整。
下载主题
当您设计完主题后,您可以下载主题以便在项目中进行使用。ThemeRoller 在顶部有一个 "Download theme(下载主题)" 按钮,可以生成一个 zip 压缩包,包含了所有的主题相关文件。下载文件中的图像是按照您的规格进行生成的,并保存为高质量的 PNG 文件。
您的主题将包含图像和 CSS,组成了 jQuery UI CSS 框架的自定义版本,包含了所有插件的图像和 CSS。
在项目中按照下载的主题
一旦下载了主题,解压缩后,您将看到一个名为 themes 的文件夹。该文件夹包括了主题所需的 CSS 和图像。复制主题文件夹到您的项目中,并在页面中链接 themes/all.css 文件。
创建自定义的 "ThemeRoller-Ready" 组件
ThemeRoller 生成了一个 jQuery UI CSS 框架的自定义版本,用于开发您自己的 ThemeRoller-ready jQuery 组件。通过这个框架生成的类被设计来提供通用的用户界面的设计情况,包括状态、图标以及各种辅助类。
ThemeRoller 链接
1946bv1946伟德游戏下载:开发您自己的 jQuery "ThemeRoller-Ready" 组件,Filament Group:
https://www.filamentgroup.com/lab/developer-your-own-jquery-themeroller-ready-components
ThemeRoller 简介:设计 & 下载 jQuery UI 自定义主题,Filament Group:
https://www.filamentgroup.com/lab/introducing-themeroller-design-download-custom-themes-for-jquery-ui
(2)jQuery UI CSS 框架 API jQuery UI CSS 框架
jQuery UI 包含了一个强大的 CSS 框架,为了创建自定义 jQuery 小部件而设计的。框架包含了通用的用户界面所需的类,且可使用 jQuery UI ThemeRoller 进行维护。通过使用 jQuery UI CSS 框架创建您自己的 UI 组件。您需采用共享标记公约,以便在插件社区的代码集成。
框架类
下面的 CSS 类根据样式是否是固定的结构化的,或者是否是可主题化的(颜色、字体、背景等),分别定义在 ui.core.css 和 ui.theme.css 两个文件中。这些类被设计来用于用户界面元素,以便获得整个应用程序的视觉一致性,可通过 jQuery UI ThemeRoller 对组件进行主题化。
布局助手
.ui-helper-hidden:对元素应用 display: none。
.ui-helper-hidden-accessible:对元素应用访问隐藏(通过页面绝对定位)。
.ui-helper-reset:UI 元素的基本样式重置。重置的元素比如:padding、margin、text-decoration、list-style,等等。
.ui-helper-clearfix:对父元素应用浮动包装属性。
.ui-helper-zfix:对 <iframe> 元素应用 iframe "fix" CSS。
小部件容器
.ui-widget:对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸,同时也对自表单元素应用相同的字体和 1em 的字体尺寸,以应对 Windows 浏览器中的继承问题。
.ui-widget-header:对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。
.ui-widget-content:对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。(可应用到标题的父元素或者同级元素)
交互状态
.ui-state-default:对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。
.ui-state-hover:当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-focus:当键盘聚焦在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。
.ui-state-active:当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。
交互提示 Cues
.ui-state-highlight:对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。
.ui-state-error:对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。
.ui-state-error-text:对只有无背景的错误文本颜色应用的 Class。可用于表单标签,也可以对子图标应用错误图标颜色。
.ui-state-disabled:对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。
.ui-priority-primary:对第一优先权的按钮应用的 Class。应用粗体文本。
.ui-priority-secondary:对第二优先权的按钮应用的 Class。应用正常粗细的文本,对元素应用轻微的透明度。
图标 状态和图像
.ui-icon:对图标元素应用的基本 Class。设置尺寸为 16px 方块,隐藏内部文本,对 "content" 状态的精灵图像设置背景图像。注意: .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如,ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。
图标类型
在声明 .ui-icon class 之后,接着您可以声明一个秒速图标类型的 class。通常情况下,图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。
例如,一个指向右侧的三角形图标,如下所示: .ui-icon-triangle-1-e
jQuery UI 的 ThemeRoller 在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。
其他视觉效果 圆角半径助手
.ui-corner-tl:对元素的左上角应用圆角半径。
.ui-corner-tr:对元素的右上角应用圆角半径。
.ui-corner-bl:对元素的左下角应用圆角半径。
.ui-corner-br:对元素的右下角应用圆角半径。
.ui-corner-top:对元素上边的左右角应用圆角半径。
.ui-corner-bottom:对元素下边的左右角应用圆角半径。
.ui-corner-right:对元素右边的上下角应用圆角半径。
.ui-corner-left:对元素左边的上下角应用圆角半径。
.ui-corner-all:对元素的所有四个角应用圆角半径。
覆盖 & 阴影
.ui-widget-overlay:对覆盖屏幕应用 100% 宽度和高度,同时设置背景颜色/纹理和屏幕不透明度。
.ui-widget-shadow:对覆盖应用的 Class,设置了不透明度、上偏移/左偏移,以及阴影的 "厚度"。厚度是通过对阴影所有边设置内边距(padding)进行应用的。偏移是通过设置上外边距(margin)和左外边距(margin)进行应用的(可以是正数,也可以是负数)。
(3)jQuery UI 设计主题 文件结构
主题是以特定的方式来增加他们的易用性。通常,文件目录结构如下所示:
themename/ – 您的主题必须完全包含在一个单独的以主题名称命名的文件夹内。
themename/themename.css – 这是基本的 CSS 文件。无论使用了哪个插件,该文件都必须在每个使用主题的页面中引用。该文件应该是轻量级的,只包括要点。
themename/themename.pluginname.css – 您支持的每个插件都需要一个 CSS 文件。插件的名称应直接包含在文件名中。例如,如果您为 tabs(标签页)插件进行主题化,则有:themename.tabs.js。
themename/img.png – 您的主题可以包含图像。它们可以根据您的喜好进行命名,这里没有特定的命名惯例。
如需了解主题文件结构是如何完成的实例,请访问 jQuery UI 基本主题:https://github.com/jquery/jquery-ui/tree/master/themes/base
三、jQuery UI 部件库(Widget Factory)
jQuery UI 部件库(Widget Factory)是一个可扩展的基础,所有的 jQuery UI 小部件都是在上面进行创建的。使用部件库(Widget Factory)来创建插件,提供了方便的状态管理,同时也为一些常见的任务提供了便捷,比如暴露插件方法,实例化后改变选项等。
评论 ( 0 )
最新评论
暂无评论
赶紧努力消灭 0 回复