html - 如何在不使用主题滚轮的情况下使用 jQuery 按钮类自定义按钮？

Question

我是 jQuery Mobile 的新手，我正在尝试弄清楚如何准确地自定义按钮。我必须使用哪些类来访问某些 css 属性？

例如，我知道如果您想更改按钮的背景颜色，您可以编写 .ui-btn-inner {background: white;}。但是当我这样做时，它并不总是奏效。

我已经查看了 jQuery Mobile API 网站，但我似乎找不到任何真正深入解释这个概念的内容。

如果有人可以向我提供有关这些类(class)的网站或解释，我将不胜感激。

Answer 1

您可以检查 html 以查看 jQuery 移动按钮的外观。 对于基本按钮，创建者:

<a href="index.html" data-role="button">Link button</a>

输出如下:

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

在 jQuery 移动 CSS 之后 创建并加载自定义 CSS 文件。 在这里您可以覆盖单个 css 类，例如

.ui-btn-inner {
    // !important does the trick
    background-color: #FF0 !important;
    ...
}

您有时可能需要将 !important 添加到 css 以覆盖 jQuery 移动 CSS。但是我实际上不知道什么时候需要这样做，如果没有...我就这样做。

您可以在 jQuery 移动 CSS 中查找所有元素的结构，或者，如我之前提到的，使用网络检查器查看 jQuery 将您的标记转换成什么。

附言
提供了对 CSS 工作原理的更深入了解 here