Question

是否可以同时水平和垂直使用jQuery移动控制组？我想创建例如按钮组3x3或4x4按钮，它们之间没有任何空间。使用三个水平控制组和三个按钮，每个按钮在“行”之间留出空间。

谢谢！

Answer 1

您可以使用jQM网格并在按钮上强制使用0边距。然后将圆角应用于网格角落的按钮：

<div class="ui-grid-b gridControlGroup" >
    <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>        


.gridControlGroup .ui-btn {
    margin: 0 !important;
}

.gridControlGroup .ui-block-a:nth-child(1) .ui-btn {
    border-top-left-radius: 5px;
}
.gridControlGroup .ui-block-c:nth-child(3) .ui-btn {
    border-top-right-radius: 5px;
}
.gridControlGroup .ui-block-a:nth-last-child(3) .ui-btn {
    border-bottom-left-radius: 5px;

}
.gridControlGroup .ui-block-c:nth-last-child(1) .ui-btn {
    border-bottom-right-radius: 5px;
}

这是 DEMO

jQuery移动按钮控制组水平和垂直

1 个答案: