jQuery移動按鈕控制組水平和垂直

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