使用 jquery mobile 自定义元素的最佳方法是什么

Question

当使用 jQuery Mobile .js 和 jQuery Mobile .css 时，自定义链接按钮等默认样式的最佳方式是什么？

使用jQM，一个简单的链接可以通过以下代码变成一个按钮：

<a href="index.html" data-role="button">Link button</a>

data-role="button" 允许 jQM 将类添加到链接中，以便可以将其样式设置为具有触摸功能的移动按钮，如下所示：

<a href="index.html" data-role="button" data-corners="true" data-shadow="true" 
data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn 
ui-shadow ui-btn-corner-all ui-btn-up-c"><span class="ui-btn-inner 
ui-btn-corner-all"><span class="ui-btn-text">Link button</span></span></a>

是否可以实际编辑 jQM css 文件，例如 ui-btn-up-c 类？还是以某种方式覆盖样式更好，也许在外部样式表中？

我有几个担忧。我想知道是否可以通过直接编辑 jQM.css 来破坏某些功能，因为 jQM 似乎大量使用样式表。

更新也会有问题吗？ jQM 是否会在新版本发布时发布新样式表，从而覆盖我对主 jQM 样式表所做的编辑？

基本上我要问的是如何编辑 jQuery Mobile 内置主题？

感谢并期待您的回答:)

Answer 1

简介

如果你想改变经典的 jQuery MobileCSS 一切都取决于你想做什么。

主题滚轮

经典的方法是创建一组全新的主题或将它们添加到现有主题中。它是通过 jQuery Mobile theme roller 完成的。当您打开它时，它会自动创建 3 个主题，然后您可以根据需要进行修改。或者您可以导入您当前的主题 CSS 并添加更多主题（如果您想改变完整的外观，这可能是最好的解决方案）。

自定义CSS更改

这个解决方案需要一点技巧。如果可能，首先永远不要更改原始 CSS，除非您 100% 确定自己在做什么。例如，如果您更改默认按钮类，它也会影响使用按钮类的其他小部件，并且有很多。

正确的方法是使用自定义 CSS 文件更改单个/多个元素。这样原始 CSS 文件是完整的，并且可以随时更改/删除新文件。 为此，您需要使用 Chrome 网站管理员工具或称为 Firebug 的附加插件（适用于 Chrome 和 FireFox）。还有其他几种解决方案，但这两种是最常用的。

需要考虑的问题

在这个解决方案中并非一切都很好。例如，可以轻松修改经典的标签按钮，因为相同的标签将作为未来样式的 jQuery 按钮的父标签。但是，如果你的按钮是从输入标签创建的，像这样：

<input type="text" value="Some value" id="change-me"/>

您不能使用#change-me id 来更正其CSS。主要是因为这个输入不是未来按钮的父标签，当 jQuery Mobile 设置它的样式时，它将是按钮的内部部分。它看起来像这样：

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="text" id="change-me" value="Some value" class="ui-input-text ui-body-c"/>
</div>

用另一个 div 元素来解决这个问题。将 id 从输入移动到 div 元素，然后使用它来更改内部 CSS 样式。

如何正确覆盖 CSS 样式

这是 StackOverflow 小组中最常见的问题之一。更改预定义的 CSS 规则时，您必须使用 !important 关键字。没有它，更改通常不会起作用。例如，如果您想更改输入按钮样式背景（来自前面的示例，包含在 div 中），您可以这样做：

#change-me .ui-input-text {
    background-color: red !important;
}

如果没有其他方法可以更改原始 CSS 文件

jQuery Mobile 可以有 1 或 2 个 CSS 文件。当使用一个文件时，主题和结构都包括在内，或者它们可以分成两个文件。如果您想直接更改 CSS，这很有用。主题CSS可以方便地导入和导出到主题滚轮，而不影响CSS文件的结构。

最后一件事，有些东西只能通过修改原结构CSS文件来改变。例如，jQuery Mobile 使用可怕的蓝色发光效果来显示某个元素何时被按下。它只能直接从结构 CSS 文件中删除。

Answer 2

解决方案在于您自己的附加 CSS 文件中的 CSS 特异性。要覆盖 JQM 中的任何格式，您需要做的就是首先将 id 应用于您希望使用自己的 CSS 覆盖 JQM 格式的元素。

接下来，在您自己的 CSS 中，指定将类应用于容器的 id。

例如，我将从下面的图片链接中删除 JQM 边框。

#img_button_1 .ui-btn-inner {border: none !important;}

#img_button_1 是 HTML 锚元素的 ID。

<a id="img_button_1" data-role="button" data-theme="none" data-corners="false" data-shadow="false" data-inline="true"
   href="http://www.google.com" target="_blank"><img src="http://www.google.com/images/srpr/logo1w.png" alt="Google" />
</a>

就这么简单。

还有一点很重要，那就是外部 CSS 文件的加载顺序很重要，您会希望在 JQM CSS 之后加载自己的 CSS。

我在下面的 jsFiddle 分叉了一个工作示例。 http://jsfiddle.net/Z8Xnx/14/

这种方法的最大好处是您根本不必更改 JQM CSS，并且可以不用管它。如果您想在以后将 JQM 重新导入 ThemeRoller 工具，这一点就变得很重要。如果您手动修改实际的 JQM CSS，您可能会在成功将 JQM 重新导入 ThemeRoller 时遇到问题。

我已经成功地使用这种方法来解决我遇到的每一个 JQM CSS 冲突，因为我发现了这个特定性要求问题。 希望这可以帮助每个人轻松解决他们的 JQM 风格难题。

** 更新 **

我注意到这种方法不适用于最新版本的 JQM (1.3.0b1)，这是不正确的。我已经调查并发现这是在 jsFiddle 上实现此版本的 JQM 的问题。为了证明这一点，我在自己的空间中放置了一个示例页面，其代码与 jsFiddle 示例中显示的代码完全相同。这意味着在我的写作中，你真的不能相信 jsFiddle 使用选项中最新版本的 JQM 的任何东西。只是提醒一下，您可以在...上找到有效的实现。

jQuery Mobile CSS Override Example

Answer 3

如果您只想更改样式，则可以使用 jQuery Mobile 主题滚轮。

http://jquerymobile.com/themeroller/index.php

否则，我建议使用另一个样式表而不是直接编辑 jQuery 移动样式表。

如果您希望减少提供给访问者的文件数量，那么我会压缩这两个样式表，然后将您的样式插入到其样式下方作为生产副本。这样，您可以将它们压缩并组合用于生产，但您可以将它们分开，以便以后升级和便于开发使用。