同一个页面多个page之间的切换

最新推荐文章于 2024-10-22 11:39:45 发布

转载最新推荐文章于 2024-10-22 11:39:45 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wl0357/p/5313044.html

文章标签：

#javascript #ViewUI

本文介绍JQMobile框架的基础知识，包括其四大组成部分及如何创建和切换页面。通过实例展示了多页面布局的实现方法及其过渡动画效果。

今天接触了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>

在多个Page间跳转有两种方式：

(1)超链接：

(2)JS编码：

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>

转载于:https://www.cnblogs.com/wl0357/p/5313044.html