jQuery Mobile - 更大的标题按钮

时间:2012-06-15 07:51:11

标签: css css3 jquery-mobile

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

2 个答案:

答案 0 :(得分:9)

只需指定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位置来自己将其余内容集中在标题中。

答案 1 :(得分:4)

试试这个。它只会更改标题中标题ID为标题

的标题中的按钮
#header button{height:50px;width:200px;}