《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧：使用多个列
本節(jié)書(shū)摘來(lái)自異步社區(qū)《jQuery、jQuery UI及jQuery Mobile技巧與示例》一書(shū)中的第9章，第9.17節(jié)，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章節(jié)內(nèi)容可以訪問(wèn)云棲社區(qū)“異步社區(qū)”公眾號(hào)查看
9.17 技巧：使用多個(gè)列
到目前為止，已經(jīng)見(jiàn)過(guò)了page、header、footer和theme。有時(shí)候在頁(yè)面中需要使用多個(gè)列。尤其是當(dāng)與平板終端打交道時(shí)，可能屏幕上會(huì)多出很多有效的剩余空間區(qū)塊。jQuery Mobile為你提供了默認(rèn)的類(lèi)來(lái)表示單獨(dú)的列。代碼清單9-20利用這些類(lèi)在行（row）上放置多個(gè)按鈕。
代碼清單9-20 使用按鈕來(lái)演示列
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>首先請(qǐng)看第26、35和47行。這些div包含了類(lèi)ui-grid-a、ui-grid-b和ui-grid-c。這些類(lèi)將div轉(zhuǎn)換成了多個(gè)列的容器，分別表示2、3和4列。
在這些div之中，你會(huì)發(fā)現(xiàn)有內(nèi)嵌的div：它們擁有類(lèi)ui-block-a、ui-block-b、ui-block-c及ui-block-d。它們就是所謂的“列”。不管在哪個(gè)容器中，列的名稱(chēng)都可以被使用。很明顯，還是要避免在ui-grid-a中出現(xiàn)ui-block-c的情況為好，因?yàn)閡i-grid-a會(huì)認(rèn)為只有兩列。
總結(jié)
以上是生活随笔為你收集整理的《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17 技巧：使用多个列的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 《Python编程快速上手——让繁琐工作
- 下一篇： 《Adobe Illustrator C