jquery ui 主题_使用jQuery UI主题

主题不是一个新概念。您可能已经使用级联样式表（CSS）样式和类推出了一些样式，以格式化网站的外观。使用框架可以使方法标准化，并减少需要编写的工作量和代码量。

jQuery UI现在是主题实现的行业标准。还有其他选择，例如Dojo（与Dijit耦合）或Ext JS，但是jQuery UI结合了主题和小部件的使用，这些小部件是用户与日期选择器或按钮交互的元素。在剖析构成jQuery UI主题的文件的内部工作原理时，您所发现的仅是CSS和JavaScript。但是，正是CSS和JavaScript的使用已经融入了思维过程和标准化，使得jQuery UI成为构建网站外观的绝佳平台。

基础

本文假定您熟悉文档对象模型（DOM）及其如何在HTML元素之间建立关系。

您还应该熟悉CSS（特别是CSS3，因为它是当今流行的Web浏览器中当前和最受支持CSS标准）和JavaScript。该脚本语言在运行时将DOM元素与CSS绑定在一起，以提供jQuery UI及其主题和小部件实现的完整用户体验。

请注意，小部件从DOM接收与其他HTML元素的关系，并且使用定义的类（如前所述）和CSS接收其样式。这些事件和功能是通过JavaScript实现的，JavaScript在运行时操纵DOM并分配各种CSS样式。

jQuery根据需要或根据网站应用程序的请求创建并实现小部件。另请注意，小部件可以被破坏。这样做只会破坏小部件应用的视觉更改。

jQuery UI主题

jQuery UI平台包含两个子框架：小部件框架（包含Widget Factory和一组常用小部件）以及CSS框架。 Widget Factory为所有jQuery UI Widget提供了基础，包括Widget中包含的那些常见Widget。创建窗口小部件时，请使用集合中的一种常见窗口小部件作为起点，或者从头开始创建一个。一旦知道了通用小部件在哪里，就可以在您喜欢的编辑器中打开其中的任何一个并查看代码。从那里，修改此代码并生成自定义的小部件（使用其他小部件之一作为起点）或创建具有类似结构的小部件。

jQuery UI主题文件夹结构

在继续查看各种文件及其内容之前，请从jQuery UI平台下载主题之一（请参阅参考资料中的链接）。下载的ZIP文件包含三个文件夹：css，js和development-bundle。 development-bundle文件夹包含一个名为主题的文件夹，该文件夹用于保存正在开发的jQuery UI主题。主题文件夹依次包含一个具有所选/下载主题名称的文件夹（例如UI亮度）以及一个名为base的文件夹。此文件夹包含您自己的主题的起点。无论选择什么主题，总是会下载它。

css文件夹包含一个文件夹，其中包含下载的主题的名称。该主题文件夹包含一个CSS文件，其中包含所有组件或小部件CSS标记。但是，development-bundle文件夹还包含一个theme / [theme-name]文件夹（其中[theme-name]是所选主题的实际名称），其中包含每个组件或小部件的单独CSS文件。这种结构使查找和修改自己主题的更改变得更加容易。图1显示了主题文件夹的结构。

图1.主题文件夹的结构

并非[theme-name]文件夹中的所有文件都在图1中列出，但重要的文件在此处。 jquery.ui.all.css文件导入jquery.ui.base.css和jquery.ui.theme.css文件，从而仅使用jquery.ui.all.css文件即可轻松导入文件。 jquery.ui.base.css文件从同一文件夹（图1中未显示）导入jquery.ui.core.css文件以及所有其他组件和窗口小部件文件。 jquery.ui.core.css文件包含所有小部件文件共享的通用类。它提供了所有jQuery UI小部件（在主题内）的基本CSS类，以及小部件的通用可见性和位置。最后一个重要文件是jquery.ui.theme.css文件，该文件提供了主题中所有小部件以及主题本身共享的常见外观和行为。

jquery.ui.theme.css文件具有三种不同类型的样式：

容器 -这种样式定义了容器主题，例如ui-widget ， ui-widget-content或ui-widget-header 。
状态 -jQuery UI小部件使用此样式类型来定义小部件在用户与其交互时的外观。这些类包括ui-state-default ， ui-state-hover和ui-state-active 。
提示 -由于应用程序中发生了某些事情（而不是用户的操作），因此这些类会更改小部件的外观。这些类包括ui-state-highlight ， ui-state-error和ui-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"); });
});

每个已经提到的窗口小部件都使用此代码构造。对话框和按钮都已分配给特定事件的功能。例如，按钮的click事件被告知在单击时应打开对话框。对于对话框，将直接更改其文本以指示滑块的当前值，该滑块每次打开时都会执行。

有两种更改窗口小部件外观的方法。您可以将值以及该窗口小部件的任何必需的构造函数参数传递给构造函数。例如：

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

或者，您可以在小部件创建后在其上调用方法，如下所示。

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

大多数通用小部件都有许多可以设置的关联选项。此外，如果您选择忽略这些选项，则小部件会将它们设置为默认值，从而允许您设置和更改所需的内容。

小部件事件

由于小部件从根本上来说是JavaScript对象，因此可以使用在网站应用程序生存期内触发的事件来设置小部件。当这些事件触发时，它们会被您网站提供JavaScript代码捕获或在小部件中处理（默认）。

jQuery UI团队针对每个常见小部件都很好地记录了所有小部件默认行为的实现。但是，您可以注入自己的代码来处理一个或多个所选小部件的事件。这是设置事件接收的代码示例：

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

此特定示例与drag事件挂钩，该事件在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="//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网站

单击图库可让您选择任何现有主题。这样做会切换示例窗口小部件用来反映更改CSS样式和图像。单击与主题关联的“ 编辑”按钮，将带您进入“滚动自己的”标签，您可以在其中更改与主题关联CSS样式。如果您没有选择要编辑的主题，而是从“ Roll Your Own”选项卡开始而未选择主题，那么您只是从头开始构建主题。

最后，单击下载主题将所选主题下载为包含所有主题修改的自定义主题。请注意，jQuery UI及其主题支持许多CSS3功能，这意味着所有主要浏览器均受支持（Windows Internet Explorer的早期版本除外）。

ThemeRoller的“自己动手制作”标签井井有条，因此您可以快速查找和更改所需的内容。该选项卡包含以下重要部分（除其他外）：

字体设置 -允许对整个主题中使用的字体进行常规更改。
圆角半径 -控制各种小部件的圆角倒圆（或缺少圆角）。
标头/工具栏 -提供各种小部件中使用的标头的外观。
内容 -提供设置以控制小部件的主体。
可点击 -控制小部件使用的各种状态。

单击选项时，您会注意到有关这些主题构造的一些有趣的事情。例如，jQuery UI主题利用了纹理。要查看它们的使用情况，请单击ThemeRoller中的Header / Toolbar 。然后单击中间的彩色按钮。将显示一个下拉托盘，其中包含可供选择的样式。选定的纹理与您选择的背景颜色结合在一起，以产生标题和工具栏使用的图案。这只是纹理的一种用途。整个jQuery UI主题中还有其他主题。例如，在“可点击：默认状态”中修改纹理，以查看更改如何影响所选主题中的按钮。

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网站上探讨了保存和恢复主题修改的过程。

翻译自: https://www.ibm.com/developerworks/java/library/wa-jquerythemes/index.html