Html5学习-JQuery mobile（一）学习使用

最新推荐文章于 2021-06-28 07:51:21 发布

SteamPY

最新推荐文章于 2021-06-28 07:51:21 发布

阅读量1.2k

点赞数

分类专栏：【HTML5】文章标签： Java JQuery mobile JQM

本文链接：https://blog.csdn.net/xiabing082/article/details/45584755

版权

【HTML5】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Html5学习-JQuery mobile web app使用

1. JQuery mobile简介

JQuery mobile也就是我们常说的(JQM,或者 JQmobile) ,是JQuery在手机上或者在平板上的一个版本，是创建移动 web app的框架

JQM 是用在所有流行移动设备上，它使用Html5 和 css3 尽可能少的脚步来布局的。利用JQM 屏蔽了所有设备浏览器间的差异，它提供了一整套的UI组件

提供了丰富的官方文档，还提供了针对移动端浏览器的事件，比如触摸，滑动，页面跳转等。

所以作为我们开发 web app的流行框架之一。

JQM使用参考网址

http://www.w3school.com.cn/jquerymobile/jquerymobile_events_page.asp

2. 基本的框架

<!DOCTYPE html>
<html>
<head>
	<title>jQuery Mobile Demo</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
</body> 
</html>

这里包含了头部head和身体body信息，

<title>jQuery Mobile Demo</title>

这个页面title

页面显示时候编码，显示html格式类型

这个是初始化移动设备的浏览显示，在不同移动设备显示方式不同，可鞥吧页面缩放，添加后默认不缩放了。

引入jqm 的css样式，这里显示版本较低，一般1.4.3了

这里引入了jquery,以及jquery的脚本

3. 页面body显示内容

 <body>
       <div data-role="page">
            <div data-role="header">
                <h1>Header</h1>
            </div>
            <div role="main" class="ui-content">
                <p>Content goes here</p>
            </div>
            <div data-role="footer">
                <h4>Footer</h4>
            </div>
        </div>
</body>

4. 多个页面在同一个页面显示，并跳转

在一个页面中添加多个data-role=”page”

JQM中可以实现单一html文件中创建多个页面并且相互跳转

但是需要使用唯一的id来分隔每一个页面，并用href来连接彼此

<body>
       <div data-role="page" id="index">
            <div data-role="header">
                <h1>Header1</h1>
            </div>
            <div data-role="content">
                <p>Content goes here1</p>
		<p><a href="#index1">index</a></p>
            </div>
            <div data-role="footer">
                <h4>Footer1</h4>
            </div>
        </div>

       <div data-role="page" id="index1">
            <div data-role="header">
                <h1>Header2</h1>
            </div>
            <div role="main" class="ui-content">
                <p>Content goes here2</p>
		<p><a href="#index">index2</a></p>
            </div>
            <div data-role="footer">
                <h4>Footer2</h4>
            </div>
        </div>
    </body>

5. 页面切换效果

JQM 拥有从一个页面跳转到另一个页面的效果，过渡效果可应用于任何跳转

data-transition="slide"

例如 <p><a href=”#about” data-transition=”flip”>关于页面</a></p>

6. jqm 拥有很多页面事件

这里pagebeforecreate是在页面即将初始化的触发，pagecreate是在页面创建的时候，但是还没加载页面元素之前，

pageinit是页面完成初始化，并完成页面加载触发

$(document).on("pageinit",function(){
  alert("触发 pageinit 事件 - 页面已初始化，DOM 已加载，jQuery Mobile 已完成页面增强。")
}); 
$(document).on("pagebeforecreate",function(){
  alert("触发 pagebeforecreate 事件 - 页面即将初始化。jQuery Mobile 仍未开始增强页面。");
});                     
$(document).on("pagecreate",function(){
  alert("触发 pagecreate 事件 - 已创建页面，但增强未完成。");
});

$(document).on("pageload",function(event,data){
  alert("触发 pageload 事件！\nURL: " + data.url);
});
$(document).on("pageloadfailed",function(event,data){
  alert("抱歉，被请求页面不存在。");
});

$(document).on("pagebeforeshow","#pagetwo",function(){
  alert("触发 pagebeforeshow 事件 - 页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){
  alert("触发 pageshow 事件 - 现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){
  alert("触发 pagebeforehide 事件 - 页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){
  alert("触发 pagehide 事件 - 现在隐藏页面二");
});

android 和 html5学习群：191974931