代码之家 › 专栏 › 技术社区 › Lorenzo B

重写jQuery Mobile CSS结构:经验法则

overriding jquery-mobile html css jquery

Lorenzo B · 技术社区 · 12 年前

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

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

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

那么,实现这一目标的正确方法是什么呢?

编辑

基于@Gajotres的回答。

在哪里 .custom-btn 来自我认为有必要防止其他按钮采用那种颜色。我错了吗?但在您的代码片段中,按钮没有该类。

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

2 回复 | 直到 12 年前

Community Mohan Dere 5 年前

简介

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

CSS文件差异

第一个CSS文件,也是一个主要文件:jquery.mobile-1.32.min.CSS

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

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

第三个只包含主题样式,可用于创建新样例:jquery.mobile.theme-1.3.2.css

主题与Swatch

这是你们需要理解的下一件事。jQuery Mobile只有一个主题,但有几个样例。

Swatch可以通过 data-theme="" 属性不要问为什么不叫它 data-swatch="" .

如果你想了解更多关于这种差异的信息,那就看看我的另一个 answer .

CSS覆盖

您需要的第一件事是一个工具,它将向您展示jQueryMobileHTML和CSS结构。

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

Chrome也有一个firebug插件,但你应该避开它。它是Firefox firebug的一个更轻的版本,同时Chrome有一个出色的内置工具,称为开发工具。使用CTRL+SHIFT+I组合键可以很容易地调用它。Macintosh用户可以使用以下组合打开它:命令+选项+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事件之前),jQueryMobile正在触发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定义,你需要学会使用!重要的虽然这通常是很大的不不不,但没有它我们无法做到这一点。

假设我们想更改按钮文本颜色(从前面的按钮示例来看),我们会这样做:

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

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

如果你想了解更多关于这个话题的信息,可以看看我的博客 article 我在这里讨论这个主题(使用jsFiddle示例)。

最后不能不提

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

Lorenzo B 12 年前

如果您知道css选择器的优先级是如何工作的,那么就可以轻松完成。例如:

.class a {

}

要覆盖此属性,可以使用

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

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