jQuery Mobile入門

簡介：jQuery Mobile框架可以輕鬆的幫助我們實現非常好看的、可跨設備的Web應用程序。我們將後續的介紹中向大家介紹大量的代碼及實例。

jQuery一直以來都是非常流行的富客戶端及Web應用程序開發中使用的JavaScript類庫,然而一直以來它都是爲桌面瀏覽器設計的，沒有特別爲移動應用程序設計。

jQuery Mobile是一個新的項目用來添補在移動設備應用上的缺憾。它是基本jQuery框架並提供了一定範圍的用戶接口和特性，以便於開發人員在移動應用上使用。使用該框架可以節省大量的js代碼開發時間，儘管目前的版本還是不是一個穩定的版本。但它的應用效果已經備受矚目。

接下來我們將通過實例向大家展示jQuery Mobile的特性及好處，讓我們看一下這個新框架是怎麼幫助你在短時間內建立起一個高質量的移動應用程序,接下來的代碼講解中的代碼最好使用的移動設備平臺是IPhone或Android。或者是PC電腦上使用 Safari瀏覽器調試。

jQuery Msobile 都能做什麼?

1、jQuery Mobile爲開發移動應用程序提供了非常簡單的用戶接口

2、這種接口的配置是標籤驅動的，這意味着我們可以在HTML中建立大量的程序接口而不不需要寫一行js代碼

3、提供了一些自定義的事件用來探測移動和觸摸動作。例如tap(敲擊)、tap-and-hold（點擊並按住）、swipe、orientation change

4、使用一些加強的功能時需要參照一下設備瀏覽器支持列表

5、使用預設主題可以輕鬆定製應用程序外觀

jQuery Mobile 基本頁面結構

大部分jQuery Mobile Web應用程序都要遵循下面的基本模板

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile基本頁面結構</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div data-role="content">
                <p>Content goes here</p>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
    </body>
</html>

在android模擬器中顯示效果如下：

代碼說明

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

CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的頁面基本模板中，引入這三個元素採用的是jQuery CDN方式，開發人員也可以下載這些文件及主題到你的服務器上。

我們可以看到頁面中的內容都是包裝在div標籤中並在標籤中加入data-role=”page”屬性。這樣jQuery Mobile就會知道哪些內容需要處理。

說明：data-屬性是HTML5新推出的很有趣的一個特性，它可以讓開發人員添加任意屬性到html標籤中,只要添加的屬性名有“data-”前綴。

在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的，但至少要包含一個 “content”div。

div dat-role=”header”></div>

在頁面的頂部建立導航工具欄，用於放置標題和按鈕（典型的至少要放一個“返回”按鈕，用於返回前一頁）。通過添加額外的屬性

data-position=”fixed”，可以保證頭部始終保持屏幕的頂部

包含一些主要內容，例如文本內容，圖像，按鈕，列表，表單等等

在頁面的底建立工具欄，添加一些功能按鈕

爲了確保它始終保持在頁面的底部，可以給其加上data-position=”fixed” 屬性

多個頁面在同一個頁面中

有一種建立在一個 HTML頁面基礎之上的頁面結構，即在一個頁面中添加多個data-role=”page”。這意味着瀏覽器僅僅得到一個頁面，就可以實現頁面平滑切換的客戶體驗。參看下面實例：(目前有bug)

<!DOCTYPE html>

<html>
    <head>
        <title>jQuery Mobile: Pages within Pages</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>

    <body>
        <div data-role="page" id="home">
            <div data-role="header"><h1>Home</h1></div>
            <div data-role="content"><p><a href="#about">About this app</a></p></div>
        </div>
        
        <div data-role="page" id="about">
            <div data-role="header"><h1>About This App</h1></div>
            <div data-role="content"><p>This app rocks!<a href="#home">Go home</a></p></div>
        </div>
    </body>

</html>

正如所見，上面的代碼中包含了兩個”page”:主頁（id爲home）和”about”(id爲about)。從Home鏈接到About頁面採用的是連接地址爲#about，about頁面返回到首頁的鏈接地址爲#home。jQuery Mobile會自動切換鏈接的目的div顯示到移動瀏覽器中。該框架會隱藏除第一個包含data-role=”page”div以外的其它”page”

AJAX 導航

爲了實現在移動設備上的無縫客戶體驗，jQuery Mobile默認採用AJAX的方式載入一個目的鏈接頁面。因此，當在瀏覽器中點擊一個鏈接打一個新的頁面時，jQuery Mobile接收這個鏈接，通過AJAX的方式請求鏈接頁面，並把請求得到的內容注入到當前頁面的DOM裏。另外還需要確保請求的頁面url唯一標識的。

這樣的結果就是用戶交互始終保存在同一個頁面中。新頁面中的內容也會輕鬆的顯示到這個頁面裏。這種平滑的客戶體驗相比於傳統打開一個新的頁面並等待數秒的方式要好很多。當一個新的頁面做爲新的data-role=”page” div插入到主頁面時，主頁面會有效的緩存取到的內容。使得當要訪問一個頁面時能夠儘快的顯示出來。這個工作過程聽起來難以置信的複雜，但是做爲開發人員的我們大部份不需要了解其中工作的具體細節。只要能看到效果就OK。

注意:如果你不想採用AJAX的方式加載頁面，而想以原生的頁面加載方式打開一個鏈接頁面，只需要在打開的鏈接上添加屬性 rel=”external”屬性

頁面切換效果

你可以使用多種不同的切換效果來顯示新頁面內容，只需要在鏈接裏添加data-transition屬性即可。可能的值如下

slide	從右到左切換（默認）
slideup	從下到上切換
slidedown	從上到下切換
pop	以彈出的形式打開一個頁面
fade	漸變退色的方式切換
flip	舊頁面翻轉飛出，新頁面飛入

例如 <p><a href=”#about” data-transition=”flip”>關於頁面</a></p>

在瀏覽器中查看效果

注意：查看以上的效果需要您的瀏覽器支持jQuery Mobile。例如：Mobile Safari, DeskTop Safari,或Chrome。

對話框

通過在鏈接中添加data-rel=”dialog”的屬性，可以使鏈接頁面的顯示方式變爲對話框。給顯示的對話框加入切換的效果也是一個不錯的選擇

例如我們將about的鏈接變成一個對話框並加入相應的切換效果。代碼如下

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

注意：目前的測試版本存在問題，當在一個頁面中寫多個”page”時在以dialog的方式打開一個頁面時，不會出現對話框效果

按鈕

按鈕是觸摸式應用程序的一部分，它們扮演鏈接的功能，因爲它們提供了更大的目標，當你點擊鏈接的時候（比較適合，手指比較胖的人羣）

在jQuery Mobile中把一個鏈接變成button的效果，只需要在標籤中添加data-role=”button屬性即可”。例如：

<div data-role="content"> 
    <p><a href="#about" data-role="button">About this app</a></p>    
</div>
...

<div data-role="content"> 
    <p>This app rocks!</p>
    <a href="#home" data-role="button">Go home</a>
</div>

另外jQuery Mobile也會自動的轉換像表單元素中的submit，reset，button，或image爲按鈕樣式。

還可以利用data-icon屬性建立各式各樣的按鈕，建立行內按鈕和按鈕組（水平或垂直的）

格式化文本

爲了使其儘可能的靈活，jQuery Mobile使更多的普通HTML內容更加獨立。加入適當的縮進使內容的可讀性更強。

有兩種佈局方法使其格式化變得更簡單：佈局表格和可摺疊的內容塊

佈局表格：組織內容以列的形式顯示，有兩列表格，和三列表格
可摺疊的內容：當點擊內容塊的標題，則會將其隱藏的詳細內容展現出來

下面是一個可摺疊內容的實例，單擊標題將看到具體的內容，再點擊標題則會將展現的內容隱藏。

<!DOCTYPE html>

<html>

    <head>
        <title>Collapsible Content Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>Home</h1>
            </div>
            <div data-role="content">
                <div data-role="collapsible" data-state="collapsed">
                    <h3>About this app</h3>
                    <p>This app rocks!</p>
                </div>
            </div>
        </div>
    </body>

</html>

觸摸選擇的表單元素

jQuery Mobile會自動替換標準的HTML表單元素，例如文本框，複選框，列表框。以這種自定義的樣式工作在觸摸設備上的表單元素，易用性更強。

例如，複選框將會變得很大，易於點選。點擊下拉列表時，將會彈出一組大按鈕列表選項，提供給用戶選擇。

該框架支持新的HTML5元素，例如search和range。另外你可以利用列表框並添加data-role=”slider”並添加兩個option選項，創建不錯的”打開/關閉”開關，

另外一個不錯的特點是組合單選框和組合複選框，可以利用fieldset元素添加屬性data-role=”controlgroup”來創建一組單選按鈕或複選框，jQuery Mobile自動格式化他們的格式。使它們看上去更fashion!

一般來說，開發者不需要關心表單的那些高級特性，開發者僅需要以正常的方式創建你的表單，jQuery Mobile框架會幫你完成剩餘的工作。另外有一件事情需要開發人員來完成，即使用div或fieldset 屬性data-role=”fieldcontain”包裝每一個label/field。這樣jQuery Mobile會在label/field對之間添加一個水平分割條。這樣的對齊方式可以使其更容易查找。

下面是一個jQuery Mobile版的表單元素

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery Mobile Form Demo</title>

        <link rel="stylesheet"
            href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

        <script
            src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

    </head>

    <body>
        <div data-role="page" id="home">
            <div data-role="header">
                <h1>
                    Ice Cream Order Form
                </h1>
            </div>
            <div data-role="content">
                <form action="#" method="get">
                    <div data-role="fieldcontain">
                        <label for="name">
                            Your Name:
                        </label>
                        <input type="text" name="name" id="name" value="" />
                    </div>
                    <div data-role="controlgroup">
                        <legend>
                            Which flavour(s) would you like?
                        </legend>
                        <input type="checkbox" name="vanilla" id="vanilla" class="custom" />
                        <label for="vanilla">
                            Vanilla
                        </label>
                        <input type="checkbox" name="chocolate" id="chocolate"
                            class="custom" />

                        <label for="chocolate">
                            Chocolate
                        </label>
                        <input type="checkbox" name="strawberry" id="strawberry"
                            class="custom" />
                        <label for="strawberry">
                            Strawberry
                        </label>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="quantity">
                            Number of Cones:
                        </label>
                        <input type="range" name="quantity" id="quantity" value="1"
                            min="1" max="10" />
                    </div>
                    <div data-role="fieldcontain">
                        <label for="sprinkles">
                            Sprinkles:
                        </label>
                        <select name="sprinkles" id="sprinkles" data-role="slider">
                            <option value="off">
                                No
                            </option>
                            <option value="on">
                                Yes
                            </option>
                        </select>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="store">
                            Collect from Store:
                        </label>
                        <select name="store" id="store">
                            <option value="mainStreet">
                                Main Street
                            </option>
                            <option value="libertyAvenue">
                                Liberty Avenue
                            </option>
                            <option value="circleSquare">
                                Circle Square
                            </option>
                            <option value="angelRoad">
                                Angel Road
                            </option>
                        </select>
                    </div>
                    <div class="ui-body ui-body-b">
                        <fieldset class="ui-grid-a">
                            <div class="ui-block-a">
                                <button type="submit" data-theme="d">
                                    Cancel
                                </button>
                            </div>
                            <div class="ui-block-b">
                                <button type="submit" data-theme="a">
                                    Order Ice Cream
                                </button>
                            </div>
                        </fieldset>
                    </div>
            </div>
        </div>
    </body>
</html>

列表視圖

列表視圖是jQuery Mobile中功能強大的一個特性。它會使標準的無序或有序列表應用更廣泛。應用方法就是在ul或ol標籤中添加data-role=”listview”屬性。

下面的一些情景將會用到創建列表視圖

簡單的文件列表項

簡單的文件列表，會有一個好看的盒環繞着每一個列表項
鏈接列表，框架會自動爲每一個鏈接加一個箭頭”>”，顯示在鏈接按鈕的右側
嵌套列表，如果你在一個li中嵌套另一個ul，jQuery Mobile會爲這個嵌套列表自動建立一個”page”，併爲它的父li自動加一個鏈接，這樣很容易實現樹狀菜單選項，設置功能等等。
分隔線的按鈕列表，在一個li中存放2個鏈接，你可以建立一個還垂直分隔條，用戶可點擊左側或右側的列表選項，展現不同的內容
記數氣泡如果你在列表選項中添加class=”ui-li-count”，框架會在其中生成一個”小泡泡”圖標顯現於列表選項的右側，並在”小泡泡”中顯示一些內容。類似在收信箱中看到已經收到的信息條數
查找過濾在ul或ol中添加data-filter=”true”屬性。則這個列表項就具備的查詢的功能。”Filter result…”文本框將會顯示在列表項的上面，允許用戶根據條件來將一個大的列表項變小（過濾顯示）
列表分隔將列表項分割，可以在任意列表項上添加屬性data-role=”list-divider
列表縮略圖和圖標。將img元素放在在列表項的開始， jQuery Mobile將會以縮略圖的形式來展現，圖片的大小爲80 X 80像素。如果添加class=”ui-li-icon”類樣式img元素的大小將會以16 X 16像素的圖標

以下是一個列表項的實例

<!DOCTYPE html>

<html>

    <head>

        <title>jQuery Mobile Lists Demo</title>
        <link rel="stylesheet"
            href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script
            src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>

        <div data-role="page" id="home">
            <div data-role="header">
                <h1>
                    Lists Demo
                </h1>
            </div>
            <div data-role="content">
                <h2 style="padding: 1em 0;">
                    A list view
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        Cat
                    </li>
                    <li>
                        Dog
                    </li>
                    <li>
                        Mouse
                    </li>
                    <li>
                        Squirrel
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A list of links
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#">About this app</a>
                    </li>
                    <li>
                        <a href="#">Buy ice cream</a>
                    </li>
                    <li>
                        <a href="#">Find a store</a>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    Nested lists
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        Play
                        <ul>
                            <li>
                                <a href="#">Easy</a>
                            </li>
                            <li>
                                <a href="#">Medium</a>
                            </li>
                            <li>
                                <a href="#">Hard</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Settings
                        <ul>
                            <li>
                                <a href="#">Graphics</a>
                            </li>
                            <li>
                                <a href="#">Sound</a>
                            </li>
                            <li>
                                <a href="#">Device</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Highscores
                        <ul>
                            <li>
                                <a href="#">View</a>
                            </li>
                            <li>
                                <a href="#">Submit</a>
                            </li>
                            <li>
                                <a href="#">Reset</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A split button list with filter
                </h2>
                <ul data-role="listview" data-inset="true" data-filter="true">
                    <li>
                        <a href="#">The Grapes of Wrath</a>
                        <a href="#">Buy This Book</a>
                    </li>
                    <li>
                        <a href="#">The Trial</a>
                        <a href="#">Buy This Book</a>
                    </li>
                    <li>
                        <a href="#">A Tale of Two Cities</a>
                        <a href="#">Buy This Book</a>
                    </li>
                </ul>
                <h2 style="padding: 1em 0;">
                    A list with count bubbles
                </h2>
                <ul data-role="listview" data-inset="true">
                    <li>
                        <a href="#">SuperWidgets</a>
                        <span class="ui-li-count">14</span>
                    </li>
                    <li>
                        <a href="#">MegaWidgets</a>
                        <span class="ui-li-count">0</span>
                    </li>
                    <li>
                        <a href="#">WonderWidgets</a>
                        <span class="ui-li-count">327</span>
                    </li>
                </ul>
            </div>
        </div>
    </body>

</html>

主題

jQuery Mobile渲染的灰色、黑色和藍色及圓形的組件使其看起來很漂亮，但是如果你的整個應用都使用這樣的樣式，將會使其變得很乏味。jQuery Mobile允許你自定義官方一些組件的主題。例如：

Font family
Drop shadows
按鈕和盒狀元素的邊框圓角半徑
圖標組件

另外，每一個主題包含26種不同顏色的切換（標記從a 到z），可以控制前景顏色，背景色和漸變色，典型用法是使頁面元素部分替換，你可以使用data-theme屬性。例如：

<!DOCTYPE html> 

<html> 

  <head> 

  <title>Page Title</title> 
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
  <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head> 

<body> 
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>
  <div data-role="content"> 
    <a href="#" data-role="button" data-theme="a">About this app</a>
    <a href="#" data-role="button" data-theme="b">About this app</a>
    <a href="#" data-role="button" data-theme="c">About this app</a>
    <a href="#" data-role="button" data-theme="d">About this app</a>
    <a href="#" data-role="button" data-theme="e">About this app</a>
  </div>
</div>

</body>
</html>

事件

框架還提供了簡單的用戶接口，並添加了移動設備支持的特殊事件。

<!DOCTYPE html> 

<html> 

<head> 

<title>jQuery Mobile Events</title> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script type="text/javascript">

 

$( function() {
  $('body').bind( 'taphold', function( e ) {
    alert( 'You tapped and held!' );
    e.stopImmediatePropagation();
    return false;
  } );  

  $('body').bind( 'swipe', function( e ) {
    alert( 'You swiped!' );
    e.stopImmediatePropagation();
    return false;
  } );  
 
} );

</script>  
</head>

<body> 
<div data-role="page" id="home">
  <div data-role="header">
    <h1>jQuery Mobile Events</h1>
  </div>
  <div data-role="content"> 
    <p>Try:</p>
    <ul>
      <li>Tapping and holding</li>
      <li>Swiping</li>
    </ul>
  </div>
</div>
</body>
</html>

轉自：http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html

jQuery Mobile入門

jQuery Msobile 都能做什麼?

jQuery Mobile 基本頁面結構

多個頁面在同一個頁面中

AJAX 導航

頁面切換效果

對話框

按鈕

格式化文本

觸摸選擇的表單元素

列表視圖

主題

事件

LINUX的ORACLE 中實現PL/SQL讀寫文件問題解決方法

CentOS系統安裝Tomcat切換JDK的方法

jQuery Mobile入門

Oracle+面試及答案

jQuery Mobile 入門教程

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結