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應用程序標題中的樣式按鈕

回答

相關問題