小强的HTML5移动开发之路（23）—— jQuery Mobile入门

程序员文章站 2022-04-22 19:09:24

...

一、下载jQuery Mobile

下载地址：http://jquerymobile.com/

点击Download

小强的HTML5移动开发之路（23）—— jQuery Mobile入门

下载如下zip包

小强的HTML5移动开发之路（23）—— jQuery Mobile入门

下载成功后如下图

小强的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、站点建立成功后将生成的demo拷贝到站点中

小强的HTML5移动开发之路（23）—— jQuery Mobile入门

index.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入门