JQuery Mobile应用程序标题中的样式按钮

我有一个JQuery Mobile应用程序。我想要设置“标题”中使用的按钮的样式。目前，我有以下几点：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的影子，和UI键角，所有的CSS类正在增加。我还注意到data-corners =“true”，data-shadow =“true”和data-iconshadow =“true”属性正在增加。

如何自定义jquery移动应用程序头部中的按钮样式？

来源

2013-03-25 Eels Fan

一切都可以官方文档中找到：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行结尾添加！重要，以防某些事情不能正常工作。

例如，这可以用来改变按钮的文字颜色：

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

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

来源

2013-03-25 15:42:31 Gajotres

你可以给你的按钮一个自定义的类，然后覆盖你想要改变或删除的任何样式。

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

CSS：你需要知道

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

来源

2013-03-25 15:38:56

JQuery Mobile应用程序标题中的样式按钮

回答

相关问题