在jQuery Mobile中创建自定义主题

  • 所需知识:HTML,一些CSS和JavaScript
  • 要求:只有你最喜欢的HTML编辑器和浏览器
  • 项目时间:两个小时
  • 支持文件

这是第11章的编辑摘录jQuery Mobile Web Development Essentials,由Packt Publishing出版。

JQuery Mobile中的主题对于开发人员来说简单易用,但在幕后非常精细。幸运的是,很少有时间你需要知道为你做的一切。但是,我们有点时间了解它是如何工作的。

开箱即用的jQuery Mobile带有一个由五个颜色样本组成的主题集,每个颜色样本与AE的一个字母相关联。该主题包含一系列基本CSS类,可以随意应用于几乎任何元素,它们包含宽度,高度,边框半径,阴影的全局设置。各个样本包含有关颜色,字体等的特定信息。

可以将额外的样品添加到FZ的五个原始样本中,或者可以随意更换或覆盖原始样本。该系统允许总共26个不同的样本,允许数百万种主题颜色,样式和图案的可能组合。通过添加带有所需主题字母的data-theme属性,将jQuery Mobile主题应用于所选元素:

开发人员通常会在应用样式时选择使用data-theme属性方法,但也可以将CSS类名直接附加到页面元素以进行更精细的控制。有一些主要前缀允许这种灵活性。

01.酒吧(.ui-bar-?)

条形码前缀通常应用于页眉,页脚和其他具有高重要性的区域:

02.内容块(.ui-body-?)

内容块通常应用于预期会出现段落文本的区域。它的颜色有助于确保最大的可读性,并在其上放置文字颜色:

03.按钮和列表视图(.ui-btn-?)

按钮和列表视图是jQuery Mobile库中最重要的两个元素,您可以放心,团队花时间将它们弄好。 .ui-btn前缀还包括up,down,hover和active状态的样式:

04.混合和匹配样本

关于jQuery Mobile中主题的一个好处是,除非另有说明,否则子元素继承自其父元素。这意味着如果您在页眉或页脚栏中放置一个没有自己的数据主题属性的按钮,该按钮将使用与其父级相同的主题。邪恶的呃?

使用一个样本和使用另一个样本的元素的子项来放置元素也是完全可以接受的,甚至是鼓励的。这可以帮助元素更突出,或匹配应用程序的不同部分,或开发人员选择的任何推理。这是可能的,而且更容易。只需在标题栏中放置一个按钮(或其他元素),并为其指定自己的数据主题属性:

05.全站点活跃状态

jQuery Mobile还为所有元素应用全局活动状态。此活动状态用于按钮,表单元素,导航以及需要指示当前选定内容的任何位置。更改此颜色值的唯一方法是通过CSS设置(或覆盖)它。活动状态的CSS类名称为.ui-btn-active:

06.默认图标

jQuery Mobile套装中包含18个图标,可满足开发人员的各种需求。图标集在透明上是白色的,jQuery Mobile覆盖在半透明的黑色圆圈上,以提供与所有样本的对比。要添加图标,请使用所需图标的名称指定data-icon属性:

jQuery Mobile还提供了使用data-iconpos =“[top,right,bottom,left]”属性在按钮的顶部,右侧,底部或左侧放置图标的功能,左侧是默认位置。通过指定data-iconpos =“notext”,开发人员还可以单独显示图标而不显示文本:

部署自定义图标也是可能的,本章后面将对此进行介绍。

07.创建和使用自定义主题

我们已经讨论了jQuery Mobile中强大的主题功能。开发一个简洁优雅风格的丰富移动网站变得微不足道。更强大的是能够创建自己的样本库,可用于使您的应用程序或网站真正独一无二。可以通过以下两种方式之一来开发您自己的主题:

  1. 下载并打开现有的jQuery Mobile CSS文件并编辑您的内容。
  2. 将您的Web浏览器指向用于jQuery Mobile的ThemeRoller

我们将专注于选项二,因为我们说实话,为什么在点击,点击并拖动你的方式进入一个新的主题,在10分钟内充满色板时,趟过所有的CSS?让我们来看看ThemeRoller的用途。

08.什么是ThemeRoller?

用于jQuery Mobile的ThemeRoller是为jQuery UI项目编写的基于Web的应用程序的扩展。它允许用户使用拖放颜色管理在几分钟内快速组装一个完整的样本主题。它具有交互式预览功能,您可以立即查看更改对主题的影响。它还有一个内置的检查工具,可以帮助您深入了解细节(如果您需要)。它还与Adobe®Kuler®(一种色彩管理工具)集成。您可以在完成后下载主题,也可以通过自定义URL与他人共享,然后您可以重新导入过去的主题以进行最后一分钟的调整。它是一个强大的工具,是jQuery Mobile的完美补充。

五个默认样本的标志之一是jQuery Mobile团队花了相当多的时间研究可读性和可用性。样本范围从最高对比度(A)到最低对比度(E)。在一个主题中,对比度最高的区域是页面上最突出的区域。这包括标题(和listview标题)和按钮。在创建自己的主题时,最好记住这一点。我们总是希望专注于我们的应用程序中的可用性吗?如果由于颜色选择不佳而没有人可以阅读,那么光滑的应用程序有什么用呢?

09.使用ThemeRoller

加载ThemeRoller时你会看到的第一件事是一个漂亮的启动画面,然后是一个有用的入门屏幕:

“入门”屏幕提供了一些有用的提示,因此在单击“获取滚动”按钮之前,请务必先浏览它:

在完成所有启动屏幕之后,您将看到主界面:

ThemeRoller分为四个主要区域:预览,颜色,检查器和工具。其中每个都包含我们需要审查的重要功能。我们将从预览部分开始。

10.预览

除非您正在加载现有主题,否则预览区域将呈现三个完整,相同且交互式的jQuery Mobile页面,其中包含各种小部件:

将鼠标移到它们上面,您将看到每个页面都正常运行。每页上的标题都包含一个字母,指示哪个样本控制其外观。

11.颜色

在页面顶部,您将看到一系列彩色芯片,以及两个滑块控件和一个切换按钮。在右边,你会看到另外十个颜色的芯片应该是空白的。这些专用于最近使用的颜色,在您选择颜色之前将为空:

彩色芯片下面是两个标有亮度和饱和度的滑块。亮度滑块调整一系列色样的浅色和深色调,而饱和度则使色彩更多或更少,充满活力。总之,用户应该能够近似接近他们选择的任何颜色。要使用Kuler中的颜色,请单击标记为Adobe Kuler样本的文本链接。

可以将每个颜色芯片拖动到预览区域内的任何元素上。这使得样本集的开发非常容易。请注意,许多jQuery Mobile样式重叠,例如,页面顶部的标题栏接收与listview标题相同的样式。根据需要调整颜色,然后将每个芯片拖到页面上的元素上。请记住,每个页面都是自己的样本,因此请注意选择混合颜色的方式。

12.检查员

界面的最左侧是检查员面板,分为两部分。顶部包含允许开发人员下载主题,导入现有主题以及共享主题链接的按钮。对于没有购买此书的人,还有一个帮助链接:

底部包含一系列标签为Global,A,B,C和+的标签。这些选项卡中的每一个都包含一个折叠面板,其中包含单个样本的所有值,但适用于所有样本的“全局”选项卡除外。

选择“全局”选项卡,然后单击“活动状态”,手风琴面板将展开以显示整个主题的活动状态设置。选项包括文本颜色,文本阴影,背景和边框。更改全局中的值会导致每个当前(和将来)样本反映新设置。

可以通过两种方式将附加样本添加到主题中。单击检查器顶部的+选项卡可在主题的最后位置添加新样本。您还可以通过单击预览区域底部的“添加样本”按钮来添加新样本。通过选择要删除的样本的选项卡,然后单击位于样本名称右侧的“删除”链接,可以删除样本。请注意,从堆栈顶部删除样本将导致重命名剩余的样本。

13.工具

在页面的最顶部有一系列按钮。这些按钮允许您执行我们稍后将要介绍的各种任务,但首先,仔细查看按钮本身:

您将注意到以下按钮:一个开关,允许您在1.1(当前)版本和1.0.1版本之间切换,撤消/重做以及检查器的切换按钮。将此切换设置为打开可以检查预览区域中的任何窗口小部件。将鼠标悬停在窗口小部件上会突出显示带有蓝色框的元素。单击该元素将使“检查器”区域中的折叠菜单展开以显示特定于该元素的设置。

还有四个附加按钮,您可以下载主题,导入或升级以前创建的主题,与他人共享主题以及帮助按钮。

14.为Notekeeper创建主题

现在我们熟悉ThemeRoller界面,我们如何继续创建我们的第一个主题?让我们创建一个我们实际用于之前构建的Notekeeper应用程序的程序,而不是用抽象构建一个。让我们简单地通过修改jQuery Mobile附带的现有主题之一来开始。该团队非常友好地允许用户导入默认主题作为新主题的起始位置,因此这是我们首先要去的地方。单击窗口左上角的“导入”按钮,您将看到一个允许您粘贴现有主题内容的框:

通过单击右上角的链接导入默认主题,该链接适当地标题为“导入默认主题”。 textarea填充CSS后,单击“导入”。预览区域将重新加载并显示从A到E的样本。

我们将集中精力改变白色样品D,因为它最接近我们的最终目标。因为我们宁愿使用swatch A作为名称,所以让我们删除其他样本,这样只剩下D。请记住,ThemeRoller会重命名样本,因为其他内容已被删除。这意味着当您删除样本A时,B变为A,C变为D,依此类推。

继续前进,直到D的样本现在处于A位置。最后,删除swatch B(以前是swatch E),这样我们剩下的就是swatch A:

这个样本看起来不错,但它有点乏味。让我们通过将标题更改为漂亮的绿色来注入一点颜色。确定应为任何元素更改哪些值的最简单方法是使用检查器。将检查器切换到顶部的“开”,然后单击主题A标题上的任意位置。如果左侧选中“A”选项卡,并且“页眉/页脚栏”面板展开,您将知道是否正确。

您可以通过以下几种方式之一更改颜色。您可以将颜色芯片从顶部直接拖到背景上。您还可以将颜色芯片拖到输入字段上。最后,您可以手动输入值。请注意,当您单击包含颜色值的字段时,您将获得一个光滑的颜色选择器。继续并将此面板中输入字段中的值更改为上一屏幕截图中显示的值。

看起来不错,但现在主题活跃状态的蓝色与我们的绿色冲突。使用检查器工具,在“打开/关闭”切换栏的“打开”部分单击一次。这应该会导致“全局”选项卡中的“活动状态”面板展开。我们将蓝色改为温暖的灰色。现在,Global面板应该类似于以下屏幕截图:

只有一件事让我们的新主题看不到最热门的,顶部段落中的蓝色文字链接。回到我们可靠的检查员,让我们直接点击链接,这将扩展A选项卡中的内容主体面板。现在,对于那些已经熟悉CSS的人,你知道你不能简单地改变链接颜色而不改变悬停,访问:悬停和活动状态。问题是没有选项可以进行这些更改,但ThemeRoller可以帮助您。单击“链接颜色”输入字段右侧的+以显示其余选项,然后更改颜色,如以下屏幕截图所示:

就是这样。在探索检查区域时,您可以随意对主题进行其他更改。改变你喜欢的任何东西,它现在只是位和字节。请记住,当时没有撤消选项。如果你真的喜欢某些东西,可以考虑写下这些值,这样你就不会丢失它们或按原样导出它们。说起...

15.导出主题

在我们实际导出主题之前,必须注意一件事。还记得带有“有用”信息的启动页面吗?事实证明,有一件不是推荐,而是要求。

我们建议使用至少3个色板(AC)构建主题。

为了使我们的主题适当地应用于我们的Notekeeper应用程序,我们需要将我们的单个样本(字母A)复制到样本B和C.幸运的是,这是一件容易的事情。选择检查器顶部的A选项卡,然后单击+选项卡两次。您应该看到的是三个相同的样本,现在我们已经完成了。

现在我们已经完成了主题,我们将把它导出以便在我们的Notekeeper应用程序中使用。这是一个简单的过程,首先单击位于界面顶部的页面中间的“下载主题”按钮。您将看到一个框,允许您命名主题,一些有关如何应用主题的信息,以及一个标记为Download Zip的按钮。命名我们的主题Notekeeper后,单击Download Zip按钮,您将在下载文件夹中收到一些美味的小食物。

提取ZIP文件的内容,您将看到以下目录结构:

  • 的index.html
  • themes / Notekeeper.css(主题的未压缩版本)Notekeeper.min.css(压缩版本。在生产中使用)images / ajax-loader.gif icons-18-black.png icons-18-white.png图标-36-black.png icons-36-white.png

树顶部的HTML文件包含有关如何实现主题的信息,以及一些确认主题有效的小部件。所有链接在示例文件中都是相对的,因此您应该能够将其拖动到任何浏览器窗口中并查看结果。

关于主题下载和实现的一些注意事项:

1.由于某种原因,jQuery团队在这个ZIP文件中为您提供按钮图标。主题要求这些图像相对于CSS文件。这意味着除非您已经使用默认主题,否则在将主题上传到网站时还需要包含images文件夹,否则图标将不会显示。

2. 继续使用主题的未压缩版本。虽然您不希望因为大小而在生产中使用它,但如果您希望在ThemeRoller中编辑它,则需要它。在撰写本文时,ThemeRoller无法导入缩小的CSS文件。

安迪马修斯他是一名应用程序开发人员超过16年,具有UI / UX,图形设计和编程方面的技能。他是一名演讲者,开源开发者,他与家人一起住在田纳西州纳什维尔。他在Twitter上是@commadelimited。

雷蒙德卡姆登是Adobe的高级开发人员传播者。他的工作重点是Web标准,移动开发和ColdFusion。他是一位出版作家,并在各种主题的会议和用户组中发表演讲。跟随他@cfjedimaster。



翻译字数超限