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

Question

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

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

我已经查看了 jQuery Mobile API 网站，但似乎找不到任何能够深入解释这个概念的东西。

如果有人可以为我提供有关这些课程的网站或解释，将不胜感激。

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 mobile css之后创建并加载自定义 CSS 文件。在这里，您可以覆盖单个 css 类，例如

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

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

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

PS
更深入地了解 CSS 的工作原理，在此处提供