首頁  >  文章  >  web前端  >  小強的HTML5行動開發之路(23)- jQuery Mobile入門

小強的HTML5行動開發之路(23)- jQuery Mobile入門

黄舟
黄舟原創
2017-02-04 14:01:491363瀏覽

一、下載jQuery Mobile

下載網址:http://jquerymobile.com/

點選Download

小強的HTML5行動開發之路(23)- jQuery Mobile入門

下載如下zip包

解目錄

小強的HTML5行動開發之路(23)- jQuery Mobile入門圖圖:

小強的HTML5行動開發之路(23)- jQuery Mobile入門點擊index.html進入demo主頁,這裡面有許多範例。

二、創建JQuery Mobile的Helloword

1、創建demo小強的HTML5行動開發之路(23)- jQuery Mobile入門

2、新建後站點

小強的HTML5行動開發之路(23)- jQuery Mobile入門3、站點建立成功後站點建立成功後將產生的de html

<!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瀏覽器中運行結果:

小強的HTML5行動開發之路(23)- jQuery Mobile入門

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

小強的HTML5行動開發之路(23)- jQuery Mobile入門

兩個demonet/detailload. /lxq_xsyu/6865877

以上就是 小強的HTML5行動開發之路(23)- jQuery Mobile入門的內容,更多相關內容請關注PHP中文網(www.php.cn)!

小強的HTML5行動開發之路(23)- jQuery Mobile入門

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn