2

我对 jQuery Mobile 很陌生，据我了解，它包括两个不同的 css 部分：一个用于主题，另一个用于结构。

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

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

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

编辑

基于@Gajotres 的回答。

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

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

4

2 回答 2

5

介绍

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=""。

如果您想了解有关此差异的更多信息，请查看我的其他答案。

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 移动结构，但我建议您不要这样做。

如果您想了解有关此主题的更多信息，请查看我正在讨论该主题的博客文章（使用 jsFiddle 示例）。

最后但并非最不重要的

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

于 2013-09-19T10:56:16.457 回答
0

如果你知道 css 选择器优先级是如何工作的，你就可以轻松搞定。例如：

.class a {

}

要覆盖此属性，您可以使用

body .class a {}或div.class a {}。

以同样的方式，您可以覆盖使用 jQuery Mobile 创建的现有链。

于 2013-09-16T07:44:33.187 回答