由于支持小部件,jQuery UI 现已成为主题实现的行业标准。在本文中,让我们与 Java 架构师 Ken Ramirez 一起深入研究 jQuery UI 平台,学习如何使用 jQuery UI 的本地主题,以及如何为您的站点设计自定义主题。

Ken Ramirez, 资深 Java 架构师/顾问, Axsys Technology Group

Ken Ramirez 的照片Ken Ramirez 拥有超过 24 年的 IT 从业经验,后 12 年他一直致力于 Java 与 JEE 应用程序和网站开发。他为许多大型美国公司提供咨询服务,同时从头开始开发全新的全生命周期应用程序 (full lifecycle application)。他丰富的经验使他能够使用 HTML5、Ajax、JSON、JavaScript、jQuery 和 Adobe Photoshop 等技术开发前端应用程序。而在后端,他使用 Java、JEE、Web 服务、XML、Hibernate、SQL、JDBC 和 Spring 开发企业级网站与应用程序。



2013 年 6 月 28 日

主题并不是一个新概念。当您使用级联样式表 (CSS) 样式与类设计网站的外观时,很可能已经使用了一些主题。使用框架标准化设计方法,可以减少工作量和需要编写的代码量。

jQuery UI 现在已经成为主题实现的行业标准。虽然还存在其他的选择,比如 Dojo(与 Dijit 耦合在一起)或 Ext JS,但 jQuery UI 将主题与小部件的使用结合在一起,小部件是用户与日期选择器或按钮进行交互时需要使用的元素。构成 jQuery UI 主题的文件的内部工作原理就是 CSS 与 JavaScript。但是,已经融入 CSS 与 JavaScript 使用中的思维过程和标准化使得 jQuery UI 成为打造网站外观的优秀平台。

基础知识

本文假设您熟悉 Document Object Model (DOM) 以及它在 HTML 元素之间建立关系的方式。

您还应该熟悉 CSS,特别是 CSS3,因为它是目前流行的 Web 浏览器(和 JavaScript),使用频率最高,而且还是支持程度最高的 CSS 标准。这种脚本语言在运行时将 DOM 元素与 CSS 绑定在一起,提供 jQuery UI(及其主题和小部件)实现的完整用户体验。

请注意,小部件从 DOM 接收它们与其他 HTML 元素之间的关系,并使用 CSS 接收使用已定义类(如前所述)的样式。事件和功能是通过 JavaScript 实现的,JavaScript 负责在运行时操作 DOM 并指定各种 CSS 样式。

jQuery 根据网站应用程序的需要或请求创建和实现小部件。还要注意的是,可以删除小部件,但这样做只会删除小部件产生的外观变动。

jQuery UI 主题

jQuery UI 平台包含两个子框架:小部件框架和 CSS 框架,前者包含 Widget Factory 和一组常用的小部件。Widget Factory 为所有 jQuery UI 小部件提供基础,包括小部件集合中包含的那些常用小部件。创建小部件时,既可以从集合中的任意一个常用小部件开始创建,也可以从头开始创建。了解常用小部件所在的位置之后,就可以在您最喜欢的编辑器中打开它们并查看代码。在编辑器中,既可以通过修改代码来生成自定义的小部件(使用其他任何小部件作为起点),也可以使用相似的结构创建一个小部件。

jQuery UI 主题文件夹结构

在继续查看各种文件及其内容之前,从 jQuery UI 平台(在 参考资料 中可以找到相关链接)下载任意一个主题。下载得到的 ZIP 文件包含三个文件夹:css、js 和 development-bundle。development-bundle 文件夹包含一个名为 themes 的文件夹,该文件夹用于保存开发中 jQuery UI 主题。themes 文件夹还包含一个名为所选/所下载主题(比如 UI lightness)的文件夹,以及一个名为 base 的文件夹。base 文件夹包含您自己的主题的起点。无论是否选择主题,都会下载 base 文件夹。

css 文件夹包含一个名为所下载主题的文件夹。这个主题文件夹包含一个 CSS 文件,它包含应用于所有组件或小部件的 CSS 标记。然而,development-bundle 文件夹还包含一个 themes/[theme-name] 文件夹(此处的 [theme-name] 是所选主题的实际名称),其中包含单独应用于每个组件或小部件的 CSS 文件。这种结构让查找与修改主题的变动变得很简单。图 1 显示了主题文件夹的结构。

图 1. 主题文件夹的结构
图像显示了主题文件夹的结构

图 1 中并未列出 [theme-name] 文件夹中的所有文件,但列出了所有最重要的文件。jquery.ui.all.css 文件导入 jquery.ui.base.css 和 jquery.ui.theme.css 文件,仅使用 jquery.ui.all.css file 文件导入文件十分容易。jquery.ui.base.css 文件导入 jquery.ui.core.css 文件以及来自相同文件夹的其他所有组件和小部件文件(没有显示在图 1 中)。jquery.ui.core.css 文件包含所有小部件文件之间共享的常用类。它为(主题中)所有 jQuery UI 小部件提供了基础的 CSS 类,并为小部件提供常用的可见性与布置。最后一个重要的文件是 jquery.ui.theme.css 文件,它提供主题中所有小部件以及主题本身所共享的常用外观与行为。

jquery.ui.theme.css 文件有三种不同的样式:

  • Container:该样式定义了容器主题,比如 ui-widgetui-widget-contentui-widget-header
  • States:jQuery UI 小部件使用此样式来定义用户与小部件交互时小部件的外观。这些类包括 ui-state-defaultui-state-hoverui-state-active
  • Cues:当应用程序中出现某事件(不由用户操作引起)时,这些类将改变小部件的外观。这些类包括 ui-state-highlightui-state-errorui-state-disabled

常用小部件

本节给出了使用一些常用小部件的示例代码,以构建一个样例应用程序。这个样例包含一个滑动条小部件、一个可以打开对话框的按钮,以及一个每次打开时都会显示滑动条的当前值的对话框。图 2 显示了该应用程序的一个快照。

图 2. 一个使用常用小部件的样例应用程序
图像显示了一个使用常用小部件的样例应用程序

清单 1 列出了 HTML 索引文件。

清单 1. 使用常用小部件的样例应用程序
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Slider Value Example</title>
        <link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css"
        		rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js">
        		</script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body style="font-size: 10px;">
        <div id="sld_value" style="margin-bottom:10px;"></div>
        <button id="btn_value">Display Value</button>
        <div id="dlg_value"></div>
    </body>
</html>

清单 2 显示了相关的 JavaScript 文件 (index.js)。

清单 2. 与样例应用程序相关的 JavaScript 文件
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

初始设置发生在下面的代码中:

<link href="jqueryui/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" src="index.js"></script>

在完成 CSS 中的链接之后,JavaScript 文件被包含进来。

此应用程序中的三个小部件主要使用 <div> 语句进行定义(按钮除外,它在 HTML 中已经有了一个标签)。这些小部件均在下面的代码中定义:

<div id="sld_value" style="margin-bottom:10px;"></div>
<button id="btn_value">Display Value</button>
<div id="dlg_value"></div>

最后,在 JavaScript 代码中,将小部件的实际构造推迟到浏览器完全加载页面的时候,如 清单 3 中所示。

清单 3. 构造小部件
$(document).ready(function(){
    $('#sld_value').slider({ min: 1, max: 10 });
    $("#dlg_value").dialog( { autoOpen: false, title: "Slider Value",
    	open: function(){ 
    		$("#dlg_value").html("The current value is: " + 
    				$("#sld_value").slider( "option", "value" )); 
    	}
    } );
    $("#btn_value").button().click(function(){ $("#dlg_value").dialog("open"); });
});

上面提及的所有小部件均使用这段代码进行构造。对话框和按钮为特定事件指定了功能。例如,系统会告诉按钮的单击事件,它应该在被单击的时候打开对话框。而对于对话框,它被指定为在每次打开时修改文本,以指示滑动条的当前值。

修改小部件的外观有两种方法。可以将值和所有小部件所需的构造器参数传递给构造器。例如:

$("#dlg_popup").dialog( { autoOpen: false, draggable: true });

或者也可以在创建小部件后调用小部件的方法,如下所示:

$("#dlg_popup").dialog({ draggable: false });

大多数常用小部件都有很多可以进行设置的相关选项。另外,如果您选择忽略这些选项,那么小部件会将这些选项设置为默认值,您可以根据需要设置和修改它们。


小部件事件

从根本上讲,小部件就是 JavaScript 对象,所以可以为它们设置在网站应用程序的生命周期内触发的事件。在触发这些事件时,网站提供的 JavaScript 代码捕捉到它们,也可以在小部件中处理它们(这是默认值)。

每个常用小部件的 jQuery UI 团队详细描述了所有小部件的默认实现。下面这段代码说明了如何设置事件的接收:

$( "#dlg_popup" ).dialog({
   drag: function(event, ui) { ... }
});

这个特定的例子连接到 drag 事件中,在拖动对话框时,就会触发这个事件。此例子中显示的省略号 () 是放置用于处理和实现事件代码的个人代码的地方。


小部件方法

方法(与您熟悉的任意语言中的方法相同)与小部件有关联,允许在特定小部件上执行预先编写的功能,让它执行特定操作。下面的示例调用了一个小部件的方法:

$(“#dlg_popup”).dialog("moveToTop”);

从概念上讲,选项与方法是有区别的。但要注意的是,可以使用类似方法的实现修改或获取某个选项的值,如下面的示例所示:

$(“#dlg_popup”).dialog("option", "autoOpen", false);

切换主题

可以在 HTML 与 JavaScript 文件中编写代码,来实现通过下拉菜单动态切换主题的功能。清单 4 显示了为了实现这种功能而对 HTML 源代码所做的修改。

清单 4. 动态改变主题
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
.
.
.
        <script type="text/javascript" 
        		src="http://jqueryui.com/themeroller/themeswitchertool/">
        </script>
.
.
.
    </head>
    <body style="font-size: 12px;">
        <div id="switcher" style="padding-bottom:15px;"></div>
.
.
.
    </body>
</html>

清单 5 显示了 JavaScript 源代码。

清单 5. 用于动态改变主题的 JavaScript 源代码
$(document).ready(function(){
    $('#switcher').themeswitcher();
.
.
.
});

图 3 显示了完成这些修改之后的样例应用程序。

图 3. 修改代码之后的样例应用程序
图像显示了修改代码之后的样例应用程序

再次在您的浏览器中运行 HTML 页面,并查看结果。现在您可以单击下拉列表来更改主题。所选主题会根据需要在后台下载。

使用主题切换器对于非生产性网站(用于测试与查看结果)没有什么影响,但对于生产性网站而言,这样做可能并非明智之举。该工具依靠第三方服务器提供主题,您无法保证用户看到什么样的结果。

而测试 jQuery UI 主题的另一种方法是使用 ThemeRoller 工具,它只能用于 Mozilla Firefox(在 参考资料 中可以找到相关链接)。安装该工具(在 Firefox 中以书签形式存在)后,打开环境,选择主题以查看它们。选择一个主题,然后单击下载链接。下载完毕后,解压缩主题文件夹,将它放在您的 jQuery UI 文件夹中,然后将您的 HTML 文件指向它。

但此工具比简单地切换主题要有用得多。它还支持您构造自定义的主题,这比手动构造它们要轻松许多。


创建独一无二的主题

使用 ThemeRoller 网站(在大多数流行的浏览器中均可与运行;在 参考资料 中可以找到相关链接)可以对现有的 jQuery 主题(作为起点)进行修改,从而创建一个独一无二的主题。这样就不必从头开始创建主题。这还意味着不需要很精通 CSS,该工具允许您动态查看对现有主题和小部件所做的修改。图 4 显示了 ThemeRoller 网站(不要将它与 Firefox 中运行的 ThemeRoller 书签混淆)。

图 4. ThemeRoller 网站
图像显示了 ThemeRoller 网站

单击 Gallery 可以选择任意一个现有主题。这样做可以切换样例小部件用于反映修改的 CSS 样式和图片。单击与主题有关的 Edit 按钮,此时将会显示 "Roll Your Own" 选项卡,您可以在上面修改与主题相关的 CSS 样式。如果没有选择主题进行编辑,而且在没有选择主题的情况下开始使用 "Roll Your Own" 选项卡,那么您将从头开始构造一个主题。

最后,单击 Download theme 下载所选择的主题,自定义主题中包含所有的主题修改。请注意,jQuery UI 及其主题支持众多 CSS3 特性,这意味着支持所有主要的浏览器(Windows Internet Explorer 的早期版本除外)。

ThemeRoller 的 "Roll Your Own" 选项卡的布局很合理,因此您可以快速定位并修改要查找的内容。该选项卡包含以下重要的区域:

  • Font Settings:支持对主题中使用的字体进行一般修改。
  • Corner Radius:控制各种小部件边角的圆整性。
  • Header/Toolbar:为各种小部件中使用的标头提供外观。
  • Content:提供设置来控制小部件的主体。
  • Clickable:控制小部件使用的各种状态。

单击选项时,您会注意到一些与这些主题的构造有关的有趣现象。例如,jQuery UI 主题使用了纹理。要使用这些内容,请单击 ThemeRoller 中的 Header/Toolbar 区域,然后单击中间的 colored 按钮。此时将会显示一个下拉列表,其中包含可以选择的图案。所选纹理将与您选择的背景颜色融合在一起,生成标题和工具栏使用的图案。这只是纹理的一种用法。jQuery UI 主题中到处都使用了纹理。例如,如果修改 "Clickable: default state" 中的纹理,就会看到这些修改对所选主题中按钮产生的影响。

jQuery UI 主题的一个有趣特性是利用了突出显示和色差(也称为视觉线索)。ThemeRoller 可以完全控制这些视觉线索呈现在用户面前的效果。纹理、背景颜色、提纲边角、文本颜色,甚至包括图标颜色(如果线索中显示图标)都可以修改。这些样式的名称均显示在 ThemeRoller 中,因此只要在自己的网站中使用这些名称,便可根据需要将这些样式应用于显示给用户看的文本。

修改各种设置均会改变浏览器中的 URL。清单 6 提供了一个 URL 作为示例。

清单 6. ThemeRoller URL 样例
http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-serif&
   fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&
   bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&
   bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&
   iconColorHeader=fadc7a&bgColorContent=feeebd&
   bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&
   borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&
   bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&
   bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&
   iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_wave.png
   &bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&
   iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.png&
   bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&
   iconColorActive=eb990f&bgColorHighlight=f5d361&
   bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&
   borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&
   bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&
   bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&
   iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&
   bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&
   bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&
   thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&
   cornerRadiusShadow=8px

保存并稍后恢复这个 URL,以便回过头来进一步修改设置。例如,完成修改后复制 URL,并将其粘贴到某个地方安全保存。现在,关闭浏览器(或包含 ThemeRoller 网站的浏览器选项卡),并使用复制的 URL 重新打开它。您可以看到,所有的修改都将恢复,为进一步修改做好准备。


结束语

关于 jQuery UI 的内部构件还有很多内容可供讨论,但在开始使用 jQuery UI 主题之前,应该掌握一些必要的基础知识。您已经了解了文件夹和文件的结构,它们允许您修改一个主题。您可以查看或使用这些文件,以此作为起点,在需要的时候创建自己的主题。

本文还介绍了 ThemeRoller 和相关的网站页面,支持修改现有主题或从头创建新主题。最后,您可了解在 ThemeRoller 网站上保存和恢复主题修改的过程。

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, Java technology
ArticleID=935106
ArticleTitle=使用 jQuery UI 主题
publish-date=06282013