Rumah >hujung hadapan web >html tutorial > 小强的HTML5移动开发之路（23）—— jQuery Mobile入门

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

黄舟asal: 2017-02-04 14:01:491379semak imbas

一、下载jQuery Mobile

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

点击Download

下载如下zip包

下载成功后如下图

解压目录如图：

点击index.html进入demo主页，这里面有很多例子。

二、创建JQuery Mobile的Helloword

1、创建demo

2、新建站点

3、站点建立成功后将生成的demo拷贝到站点中

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浏览器中运行结果：

打包成apk在真实手机上的效果如下：

两个demo打包下载：http://download.csdn.net/detail/lxq_xsyu/6865877

以上就是小强的HTML5移动开发之路（23）—— jQuery Mobile入门的内容，更多相关内容请关注PHP中文网（www.php.cn）！

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：小强的HTML5移动开发之路（22）—— Adobe DreamWeaver CS6安装与破解Artikel seterusnya：小强的HTML5移动开发之路（24）—— PhoneGap Android开发环境搭建

Artikel berkaitan

Lihat lagi