JQuery 移动应用程序标题中的样式按钮答案

【问题标题】：Style Button in Header of JQuery Mobile AppJQuery 移动应用程序标题中的样式按钮
【发布时间】：2013-03-25 15:35:55
【问题描述】：

我有一个 JQuery 移动应用程序。我想为“标题”中使用的按钮设置样式。目前，我有以下内容：

.my-btn-hdr { text-transform:uppercase; background-color:blue; color:white; min-height:33px; width:93px; }
...

<div id="myPage" data-role="page" data-dom-cache="false">
  <div data-role="header" data-position="fixed">
    <a href="#" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-back">Back</a>
    <h1>MyApp</h1>
    <a id="saveButton" href="#" class="ui-btn-right my-btn-hdr">Save</a>
  </div>

  <div data-role="content">        
    ...
  </div>
</div>

我注意到当页面被渲染时，ui-btn、ui-btn-up-a、ui-shadow 和 ui-button-corner-all css 类都被添加了。我还注意到添加了 data-corners="true"、data-shadow="true" 和 data-iconshadow="true" 属性。

如何自定义 jquery 移动应用标题中按钮的样式？

【问题讨论】：

标签： jquery css jquery-mobile markup jquery-mobile-button

【解决方案1】：

你需要知道的一切都可以在官方文档中找到：http://api.jquerymobile.com/button/

例如，如果你想改变按钮主题，你会使用这个函数：

$( "a" ).buttonMarkup({ theme: "c" });

这是一个活生生的例子：http://jsfiddle.net/Gajotres/eqLVV/

如果文档中没有提及，则需要通过css进行更改，这是jQM渲染后的按钮结构：

<a href="#" 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">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

最后一件事，如果您需要手动更改 css，请始终在 css 行的末尾添加 !important 以防出现问题。

例如，这可用于更改按钮文本颜色：

#btn1 .ui-btn-inner .ui-btn-text {
    color: red;
}

这是一个例子：http://jsfiddle.net/Gajotres/k5jty/

【讨论】：

【解决方案2】：

您可以为您的按钮提供一个自定义类，然后覆盖您想要更改或删除的任何样式。

<a data-role="button" class="my-button">

CSS：

.my-button {
    background-image: url('images/my-button.png') !important;
}

【讨论】：