覆盖 Jquery 移动 CSS

发布于 2024-12-11 22:09:53 字数 97 浏览 2 评论 0原文

是否可以使用单独的自定义 css 文件覆盖已设置样式的 JQuery Mobile 元素（按钮、列表等）？

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

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千纸鹤带着心事 2024-12-18 22:09:53

是的，您可以覆盖 jQuery mobile 中已定义的所有 css 样式，但请了解如何以良好的方式执行此操作。 jQuery 文档中的主题概述包含与您的问题相关的信息。尤其：

覆盖主题
这些主题是一个坚实的起点，但也旨在
定制以添加定制设计元素，使您的网站或
应用程序独特。由于一切都由 CSS 控制，因此很容易使用
Web 检查器工具来识别您想要的样式属性
调整。主题类（全局）和语义结构的集合
添加到元素的类（特定于小部件）提供了丰富的集合
目标样式覆盖的可能选择器。我们推荐
将外部样式表添加到头部，放置在结构之后
和主题样式表参考，其中包含您的所有样式
覆盖。这使您可以轻松更新到较新版本
库，因为覆盖与库代码分开。

回复收藏 0 原文

最佳男配角 2024-12-18 22:09:53

我不知道有什么官方的、优雅的方法来做到这一点，但我在非 min css 文件中查找类，然后将这样的内容添加到 jquery mobile after 中包含的 .css 文件中一：

.ui-header .ui-title {margin-right:20px;margin-left:20px;}

.ui-footer .ui-title {margin-right:20px;margin-left:20px;white-space:normal;}

另外，firebug 和 dev。工具（chrome）是你的朋友 - 检查元素及其样式。

利比

回复收藏 0 原文

彻夜缠绵 2024-12-18 22:09:53

关于在 JQM 中使用自己的风格存在一个巨大的误解，我在任何地方都发现了这一点，包括 SO。在 JQM 中使用您自己的 CSS 的技巧在于如何编写您自己的 CSS。一般来说，您必须首先指定要使用 id 覆盖 JQM CSS 的元素，然后将 JQM 类附加到该 ID。例如，要从图像链接中删除 JQM 标准链接边框 CSS，其中 #img_button_1 是为图像的锚父级提供的 ID，您可以像这样编写 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 - 使用图像作为链接 - 蓝线下图

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

There is a huge misconception about using your own styles with JQM that I have found everywhere, including SO. The trick to using your own CSS with JQM is in how you write your own CSS. In general, you must first specify the element you wish to overide the JQM CSS with an id, and then attach the JQM class to that ID. For example, to remove the JQM standard link border CSS from an image link, where #img_button_1 is the ID given to the anchor parent of the image, you would code your CSS like so...

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

Your override CSS...

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

I answered this before with some working examples that can be found here

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

You can use the same technique for resolving all your JQM CSS conflicts. Now you can reconsider using JQM to achieve your desired results knowing how simple it is to resolve these conflicts by using CSS specicivity in your own CSS. Hope this helps!

回复收藏 0 原文