使用jquery mobile自定义元素的最佳方法是什么？

时间：2013-07-10 05:53:31

标签： jquery-mobile

当使用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内置主题？

感谢并期待您的回答：）

3 个答案:

答案 0 :(得分：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 Override Example

答案 1 :(得分：3)

简介

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

主题滚轮

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

自定义 CSS 更改

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

正确的方法是使用自定义 CSS 文件更改单个/多个元素。这样原始 CSS 文件就完好无损，可以随时更改/删除新文件。 为此，您需要使用Chrome网站管理员工具或名为Firebug的其他插件（适用于Chrome和FireFox）。还有几种解决方案，但这两种解决方案最常用。

要考虑的问题

此解决方案并非一切顺利。例如，经典的标签按钮可以很容易地修改，因为相同的标签将保留为未来样式的jQuery Button的父级。但是，如果你的按钮是从输入标签创建的，就像这样：

<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 文件中删除。

答案 2 :(得分：1)

如果您只想更改样式，那么可以使用jQuery Mobile themeroller。

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

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

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

相关问题
最新问题