0

我升级到 JQM 1.4，但我更喜欢 1.3 的主题。1.4中有一个经典主题，颜色一致。但是角落（标题）中的导航按钮看起来完全不同。

是否可以在 1.4 中为这些按钮重现相同的外观？

4

1 回答 1

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 中存在的渐变背景、圆角和阴影。

这是一个有效的演示

注意：该演示包括深色主题和浅色主题的 CSS。调整 CSS 以获得您想要的外观。

于 2014-09-22T14:42:22.260 回答