0

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

4

2 回答 2

2

你需要知道的一切都可以在官方文档中找到：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/

于 2013-03-25T15:42:31.537 回答
0

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

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

CSS：

.my-button {
    background-image: url('images/my-button.png') !important;
}
于 2013-03-25T15:38:56.650 回答