jquery - 覆盖 jQuery Mobile CSS 结构 : A rule of thumb

Question

我是 jQuery Mobile 的新手，据我了解，它包括两个不同的 css 部分:一个用于主题，另一个用于结构。

如果您需要为特定组件设置样式，您可以利用 Theme Roller(或创建您自己的)，然后指定主题，如 data-theme="myTheme"。相反，结构允许管理元素的排列方式、布局等。它在所有元素之间共享。

基于此，我想知道是否可以遵循一些规则，以便在需要时以正确的方式覆盖元素的结构。特别是，我的方法是找到链接到特定元素的 css 结构，将其复制并粘贴到我的自定义 css 结构中。显然，通过这种方式我可以影响不需要该自定义结构的其他元素的结构。

那么，实现这一目标的正确方法是什么？

编辑

基于@Gajotres 的回答。

.custom-btn 从何而来？我认为有必要防止其他按钮使用该颜色。我错了吗？但是在您的代码段中，按钮没有该类。

如果我打开 jQuery Mobile 提供的主题 css 文件，我可以看到一个结构。与结构 css 文件中包含的有什么区别？

Answer 1

介绍

jQuery Mobile 有 3 个 css 文件。我将使用 jQuery Mobile 1.3 作为引用点来写这个主题。

CSS 文件差异

第一个 CSS 文件，也是一个主要的文件是:jquery.mobile-1.3.2.min.css

它包含 jQuery Mobile 结构和主题样式

第二个 CSS 文件只是 jQuery Mobile 结构文件，它包含构建页面和小部件结构所需的 CSS:jquery.mobile.structure-1.3.2.css

第三个仅包含主题样式，可用于创建新样本:jquery.mobile.theme-1.3.2.css

主题与色板

这是您需要了解的下一件事。 jQuery Mobile 只有 1 个主题，但有几个样本。

可以使用 data-theme="" 属性更改色板。不要问为什么不叫 data-swatch=""。

如果您想了解更多关于这种差异的信息，请查看我的其他 answer .

CSS 覆盖

您首先需要拥有一个工具，它会向您显示 jQuery Mobile HTML 和 CSS 结构。

对于 Firefox 浏览器，使用 Firebug 插件进行实时 HTML/CSS 操作。它将使您能够查看增强的页面标记、即时更改 CSS(如果您想在不手动执行更改的情况下查看应用更改时会发生什么，会更容易)并复制内部 HTML 结构。

Chrome 也有一个 firebug 插件，但你应该避开它。它是 Firefox firebug 的轻量级版本，同时 Chrome 有一个优秀的内置工具，称为“开发者工具”。可以使用 CTRL + SHIFT + I 组合轻松调用它。 Macintosh 用户可以使用以下组合打开它:Command + Option + i。

我的最终建议是坚持使用 Chrome 开发人员工具，Firebug 插件以极度耗费资源而著称。

考虑到这一点，您需要了解另一件事。您可以在此处看到基本的 jQuery Mobile 页面架构:

<div data-role="page">
    <div data-role="header">
        <!-- Inner content -->
    </div>
    <div data-role="content">
        <!-- Inner content -->
    </div>
    <div data-role="footer">
        <!-- Inner content -->
    </div>
</div>

不是最终页面结果。在 pagecreate 事件之后(在 pageinit 事件之前)jQuery Mobile 触发 HTML 标记增强过程。所以最终结果看起来或多或少会有很大不同。

让我们看一个 jQuery Mobile 按钮示例，在增强之前它看起来像这样:

<a href="#" data-role="button">Link button</a>

增强后是这样的:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Classic HTML button</span>
    </span>
    <input type="button" value="Classic HTML button" class="ui-btn-hidden" data-disabled="false"/>
</div>

这就是为什么我们需要额外的工具才能看到最终的 HTML 结构。

有了这个可以进一步进行。

如果您想覆盖 jQuery Mobile CSS 定义，您需要学习使用 !important。虽然这通常很重要，但我们不能没有它。

假设我们想要更改按钮文本颜色(来自之前的按钮示例)，我们会这样做:

.custom-btn .ui-btn-inner .ui-btn-text {
    color: #013301 !important;
}

还有一件事，您可以随时更改原始的 jQuery Mobile 移动结构，但我建议您不要这样做。

如果您想了解更多有关此主题的信息，请查看我的博客 article 我在这里讨论这个主题(使用 jsFiddle 示例)。

最后但并非最不重要的

这个答案也可以找到 here + 工作示例，更透明这是我的个人博客。