Question

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

.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移动应用程序的标题中自定义按钮的样式？

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

Answer 2

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

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

CSS：

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

JQuery Mobile App标题中的样式按钮

2 个答案: