css - jQuery Mobile - 更大的标题按钮

Question

我正在为 iPhone 应用程序使用 jQuery Mobile。我不太喜欢页眉中按钮的大小/形状。我认为它们太小而且太圆了。我只在按钮上使用一个图标，它们很小而且很难在设备上点击。我想要更多方形和更大的按钮，就像 Facebook 应用程序中的那样。有没有办法通过 css 来实现这个？如果是这样，我该怎么做？ 顺便说一句，我不想​​更改所有按钮，只更改标题按钮!

Answer 1

只需指定 JQM 提供的按钮属性，您就可以拥有方形按钮。

<a data-icon="arrow-l" data-inline="true" data-iconpos="notext" data-corners="false">A Button</a>

为了增加尺寸；您需要重写以下样式:

.ui-header .ui-btn, .ui-header .ui-icon, .ui-header .ui-btn-inner {
    width: 45px;
    height: 45px;
}
.ui-header .ui-btn-inner .ui-icon{
    margin: 0px;
    border-radius: 0;
}
.ui-header {
    height: 60px;
}
​

检查这个:http://jsfiddle.net/nirmaljpatel/qU5q4/

请注意，一旦您增加标题的高度，您就必须通过指定它们的 top 位置来自行将标题中的其余内容居中。