jQuery Mobile-如何在水平和垂直方向上进行分组按钮? [英] JQuery Mobile - how make grouped button both horizontally and vertically?

问题描述

在JQuery Mobile中，您可以通过以下方式轻松地将按钮水平分组:

In JQuery Mobile you can easily group buttons horizontally by:

<div data-role="controlgroup" data-type="horizontal">
  <a href="#" class="ui-btn">1</a>
  <a href="#" class="ui-btn">2</a>
  <a href="#" class="ui-btn">3</a>
</div>

垂直按

<div data-role="controlgroup" data-type="vertical">
  <a href="#" class="ui-btn">1</a>
  <a href="#" class="ui-btn">2</a>
  <a href="#" class="ui-btn">3</a>
</div>

但是如何使它们在水平和垂直方向上分组呢?

but how can I make them group both horizontally and vertically?

谢谢！

推荐答案

使用jQuery Mobile

Use a jQuery Mobile GRID.

    <div class="ui-grid-b" >
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
        <div class="ui-block-a"><a href="#" class="ui-btn">1</a></div>
        <div class="ui-block-b"><a href="#" class="ui-btn">2</a></div>
        <div class="ui-block-c"><a href="#" class="ui-btn">3</a></div>
    </div>     

然后，如果要消除按钮之间的空间，请添加CSS以消除边距:

Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:

.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
    margin: 0 !important;
}

这是 演示

Here is a DEMO

这篇关于jQuery Mobile-如何在水平和垂直方向上进行分组按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！