html - 在 JQuery Mobile 中用按钮填充整个内容区域

Question

我正在使用 JQuery Mobile 创建一个包含页眉、内容和页脚区域的页面。整个内容区域必须分成两个部分，每个部分 50%，其中每个部分必须是一个按钮，没有任何圆 Angular 或间距，可以根据所使用的设备和设备的布局(纵向或景观)。我尝试了几种方法，例如 data-role="controlgroup" 和 data-type="horizo​​ntal" 但它似乎没有提供我想要的.有人可以首先告诉我是否可行，如果可行，应该使用哪些元素和属性？提前致谢!

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. 移除圆 Angular :

   $(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;
   }