《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧：使用多个列
生活随笔
收集整理的這篇文章主要介紹了
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧：使用多个列
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本節書摘來自異步社區《jQuery、jQuery UI及jQuery Mobile技巧與示例》一書中的第9章，第9.17節，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章節內容可以訪問云棲社區“異步社區”公眾號查看
9.17 技巧：使用多個列
到目前為止，已經見過了page、header、footer和theme。有時候在頁面中需要使用多個列。尤其是當與平板終端打交道時，可能屏幕上會多出很多有效的剩余空間區塊。jQuery Mobile為你提供了默認的類來表示單獨的列。代碼清單9-20利用這些類在行（row）上放置多個按鈕。
代碼清單9-20 使用按鈕來演示列
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Layout</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 15 </head> 16 <body> 17 18 <div data-role="page"> 19 20 <div data-role="header"> 21 <h1>Layouts</h1> 22 </div> 23 24 <div data-role="content"> 25 26 <div class="ui-grid-a"> 27 <div class="ui-block-a"> 28 <a href="#" data-role="button">Left</a> 29 </div> 30 <div class="ui-block-c"> 31 <a href="#" data-role="button">Right</a> 32 </div> 33 </div> 34 35 <div class="ui-grid-b"> 36 <div class="ui-block-a"> 37 <a href="#" data-role="button">Left</a> 38 </div> 39 <div class="ui-block-b"> 40 <a href="#" data-role="button">Middle</a> 41 </div> 42 <div class="ui-block-c"> 43 <a href="#" data-role="button">Right</a> 44 </div> 45 </div> 46 47 <div class="ui-grid-c"> 48 <div class="ui-block-a"> 49 <a href="#" data-role="button">Left</a> 50 </div> 51 <div class="ui-block-b"> 52 <a href="#" data-role="button">Leftish</a> 53 </div> 54 <div class="ui-block-c"> 55 <a href="#" data-role="button">Rightish</a> 56 </div> 57 <div class="ui-block-d"> 58 <a href="#" data-role="button">Right</a> 59 </div> 60 </div> 61 </div> 62 63 </body> 64 </html>首先請看第26、35和47行。這些div包含了類ui-grid-a、ui-grid-b和ui-grid-c。這些類將div轉換成了多個列的容器，分別表示2、3和4列。
在這些div之中，你會發現有內嵌的div：它們擁有類ui-block-a、ui-block-b、ui-block-c及ui-block-d。它們就是所謂的“列”。不管在哪個容器中，列的名稱都可以被使用。很明顯，還是要避免在ui-grid-a中出現ui-block-c的情況為好，因為ui-grid-a會認為只有兩列。
總結
以上是生活随笔為你收集整理的《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧：使用多个列的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《Python编程快速上手——让繁琐工作
- 下一篇： 《Adobe Illustrator C