HTML5移動開發之路（23）—— jQuery Mobile入門

最後更新：2016-10-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤： download 應用程式

本文為兄弟連IT教育機構官方 HTML5培訓教程，主要介紹：HTML5移動開發之路（23）—— jQuery Mobile入門

一、下載jQuery Mobile

：http://jquerymobile.com/

點擊Download

650) this.width=650;" src="http://img.blog.csdn.net/20140114133908421?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

下載如下zip包

650) this.width=650;" src="http://img.blog.csdn.net/20140114134116093?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

下載成功後如

650) this.width=650;" src="http://img.blog.csdn.net/20140114134618250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

解壓目錄

650) this.width=650;" src="http://img.blog.csdn.net/20140114134903156?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

點擊index.html進入demo首頁，這裡面有很多例子。

二、建立JQuery Mobile的Helloword

1、建立demo

650) this.width=650;" src="http://img.blog.csdn.net/20140114222429140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="600" style="border:0px;" />

2、建立網站

650) this.width=650;" src="http://img.blog.csdn.net/20140114143241578?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

3、網站建立成功後將產生的demo拷貝到網站中

650) this.width=650;" src="http://img.blog.csdn.net/20140114143417328?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

index.html

[html] view plain copy

print?650) this.width=650;" src="https://code.csdn.net/assets/CODE_ico.png" alt="在CODE上查看代碼片" width="12" height="12" style="border:0px;" />650) this.width=650;" src="https://code.csdn.net/assets/ico_fork.svg" alt="派生到My Code片" width="12" height="12" style="border:0px;" />

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Mobile Web 應用程式</title>

<link href="jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.mobile-1.3.2.min.js" type="text/javascript"></script>

</head>

<body>



<div data-role="page" id="page">

    <div data-role="header">

        <h1>第 1 頁</h1>

    </div>

    <div data-role="content">

        <ul data-role="listview">

            <li><a href="#page2">第 2 頁</a></li>

            <li><a href="#page3">第 3 頁</a></li>

            <li><a href="#page4">第 4 頁</a></li>

        </ul>

    </div>

    <div data-role="footer">

        <h4>頁面腳註</h4>

    </div>

</div>



<div data-role="page" id="page2">

    <div data-role="header">

        <h1>第 2 頁</h1>

    </div>

    <div data-role="content">

        內容

    </div>

    <div data-role="footer">

        <h4>頁面腳註</h4>

    </div>

</div>



<div data-role="page" id="page3">

    <div data-role="header">

        <h1>第 3 頁</h1>

    </div>

    <div data-role="content">

        內容

    </div>

    <div data-role="footer">

        <h4>頁面腳註</h4>

    </div>

</div>



<div data-role="page" id="page4">

    <div data-role="header">

        <h1>第 4 頁</h1>

    </div>

    <div data-role="content">

        內容

    </div>

    <div data-role="footer">

        <h4>頁面腳註</h4>

    </div>

</div>



</body>

</html>

在Chrome瀏覽器中運行結果：

650) this.width=650;" src="http://img.blog.csdn.net/20140114143757156?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

打包成apk在真實手機上的效果如下：

650) this.width=650;" src="http://img.blog.csdn.net/20140114144019015?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF3YW5nYW5iYW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" style="border:0px;" />

兩個demo打包下載：http://download.csdn.net/detail/lxq_xsyu/6865877

HTML5移動開發之路（23）—— jQuery Mobile入門

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

HTML5移動開發之路（23）—— jQuery Mobile入門

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support