1. 首页
  2. 问答
  3. 覆盖JQuery Mobile CSS

覆盖JQuery Mobile CSS

2011-10-26 136 views
8

是否有可能用一个单独的自定义CSS文件覆盖已经风格的JQuery Mobile元素（按钮，列表等）？覆盖JQuery Mobile CSS

如果是这样，我将如何去引用元素。

感谢

来源

2011-10-26 jcrowson

+0

非常有用的人就知道了。我可以看到这是定制UI的绝佳工具。 – jcrowson

+1

ThemeRoller已移至： - http://themeroller.jquerymobile.com/ –

回答

14

我不知道正式的，优雅的方式来做到这一点的，但我期待在非分钟css文件中找到类，那么像这样的东西添加到.css文件后包括jquery的移动一个：

的.ui报头的.ui标题{余量右：20像素;保证金左：20像素;}

的.ui尺的.ui标题{余量右：20像素;边缘-left：20px; white-space：normal;}

另外，firebug和dev。工具（铬）是你的朋友 - 检查元素和他们的风格。

利比

来源

2011-10-26 15:31:19 Libby

21

是可以覆盖所有在jQuery Mobile的已定义的CSS样式，而是采取对如何做一个好办法看看。 jQuery文档中的Theming overview包含引用您的问题的信息。特别是：

重要的主题

的主题旨在为坚实的起点，但意思是 定制添加自定义的设计元素，使您的网站或 应用程序的唯一。由于所有内容都由CSS控制，因此使用 Web检查器工具可以轻松识别要修改的样式属性。添加到元素的一组主题类（全局）和语义结构类（特定于窗口小部件）提供了一组丰富的可选择的选择器，以针对样式重写。 我们推荐 将外部样式表添加到头部，放置在结构 和主题样式表引用之后，其中包含所有样式 覆盖。这使您可以轻松更新到较新版本的 库，因为覆盖与库代码保持分离。

来源

2011-10-26 15:28:08 Jorge

+0

+1用于发布覆盖主题的文档。 – botbot

5

有关于使用自己的样式JQM一个巨大的误解，认为我已经随处可见，包括SO。在JQM中使用自己的CSS的诀窍在于如何编写自己的CSS。一般来说，您必须首先使用id指定要覆盖JQM CSS的元素，然后将JQM类附加到该ID。例如，要删除的图像链接，其中＃img_button_1是考虑到图像的锚父ID的JQM标准链接边境的CSS，你会编写你的CSS是这样的...

的HTML ...

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

#img_button_1 .ui-btn-inner { border: 0 }

我的一些工作实例回答过这一点，可以在这里找到

Jquery Mobile - Using image as link - Blue line below image

您可以使用解决您所有JQM CSS冲突相同的技术。现在您可以重新考虑使用JQM来实现您想要的结果，因为知道通过在您自己的CSS中使用CSS specicivity来解决这些冲突是多么简单。希望这可以帮助！

来源

2013-07-09 19:04:10 Epiphany

+0

对我来说，这是一个简单的解决方案，谢谢。 – robnick

+0

我尝试使用类的方法，但即使我的CSS被加载后jQuery的移动CSS它被覆盖。使用ID固定的。谢谢。 –

相关问题

 相关问题