jQuery Mobile 多欄與表格版面配置

我們可以使用 jQuery Mobile 的CSS3的多欄版面配置，利用ui-grid樣式類別來建立多欄版面配置，或表格版面配置。

jQuery Mobile 提供4種預設樣式類別來建立不同蘭樹的版面配置。

• 二欄版面配置：ui-grid-a
• 三欄版面配置：ui-grid-b
• 四欄版面配置：ui-grid-c
• 五欄版面配置：ui-grid-d

一、兩欄版面配置：

運用ui-grid的樣式類別，搭配ui-block-a/b/c/d/e 屬性，即可完成格子區塊的建立。

<下載範例>

<div data-role="content">

            <p>使用兩欄版面配置排列2個按鈕。</p>

            <div class="ui-grid-a">

                <div class="ui-block-a">

                    <a href="#" data-role="button">ui-block-a</a>

                </div>

                <div class="ui-block-b">

                    <a href="#" data-role="button">ui-block-b</a>

                </div>

            </div>

        </div>

結果：

  

二、三欄版面配置：

<下載範例>

<div data-role="content">

            <p>使用三欄版面配置排列5個按鈕。</p>

            <div class="ui-grid-b">

                <div class="ui-block-a">

                    <a href="#" data-role="button">ui-block-a</a>

                </div>

                <div class="ui-block-b">

                    <a href="#" data-role="button">ui-block-b</a>

                </div>

                <div class="ui-block-c">

                    <a href="#" data-role="button">ui-block-c</a>

                </div>

                <div class="ui-block-a">

                    <a href="#" data-role="button">ui-block-a</a>

                </div>

                <div class="ui-block-b">

                    <a href="#" data-role="button">ui-block-b</a>

                </div>

            </div>

            <div>

                <a href="#" data-role="button">框架外</a>

            </div>

        </div>

結果：