同一个页面多个page之间的切换
Posted 考考
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了同一个页面多个page之间的切换相关的知识,希望对你有一定的参考价值。
今天接触了JQ Mobile以下是本小白的理解(不怕大家笑话):
创建移动 web 应用程序的框架;适用于所有流行的智能手机和平板电脑; 将“写得更少、做得更多”这一理念提升到了新的层次:它会自动为网页设计交互的易用外观,并在所有移动设计上保持一致。
从官网上可以看出jQuery mobile内容分为四大部分:
jQM的内容分为四大部分:
(1)Page & Navigation
(2)CSS Framework
(3)Widgets(小部件)
(4)Form Widgets
以下用到的文件都可在官网下载到:
CSS文件:jquery.mobile.css
jQuery文件:jquery.js
jQuery Mobile文件:jquery.mobile.js
这次主要接触的是页面和页面切换效果
jQM中的“Page(页面)” jqm中的Page指WebApp中的“一屏内容”——一个html文件中可以只声明一个Page(单页模板),也可以声明多个Page(多页模板)——浏览器中某个时刻最多只能显示一个Page!
一个Page的基本结构:
<div/section data-role="page">
<div/header data-role="header"></div/header>
<div/section class="ui-content"></div/section>
<div/footer data-role="footer"></div/footer>
</div>
在多个Page间跳转有两种方式:
(1)超链接:
<a href="#PageID/xx.html"></a>
(2)JS编码:
<button onclick="$.mobile.changePage(‘#PageID/xx.html‘);"></button>
jQM中常用的data-*属性: |
data-role="page" |
data-role="header" |
data-role="content" |
data-role="footer" |
data-theme="a/b" 用于任何元素,设置当前元素的主题色 |
data-position="fixed" 用于footer,实现固定在Page的底部 |
data-title="" 用于Page,指定当前浏览器的标题栏内容 |
data-rel="back" 用于超链接,可以返回到当前Page的上一个Page |
data-transition="十种可能值" 用于页面跳转的超链接,指定页面切换过场动画 |
data-role="button" 用于超链接,使其呈现块级按钮的外观 |
data-inline="true" 用于按钮,声明为行内按钮,本质就是添加.ui-btn-inline |
data-icon="50种图标" 可用于为按钮指定图标 |
data-iconpos="left/right/top/bottom/notext" |
以下是今天做的案例分享分享:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.css"/>
<script src="js/jquery-1.11.3.js"></script>
<script src="jqm/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="p21">
<div data-role="header">
<h1>头部-p21</h1>
</div>
<div class="ui-content">
<h1>一个HTML页面包含多个page</h1>
<h2>p21-第一个page</h2>
<a href="#p22">跳转到第二个page</a>
<button onclick="$.mobile.changePage(‘#p23‘)">跳到第三个页面-p23</button>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
<div data-role="page" id="p22">
<div data-role="header">
<h1>头部-p22</h1>
</div>
<div class="ui-content">
<h2>p22-第二个page</h2>
<a href="#p23">跳转到第三个page</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
<div data-role="page" id="p23">
<div data-role="header">
<h1>头部-p23</h1>
</div>
<div class="ui-content">
<h2>p23-第三个page</h2>
<a href="#" data-rel="back">返回上一个页面</a>
</div>
<div data-role="footer">
<h1>尾部</h1>
</div>
</div>
</body>
</html>
以上是关于同一个页面多个page之间的切换的主要内容,如果未能解决你的问题,请参考以下文章
QtQuick多页面切换多页面切换动画多个qml文件数据交互
在 Vue 路由器页面之间切换会导致 VueJS 上的多个事件触发()