[ Talk is Cheap Show me the CODE ] : jQuery Mobile

時間 2019-11-09

標籤 talk cheap code jquery mobile 欄目 JQuery 简体版

原文原文鏈接

[ Talk is Cheap Show me the CODE ] : jQuery Mobile頁面佈局

當咱們專一地研究人類生活的空虛，並考慮榮華富貴空幻無常時，也許咱們正在阿諛逢迎本身懶惰的天性。

Written In The Font

爲了app的手機端,我選擇了 jQuery Mobile ,學習中出一系列的博客吧.我喜歡的一句話「Talk is Cheap Show me the CODE」,因此過多的廢話 jjyy 我不太會,我直接上代碼上樣式.想玩手機端的能夠來看下哦.css

工具: Aptana Studio 3 + 火狐html

學習內容:jquery

建立單頁佈局

移動頁面分:頁眉,頁腳和內容三部分.下面實現一個hello world(程序員的大門)頁面:學習

show the code:測試

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Hello World</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script></head><body>

    <div id="page1" data-role="page" >
        <div data-role="header">    <h1> 標題</h1></div>
        <div data-role="content">   <h1> <a href="#">Hello World!!</a></h1></div>
        <div data-role="footer">    <h1> 頁腳</h1></div>
    </div></body></html>

建多頁佈局

多頁佈局是單頁佈局的一個集合,建立一個Html文件包括不少個界面,也能夠建立不少個html文件,每一個文件包括一個頁面爆他們鏈接起來.ui

這裏咱們用一個html方便進行.

show the code

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>測試</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    </head><body>

    <div id="page1" data-role="page" >
        <div data-role="header">    <h1> 標題1</h1></div>
        <div data-role="content">    <h1> <a href="#sub" data-role="button">跳轉到頁面二</a></h1></div>
        <div data-role="footer">    <h1> 頁腳1</h1></div>
    </div>
    
    <div data-role="page2" id="sub">
        <div data-role="header">    <h1> 標題2</h1></div>
        <div data-role="content">    <h1> Hello World2!!</h1></div>
        <div data-role="footer">    <h1> 頁腳2</h1></div>
    </div>
    </body></html>

在線測試

data-role="button" 自動默認的button按鈕樣式

jQuery Mobile 中的按鈕可經過三種方法建立[ 按鈕會在下面詳細講]：

使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素

利用網格對齊內容

網格是用放置對象,使他們對齊的工具.

可以使用的佈局網格有四種：ui-grid-a ui-grid-b ui-grid-c ui-grid-d

可以使用的內容類有四種:ui-block-a ui-block-b ui-block-c ui-block-d

show the code:

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>測試</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    </head><body><div data-role="page" id="pageone">
  <div data-role="header">
  <h1>列</h1>
  </div>

  <div data-role="content">
   <h3>三列布局：</h3>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>1</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>2</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>3</span></div>
   </div>

   <h3>多行的三列布局：</h3>
   <div class="ui-grid-b">
     <div class="ui-block-a" style="border: 1px solid black;"><span>9</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>8</span></div>
     <div class="ui-block-c" style="border: 1px solid black;"><span>7</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>6</span></div>
     <div class="ui-block-b" style="border: 1px solid black;"><span>5</span></div>
     <div class="ui-block-a" style="border: 1px solid black;"><span>4</span></div>
   </div>
  </div></div> </body></html>

設計可摺疊佈局

能夠經過點擊或觸摸來隱藏或顯示可摺疊的內容.

show the code:

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>Jeff Li</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet"  href="css/jquery.mobile-1.3.2.css">
    
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.3.2.js"></script>
    </head><body>
    
    <div data-role="page" id="subone">
        <div data-role="header">    
            <h1>摺疊案例</h1>
        </div>
        <div data-role="content">    
            <div data-role="collapsible">
                <h3>點我... </h3>
                <p>點了是sb</p>
            </div>
            
            <div data-role="collapsible-set">
                <div data-role="collapsible" data-collapsed="false">
                    <h3>再點我...</h3>
                    <p>I am a boy ...</p>
                    <p>u r a girl ......</p>
                </div>
                <div data-role="collapsible" >
                    <h3>沒了...</h3>
                    <p>I am expanded on page load222...</p>
                    <div data-role="collapsible">
                        <h3>I am expanded on page load333</h3>
                    <p>I am expanded on page load333...</p>
                    </div>
                </div>
            </div>
            
        </div>
        <div data-role="footer">
            <h1>頁腳</h1>
        </div>
    </div>
    </body></html>