jQuery mobile網格佈局

時間  2019-11-18
標籤 jquery mobile 網格 佈局 欄目 JQuery 简体版
原文   原文鏈接

3.4　內容格式化javascript

jQuery Mobile中提供了許多很是有用的工具與組件，如多列的網格佈局、摺疊形的面板控制等，這些組件能夠幫助開發者快速實現正文區域內容的格式化。css

3.4.1　網格佈局html

jQuery Mobile提供的CSS樣式「ui-grid」能夠實現內容的網格佈局。該樣式有4種預設的配置佈局：「ui-grid-a」、「ui-grid- b」、「ui-grid-c」、「ui-grid-d」，分別對應兩列、三列、四列、五列的網格佈局形式，能夠最大範圍知足頁面多列的需求。java

使用網格佈局時，整個寬度爲100%，無任何「padding」和「margin」及背景色，所以不會影響到其餘元素放入網格中的位置。jquery

實例3-12　在內容區域添加多種類型的網格佈局css3

1. 功能說明工具

新建一個HTML 頁面，在內容區域中添加4種預設的網格佈局，而且經過不一樣的主題顏色進行區分，以分塊的形式顯示在頁面中。源碼分析

2. 實現代碼佈局

新建一個HTML頁面3-12.htm，加入代碼如代碼清單3-12所示。ui

代碼清單 3-12　在內容區域添加多種類型的網格佈局

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 網格佈局</title>
    <meta name="viewport" content="width=device-width,
           initial-scale=1" />
    <link  href="Css/jquery.mobile-1.0.1.min.css"
           rel="Stylesheet" type="text/css" />
    <link  href="Css/css3.css"
           rel="Stylesheet" type="text/css" />
    <script src="Js/jquery-1.6.4.js"
           type="text/javascript"></script>
    <script src="Js/jquery.mobile-1.0.1.js"
           type="text/javascript"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>頭部欄標題</h1></div>
      <div class="ui-grid-a">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-b h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-b h60">B</div>
     </div>
   </div>
   <div class="ui-grid-b">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-c h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-c h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-c h60">C</div>
     </div>
   </div>
   <div class="ui-grid-c">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-d h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-d h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-d h60">C</div>
     </div>
     <div class="ui-block-d">
    <div class="ui-bar ui-bar-d h60">D</div>
     </div>
   </div>
   <div class="ui-grid-d">
     <div class="ui-block-a">
    <div class="ui-bar ui-bar-e h60">A</div>
     </div>
     <div class="ui-block-b">
    <div class="ui-bar ui-bar-e h60">B</div>
     </div>
     <div class="ui-block-c">
    <div class="ui-bar ui-bar-e h60">C</div>
     </div>
     <div class="ui-block-d">
    <div class="ui-bar ui-bar-e h60">D</div>
     </div>
     <div class="ui-block-e">
    <div class="ui-bar ui-bar-e h60">E</div>
     </div>
   </div>
<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>
</body>
</html>

 

3. 源碼分析

在本實例的代碼中，要增長一個多列的網格區域，首先經過<div>元素構建一個容器，若是是兩列，則給該容器添加的「class」屬性值爲「ui-grid-a」；三列則爲「ui-grid-b」，依此類推。

而後，在已構建的容器中添加子容器，若是是兩列，則給兩個子容器分別添加「ui-block-a」、「ui-block-b」樣式屬性；若是是三 列，則給三個子容器分別添加「ui-block-a」、「ui-block-b」、「ui-block-c」樣式屬性；其餘多列依此類推。

最後，在子容器中放置須要顯示的內容。在本實例中，每一個子容器都分別放置了一個<div>元素，代碼以下所示：

<div class="ui-bar ui-bar-b h60">A</div>

在上述代碼中，<div>元素經過「class」屬性添加了三個樣式。第一個和第二個都是jQuery Mobile自帶的樣式，「ui-bar」用於控制各子容器的間距，「ui-bar-b」用於設置各子容器的主題樣式。第三個樣式「h60」爲自定義樣 式，將子容器的高度設置爲「60px」。

說明　若是容器選擇的樣式爲兩列即「class」值爲「ui-grid-a」，而在它的子容器中添加了三個子項即「class」值爲「ui-block-c」，那麼該列自動被放置在下一行。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程