我有一个 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 移动应用标题中按钮的样式?
最佳答案
你需要知道的一切都可以在官方文档中找到: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;
}
关于jquery - JQuery 移动应用程序页眉中的样式按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15618807/