jQueryMobile快速入門

langyahappy發表於2015-11-16
jQuery

what

　　jQuery Mobile是jQuery 在手機上和平板裝置上的版本。它不僅會給主流移動平臺帶來jQuery核心庫，而且會釋出一個完整統一的jQuery移動UI框架。支援全球主流的移動平臺。 mobile-what.jpg

使用

　　要使用 jQuery Mobile，首先需要在開發的介面中包含如下3個內容：

  • CSS檔案jquery.mobile-1.4.5.min.css
  • jQuery類庫檔案 jquery.min.js

  • jQuery Mobile檔案 jquery.mobile-1.4.5.min.js

結構

　　一個jQuery Mobile頁面時你需要建立三塊基本內容（頭，正文，尾），要在html文件中的 head 標籤內填寫：

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

在body標籤內填寫：

<div data-role="page" id="pageone">
<div data-role="header"><h1>Page Title</h1></div><!-- /header -->
<div data-role="content"><p>Jquery mobile Test</p></div><!-- /content -->
<div data-role="footer"><h4>Page Footer</h4></div><!-- /footer -->
</div><!-- /page -->

程式碼解釋：

  • data-role="page" 是顯示在瀏覽器中的頁面
  • data-role="header" 建立頁面上方的工具欄（常用於標題和搜尋按鈕）
  • data-role="content" 定義頁面的內容，比如文字、影像、表單和按鈕，等等
  • data-role="footer" 建立頁面底部的工具欄

在jQuery Mobile中，可以在單一 HTML 檔案中建立多個頁面。通過唯一的id來分隔每張頁面，在後面的程式碼編寫中，推薦使用以上的構建方法來建立頁面。

超連結

　　jQuery Mobile中的一個“page”結構一般使用一個DIV來組織。現在你可以使用前一節中的模板來建立一個包含三個跳轉到其他頁面的連結的導航頁面：

<div data-role="page" id="menu">
   <div data-role="header"><h1>Menu</h1></div><!-- /header -->
   <div data-role="content">   
      <p>What vehicles do you like?</p>      
      <p><a href="#Cars">Cars</a></p>
      <p><a href="#Trains">Trains</a></p>
      <p><a href="#Planes">Planes</a></p>      
   </div><!-- /content -->
   <div data-role="footer" data-position="fixed"><h4>Page Footer</h4></div><!-- /footer -->

　　上面建立的導航頁是我們在瀏覽器看到的第一個頁面，接下來我們再新增三個“page”，他們有不同的id：Cars， Planes，Trains。

<div data-role="page" id="Cars">
   <div data-role="header">
      <h1>Cars</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of cars</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="Trains">
   <div data-role="header">
      <h1>Trains</h1>
   </div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of trains</p>
   </div><!-- /content -->
   <div data-role="footer">
      <h4>Page Footer</h4>
   </div><!-- /footer -->
</div><!-- /page -->
<!-- Start of fourth page -->
<div data-role="page" id="Planes">
   <div data-role="header">
      <h1>Planes</h1>
</div><!-- /header -->
   <div data-role="content">   
      <p>We can add a list of planes</p>
   </div><!-- /content -->
   <div data-role="footer">
   <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

現在我們已經建立完成了，去試一試吧

button

button.jpg 　　在jQuery Mobile中，按鈕可通過三種方式建立：

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

<button>按鈕</button>
<input type="button" value="按鈕">

按鈕

　　在 jQuery Mobile 中，按鈕會自動樣式化，讓它們在移動裝置上更具吸引力和可用性。我們推薦使用帶有 data-role="button" 的< a >元素在頁面間進行連結，使用< input >或< button >元素進行表單提交。

　　預設情況下，按鈕佔滿整個螢幕寬度。如果你想要一個僅是與內容一樣寬的按鈕，或者如果您想要並排顯示兩個或多個按鈕，請新增 data-inline="true"，如果想組合按鈕，可以使用 data-role="controlgroup" 屬性和 data-type="horizontal|vertical" 一起使用來規定是否水平或垂直組合按鈕。

<a href="#pagetwo" data-role="button" data-inline="true">訪問第二個頁面</a>
<div data-role="controlgroup" data-type="horizontal">
    <a href="#anylink" data-role="button">按鈕 1</a>
    <a href="#anylink" data-role="button">按鈕 2</a>
    <a href="#anylink" data-role="button">按鈕 3</a>
</div>

可摺疊塊

zhedie.jpg

　　可摺疊塊允許您隱藏或顯示內容 - 對於儲存部分資訊很有用。如需建立一個可摺疊的內容塊，需要為容器新增 data-role="collapsible" 屬性。在容器（div）內，新增一個標題元素（H1-H6），後跟您想要進行擴充套件的 HTML 標記，預設情況下，內容是被摺疊起來的。如需在頁面載入時展開內容，請使用 data-collapsed="false"：

<div data-role="collapsible" data-collapsed="false">
    <h1>點選我 - 我可以摺疊!</h1>
    <p>我是可摺疊的內容。</p>
</div>

當然可摺疊塊允許巢狀，如下程式碼：

<div data-role="collapsible">
    <h1>點選我 - 我可以摺疊!</h1>
    <p>我是被展開的內容。</p>
    <div data-role="collapsible">
        <h1>點選我 - 我是巢狀的可摺疊塊！</h1>
        <p>我是巢狀的可摺疊塊中被展開的內容。</p>
    </div>
</div>

panel

panel.jpg

　　jQuery Mobile中的皮膚會在螢幕的左側向右側劃出。可以通過指定id的div元素新增 data-role="panel" 屬性來建立皮膚。

<div data-role="panel" id="myPanel">
  <h2>皮膚標題..</h2>
  <p>文字內容..</p>
</div>

panel標記必須置於頭部、內容、底部組成的頁面之前或之後。

皮膚頭部..

皮膚中的一些文字內容..

匯智網

　　要訪問皮膚，需要建立一個指向皮膚的連結，點選該連結即可開啟皮膚：

開啟皮膚

　　預設情況下，皮膚會顯示在螢幕的左側。如果想讓皮膚出現在螢幕的右側，可以指定 data-position="right" 屬性。

開啟皮膚

　　可以通過使用 data-display 屬性來控制皮膚的展示方式:

<div data-role="panel" id="overlayPanel" data-display="overlay"> <!--覆蓋顯示-->
<div data-role="panel" id="revealPanel" data-display="reveal">   <!--滑動顯示-->
<div data-role="panel" id="pushPanel" data-display="push">       <!--推動顯示-->

　　可以使用按鈕來關閉皮膚：僅需要在皮膚的div中新增 data-rel="close" 屬性。

<div data-role="panel" id="myPanel"> 
  <h2>皮膚頭部..</h2>
  <p>皮膚中的一些文字內容..</p>
  <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline">關閉皮膚</a>
</div>

更多示例內容及線上練習參考： http://www.hubwiz.com/course/5640589f9bb934437751117b/

相關文章