jQuery Mobile - 只更改几个按钮的大小

Question

我在jQueryMobile中的多个“页面”中有几个按钮。我可以使用我的css中的以下内容更改所有按钮的大小。

.ui-btn { 
    height: 150px; 
}

但是，我只希望按钮在我的第一页（id ='menu'）上变大（150px），其他页面应该具有默认的高度值。我尝试了#menu .ui-btn {...}并添加了一个类bigButton并执行了.bigButton .ui-btn {...}，但这也无效。

<div data-role="page" id="menu">
    <div data-role="content">
        <button id="snapPic" class="bigButton" onclick="capturePhoto();">Snap picture</button> 
        <br/>
        <button id="makeClouds" class="bigButton" onclick="location.href='makeClouds.html'">Make clouds</button>
    </div>
</div>

Answer 1

jQuery Mobile 1.3.2及以下

将data-role="button添加到锚标记以将其转换为按钮。然后应用自己的样式。

<a href="#" data-role="button" class="bigButton">Big Button</a>

jQuery Mobile 1.4 (Beta)

出于效果目的，data-role="button"现已删除，并替换为.ui-btn类。

<a href="#" class="ui-btn bigButton">Big Button</a>