我升级到JQM 1.4,但我更喜欢1.3的主题。 1.4中有一个经典主题,颜色相同。但角落(标题)中的导航按钮看起来完全不同。
是否可以在1.4中重现这些按钮的相同外观?
答案 0 :(得分: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以获得您想要的外观。