覆盖jQuery Mobile CSS结构:一条经验法则

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

如果您想了解更多有关这种差异的信息,请查看我的其他答案.

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实例).

最后但并非最不重要的

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