2

将 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 内置主题？

谢谢并期待您的回答:)

4

3 回答 3

3

解决方案在于您自己的附加 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 覆盖示例

于 2013-07-10T06:18:49.280 回答
3

介绍

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

主题滚轮

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

自定义CSS更改

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

正确的方法是使用自定义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文件中删除。

于 2013-07-10T07:02:33.880 回答
1

如果您想简单地更改样式，那么您可以使用 jQuery Mobile 主题滚轮。

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

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

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

于 2013-07-10T06:00:23.593 回答