编程 Javascript

jquery Mobile入门—外部链接切换示例代码

Posted in Javascript onJanuary 08, 2013

1、内部链接是通过在<a>标签内将href属性值设为#+id的形式，外链则是在<a>中增加rel属性，并将属性值设为external，如：<a href="about.html" rel="external">3i Studio</a>
2、外部链接切换示例代码：

<!DOCTYPE HTML > 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY> 
<section id="page1" data-role="page"> 
<header data-role="header"><h1>天气预报</h1></header> 
<div data-role="content" class="content"> 
<p><a href="#w1">今天</a></p>| 
<p><a href="#">明天</a></p> 
</div> 
<footer data-role="footer"><h1>@2013 3i studio</h1></footer> 
</section> 
<section id="w1" data-role="page" data-add-back-btn="true"> 
<header data-role="header"><h1>今天天气</h1></header> 
<div data-role="content" class="content"> 
<p>4~7'C<br />晴转多云<br />微风</p> 
<em style="float:right;padding:5px"> 
<a href="about.html" rel="external">3i Studio</a>提供 
</em> 
</div> 
<footer data-role="footer"><h1>@2013 3i studio</h1></footer> 
</section> 
</BODY> 
</HTML>

外部文件about.html代码:

<!DOCTYPE HTML > 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<meta name="viewport" content="width=device-width,initial-scale=1"/> 
<link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> 
<script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> 
<script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> 
</HEAD> 
<BODY> 
<section id="page1" data-role="page" data-add-back-btn="true"> 
<header data-role="header"><h1>关于3I Studio</h1></header> 
<div data-role="content" class="content"> 
<p>3I Studio是一个致力于创业创新的技术团队</p>| 
</div> 
<footer data-role="footer"><h1>@2013 3i studio</h1></footer> 
</section> 
</BODY> 
</HTML>

3、效果图预览：

jquery Mobile入门—外部链接切换示例代码

点击3i Studio进行外部链接：

jquery Mobile入门—外部链接切换示例代码

4、返回上一页，则在<a>标签中添加data-rel属性，并将属性设为back,，如： <a data-rel="back">返回上一页</a>

jquery Mobile入门—外部链接切换示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript错误的认识不用关心内存管理

Dec 15 Javascript

IE8的JavaScript点击事件(onclick)不兼容的解决方法

Nov 22 Javascript

javascript版的in_array函数（判断数组中是否存在特定值）

May 09 Javascript

简述JavaScript中正则表达式的使用方法

Jun 15 Javascript

使用Meteor配合Node.js编写实时聊天应用的范例

Jun 23 Javascript

JavaScript setTimeout使用闭包功能实现定时打印数值

Dec 18 Javascript

js封装tab标签页实例分享

Dec 19 Javascript

完美实现js焦点轮播效果(一)

Mar 07 Javascript

angular+webpack2实战例子

May 23 Javascript

关于jquery form表单序列化的注意事项详解

Aug 01 jQuery

Bootstrap table使用方法记录

Aug 23 Javascript

angularjs $http调用接口的方式详解

Aug 13 Javascript

jquery Moblie入门—hello world的示例代码学习

Jan 08 #Javascript

jquery Mobile入门—多页面切换示例学习

Jan 08 #Javascript

javascript 系统文件夹文件操作及参数介绍

Jan 08 #Javascript

12款经典的白富美型—jquery图片轮播插件—前端开发必备

Jan 08 #Javascript

滚动图片效果 jquery实现回旋滚动效果

Jan 08 #Javascript

打豆豆小游戏用javascript编写的[打豆豆]小游戏

Jan 08 #Javascript

jQuery.buildFragment使用方法及思路分析

Jan 07 #Javascript

You might like

一些 PHP 管理系统程序中的后门

2009/08/05 PHP

php 中文字符入库或显示乱码问题的解决方法

2010/04/12 PHP

php中在PDO中使用事务(Transaction)

2011/05/14 PHP

php使用parse_str实现查询字符串解析到变量中的方法

2017/02/17 PHP

PHP通过GD库实现验证码功能示例

2019/02/23 PHP

js 内存释放问题

2010/04/25 Javascript

javascript简易缓动插件(源码打包)

2012/02/16 Javascript

Node.js中HTTP模块与事件模块详解

2014/11/14 Javascript

深入理解JavaScript系列（45）：代码复用模式（避免篇）详解

2015/03/04 Javascript

分享十五款 jQuery 社交网络分享插件

2015/05/16 Javascript

vue动态路由实现多级嵌套面包屑的思路与方法

2017/08/16 Javascript

JS实现可视化文件上传

2018/09/08 Javascript

深入理解vue中的slot与slot-scope

2019/04/22 Javascript

D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

2019/05/09 Javascript

axios如何利用promise无痛刷新token的实现方法

2019/08/27 Javascript

[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

全面了解python字符串和字典

2016/07/07 Python

windows下Python实现将pdf文件转化为png格式图片的方法

2017/07/21 Python

Python将图片转换为字符画的方法

2020/06/16 Python

python实现简易数码时钟

2021/02/19 Python

pybind11和numpy进行交互的方法

2019/07/04 Python

python中将两组数据放在一起按照某一固定顺序shuffle的实例

2019/07/15 Python

在Python中使用MySQL--PyMySQL的基本使用方法

2019/11/19 Python

关于ZeroMQ 三种模式python3实现方式

2019/12/23 Python

Python 线性回归分析以及评价指标详解

2020/04/02 Python

Python限制内存和CPU使用量的方法（Unix系统适用）

2020/08/04 Python

使用css创建三角形使用CSS3创建3d四面体原理及代码(html5实践)

2013/01/06 HTML / CSS

HTML5和以前HTML4的区别整理

2013/10/20 HTML / CSS

Currentbody德国站：健康与美容技术专家

2020/04/05 全球购物

社区综治宣传月活动总结

2014/07/02 职场文书

银行竞聘上岗演讲稿

2014/09/12 职场文书

2014副局长群众路线对照检查材料思想汇报

2014/09/22 职场文书

护士长2014年度工作总结

2014/11/11 职场文书

2016年国培心得体会及反思

2016/01/13 职场文书

Windows下用Nginx配置https服务器及反向代理的问题

2021/09/25 Servers

Python利用zhdate模块实现农历日期处理

2022/03/31 Python