使用JQuery Mobile中的按钮填充整个内容区域

Question

I am creating with JQuery Mobile a page containing a header, a content and a footer area. The entire content area must be split in two sections, 50% each, where each section must be a button, without any rounded corners or spacing, that can decrease or increase in size according to the device used and the layout of the device (portrait or landscape). I have tried several approaches, such as with data-role="controlgroup" and with data-type="horizontal" but it doesn't seem to provide what I want. Can someone tell me if it's possible in the first place and, if so, what elements and attributes should be used? Thanks in advance!

Answer 1

Here's a working example: http://jsfiddle.net/Gajotres/TfzPw/

This solution requires:

1. jQuery Mobile grid (Omar mentioned it in his comment)

    <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 --> 

   Official documentation: http://jquerymobile.com/demos/1.3.0-rc.1/docs/content/content-grids.html

2. Remove rounded corners:

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

   Official documentation: http://jquerymobile.com/demos/1.3.0-rc.1/docs/buttons/buttons-options.html

3. Remove padding on a content div:

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

4. Remove button margines:

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