使用JQuery Mobile中的按鈕填充整個內容區域

Question

我正在使用JQuery Mobile創建一個包含頁眉，內容和頁腳區域的頁面。 整個內容區域必須分為兩部分，每部分50％，其中每個部分必須是一個按鈕，沒有任何圓角或間距，根據使用的設備和設備的布局（縱向），大小可以減小或增大。或風景）。 我嘗試了幾種方法，例如使用data-role="controlgroup"和使用data-type="horizontal"但它似乎並不能提供我想要的東西。 有人可以首先告訴我是否可行，如果可以，應該使用哪些元素和屬性？ 提前致謝！

Answer 1

這是一個工作示例： http : //jsfiddle.net/Gajotres/TfzPw/

該解決方案要求：

1. jQuery Mobile網格（Omar在他的評論中提到了它）

    <div class="ui-grid-a"> <div class="ui-block-a"><a data-role="button" id="custom-btn">Button Left</a></div> <div class="ui-block-b"><a data-role="button" id="custom-btn">Button Right</a></div> </div><!-- /grid-a --> 

   官方文檔： http : //jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

2. 去除圓角：

    $(document).on('pagebeforeshow', '#index', function(){ $('a').buttonMarkup({ corners: false }); }); 

   官方文檔： http : //jquerymobile.com/demos/1.3.0-rc.1/docs/buttons/buttons-options.html

3. 刪除內容div上的填充：

    #index-content { padding: 0 !important; } 

4. 刪除按鈕邊距：

    #custom-btn { margin: 0 !important; }