將jQueryMobile 1.4按鈕設爲1.3

Question

我升級到JQM 1.4，但我更喜歡1.3的主題。 1.4中有一個經典主題，它具有相同的顏色。但角落（標題）中的導航按鈕看起來完全不同。

是否有可能爲1.4中的那些按鈕重現相同的外觀？

Answer 1

由於jQM 1.3增強的按鈕使用1.4中不再存在的嵌套跨度，因此很難準確得出它。然而，用一點CSS你可以變得非常接近。由於帶有按鈕的標題：

<div data-role="header" data-theme="b"> 
    <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left"> Home </a> 
    <h1>Theme B</h1> 
    <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> Contact Us </a> 
</div> 

分配一個新類的按鈕（btn_round在我的例子），然後創建下面的CSS：

.btn_round 
{ 
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3); 
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3); 
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3); 

    -moz-border-radius:    1.5em !important; 
    -webkit-border-radius:   1.5em !important; 
    border-radius:     1.5em !important; 
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45)); 
    background-origin: padding-box; 
    background-size: auto; 
    border-color: rgb(17, 17, 17); 
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px; 
    text-shadow: rgb(17, 17, 17) 0px 1px 1px; 
} 
.btn_round:after{ 
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px; 
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px; 
} 

這增加了漸變背景，圓角和陰影那是在1.3中出現的。

這裏是一個工作DEMO

注意：演示包括CSS同時爲黑暗的主題和光的主題。調整CSS以獲得所需的外觀。