移动应用程序设计/开发：jQuery Mobile的自定义主题

编程入门行业动态更新时间:2024-10-11 05:20:15

移动应用程序设计/开发：jQuery Mobile的<a href=https://www.elefans.com/category/jswz/34/1771438.html style= 自定义主题"/>

移动应用程序设计/开发：jQuery Mobile的自定义主题

在我们较早的jQuery Mobile教程中，我介绍了许多底层框架以及如何建立第一个网站。 JS库既轻巧又易于学习。文件中还包含一个通用CSS样式表，因此您可以进一步自定义布局中的元素。

对于第二部分，我想花一些时间深入研究jQuery Mobile主题的概念。 jQM彻底改变了整个设计行业，并且从头开始构建移动模板的过程得到了显着改善。 jQuery Mobile不仅是一个脚本库，而且是一个完整的基础框架，可用于构建和生成高效的移动模板。

默认样式表内容

我应该首先弄清楚默认文件中包括哪种类型CSS代码。 jQM 1.0的样式表已分为两个主要部分- 结构和主题。

结构代码是您通常可以忽略的东西。这用于设置页边距，填充，高度/宽度，字体变体以及许多其他浏览器默认值。然后将内部主题与AE分离开来，AE在设计中分别控制不同的视觉效果。这可以包括背景颜色，渐变，阴影等。

这些内部主题元素中的每一个也可以称为色板。构建移动模板时，通常会坚持一个主题。但是在几乎每种情况下，都可以使用不同的配色方案来改进设计。默认样式表仅包含色板AE，但您可以构建色板FZ来向主题库添加另外21种替代方案。只是为了再次澄清这些术语，主题被认为是1个CSS文件，其中最多可以包含26个标有AZ的不同色板。

切换样式

如果您不选择指定任何色板，则jQuery Mobile将默认使用色板A。如果您尚未意识到jQuery Mobile文档将HTML5数据属性用于许多内部功能。其中之一包括通过数据主题属性更改色板。在下面查看我的代码示例，以了解我的意思。

<div data-role="page" id="mypage" data-theme="b"><div data-role="header"><h1>Default jQM Page</h1></div><div data-role="content"><p>Here is some internal content.</p></div>
</div>

注意，我将data-theme属性放在了根页div上。这意味着新的色板颜色将影响内部的所有内容，包括标头和内容区域。我还可以将data-theme="c"包含在标题div中，以仅更改页面其余部分的内容。

色板的组成

如何在单个布局中实现这些不同的色板应该非常简单。现在，让我们看一下jQM CSS代码，以便我们分解样本的各个组件。查看托管在自己的CDN上的最新jQuery Mobile 1.4.5 CSS文件。

您应该注意到每个样本如何用不同的注释分开，并且每个内部类都以适当的字母结尾。例如，默认情况下， .ui-bar-a和.ui-body-a应用于页眉/页脚栏和内容区域。大多数属性都实现了字体和链接颜色，背景渐变以及其他小细节的重置。我仅包含ui-bar-a代码，以使您了解我们定位的元素。

/* A
---------------------------------------------------------------------------------------------*/
.ui-bar-a {border: 1px solid #2A2A2A;background: #111111;color: #ffffff;font-weight: bold;text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px #000000;background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */background-image: -webkit-linear-gradient(#3c3c3c, #111); /* Chrome 10+, Saf5.1+ */background-image:    -moz-linear-gradient(#3c3c3c, #111); /* FF3.6 */background-image:     -ms-linear-gradient(#3c3c3c, #111); /* IE10 */background-image:      -o-linear-gradient(#3c3c3c, #111); /* Opera 11.10+ */background-image:         linear-gradient(#3c3c3c, #111);
}
.ui-bar-a, 
.ui-bar-a input, 
.ui-bar-a select, 
.ui-bar-a textarea, 
.ui-bar-a button {font-family: Helvetica, Arial, sans-serif;
}
.ui-bar-a .ui-link-inherit {color: #fff;
}.ui-bar-a .ui-link {color: #7cc4e7 /*{a-bar-link-color}*/;font-weight: bold;
}.ui-bar-a .ui-link:hover {color: #2489CE /*{a-bar-link-hover}*/;
}.ui-bar-a .ui-link:active {color: #2489CE /*{a-bar-link-active}*/;
}.ui-bar-a .ui-link:visited {color: #2489CE /*{a-bar-link-visited}*/;
}

如果您只是想创建自定义色板，我建议您以其中一个原始模板为模板。如果您开始在新CSS文档中编写代码，则该过程将更加顺利。您将无需在原始文件中进行编辑，而可以从头开始。但是您要重点关注的关键领域将包括以下内容：

页眉和页脚栏
正文内容和页面文字
列表样式
按钮状态为默认/悬停/活动
表单输入控件（额外）

编写新的酒吧设计

从同一CSS文件中，我们查看了较早的将所有样本A代码（第12-150行）复制/粘贴到一个新文件中。我们可以使用样例名称G来实现这些新样式。现在，在复制代码之后，您想将以-a结尾的每个类实例重命名为-g ，因为这是jQuery Mobile识别使用哪种样式的方式。

我想从重新设计标题栏bg开始，以模仿更熟悉的iOS渐变。只能在.ui-bar-g选择器中完成此操作。我们要编辑背景和背景图像属性以改变渐变效果。在下面查看我的代码以及新渐变的演示屏幕。

.ui-bar-g {border: 1px solid #2d3033 /*{a-bar-border}*/;border-left: 0px;border-right: 0px;background: #6d83a1;color: #fff /*{a-bar-color}*/;font-weight: bold;text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #3e4957;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4bfce), color-stop(0.5, #899cb3), color-stop(0.505, #7e94b0), to(#6d83a1));background-image: -webkit-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Chrome 10+, Saf5.1+ */background-image:    -moz-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* FF3.6 */background-image:     -ms-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* IE10 */background-image:      -o-linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1); /* Opera 11.10+ */background-image:         linear-gradient(top, #b4bfce, #899cb3 50%, #7e94b0 52%, #6d83a1);
}

我使用的是大多数默认iOS应用程序中的蓝色方案。对于无法渲染CSS3渐变的设备，我的背景最初设置为纯色。然后在下面，我使用50％标记附近的色标重新创建传统的Apple风格的光泽光泽效果。同样在同一个选择器中，我用更细微的颜色和范围稍微修改了文本阴影。

按钮和文字效果

在对色板进行编码时，重要的是要特别考虑需要注意接口的哪些区域。在新的背景下，标题栏看起来很棒，但我要进行的最后一项修改将使按钮样式与iOS应用程序的样式更接近。

.ui-btn-up-g {border: 1px solid #375073;background: #4a6c9b;font-weight: bold;color: #fff;text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#89a0be), color-stop(0.5, #5877a2), color-stop(0.505, #476999), to(#4a6c9b));background-image: -webkit-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Chrome 10+, Saf5.1+ */background-image:    -moz-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* FF3.6 */background-image:     -ms-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* IE10 */background-image:      -o-linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b); /* Opera 11.10+ */background-image:         linear-gradient(top, #89a0be, #5877a2 50%, #476999 52%, #4a6c9b);border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;
}.ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner { border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
.ui-btn-hover-g {border: 1px solid #1b49a5;background: #2463de;font-weight: bold;color: #fff;text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #40536d;box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#779be9), color-stop(0.5, #376fe0), color-stop(0.505, #2260dd), to(#2463de));background-image: -webkit-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Chrome 10+, Saf5.1+ */background-image:    -moz-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* FF3.6 */background-image:     -ms-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* IE10 */background-image:      -o-linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de); /* Opera 11.10+ */background-image:         linear-gradient(top, #779be9, #376fe0 50%, #2260dd 52%, #2463de);border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;
}

我们现在正在编辑的代码区域位于UI按钮类中。有3种不同的模式需要关注： .ui-btn-up-g ， .ui-btn-hover-g和.ui-btn-down-g 。我主要通过编辑框阴影和线性渐变来关注标准（btn-up）和悬停（btn-hover）效果。另外，我扩展了圆角效果，使按钮显得更矩形。

因此，我需要从名为.ui-btn-inner的类中删除内部边界半径。此类被附加到标题栏中每个锚点链接中的span元素上。如果不重置边界半径属性，则将鼠标悬停在按钮上时会注意到设计中的小故障。随着您在jQuery Mobile主题上花费更多的时间进行编码，您会记住这些对将来项目的细微差别。

ThemeRoller简介

如果您喜欢弄脏代码，那么我强烈建议您坚持自定义编辑。如果您自己进行所有编辑，那么不仅拥有更多的控制权，而且调试CSS中的问题要容易得多。但是对于许多设计人员而言，此过程很麻烦，并且所花费的时间只会比必要的时间长。幸运的是，jQuery Mobile团队发布了一个名为ThemeRoller的在线编辑器。

在此页面上，您可以编辑前3个AC色板，甚至可以创建自己的一个。如果您在左侧栏中查看，则可以在这3个设置之间切换，或者快速更改全局主题选项。这些属性包括CSS属性，例如边框半径，框阴影或默认页面字体。请注意，当您选择任何预设色板时，我们只能编辑与以前相同的区域-顶部/底部的条形，主体内容以及3个按钮状态。

但是我最喜欢的功能是直接访问Adobe Kuler色板。您实际上可以在Kuler帐户中创建一些配色方案，然后将它们导入ThemeRoller。该界面支持拖放功能，因此在几分钟之内尝试几个不同的想法真的很简单。

最终，没有绝对方法来正确构建jQM样本。一些设计师喜欢对CSS进行硬编码，而另一些设计师则喜欢直观的ThemeRoller Web应用程序。只要您遵循类结构，那么无论哪种方式，您都应该获得相同的结果。