编程 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 相关文章推荐

Mootools 1.2教程输入过滤第一部分（数字）

Sep 15 Javascript

jQuery 表单验证扩展代码(二)

Oct 20 Javascript

解析javascript 数组以及json元素的添加删除

Jun 26 Javascript

JavaScript中奇葩的假值示例应用

Mar 11 Javascript

举例讲解AngularJS中的模块

Jun 17 Javascript

深入解析JavaScript编程中的this关键字使用

Nov 09 Javascript

jQuery判断checkbox选中状态

May 12 Javascript

JS传值出现中文参数乱码的解决方法

Jun 30 Javascript

JavaScript实现输入框与清空按钮联动效果

Sep 09 Javascript

jQuery File Upload文件上传插件使用详解

Dec 06 Javascript

JS实现移动端整屏滑动的实例代码

Nov 10 Javascript

js 实现ajax发送步骤过程详解

Jul 25 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

解析strtr函数的效率问题

2013/06/26 PHP

PHP合并数组的2种方法小结

2016/11/24 PHP

老生常谈PHP面向对象之命令模式(必看篇)

2017/05/24 PHP

Laravel 实现密码重置功能

2018/02/23 PHP

ThinkPHP5.1+Ajax实现的无刷新分页功能示例

2020/02/10 PHP

prototype Element学习笔记(Element篇三)

2008/10/26 Javascript

客户端使用XML DOM加载json数据的方法

2010/09/28 Javascript

使用Post提交时须将空格转换成加号的解释

2013/01/14 Javascript

js取得html iframe中的元素和变量值

2014/06/30 Javascript

JavaScript中的lastIndexOf()方法使用详解

2015/06/06 Javascript

JavaScript 限制文本框不可输入英文单双引号的方法

2016/12/20 Javascript

JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】

2017/04/01 Javascript

Angular中点击li标签实现更改颜色的核心代码

2017/12/08 Javascript

JavaScript获取用户所在城市及地理位置

2018/04/21 Javascript

如何使用less实现随机下雪动画详解

2019/01/02 Javascript

js对象数组和对象的使用实例详解

2019/08/27 Javascript

如何使用RoughViz可视化Vue.js中的草绘图表

2021/01/30 Vue.js

解决await在forEach中不起作用的问题

2021/02/25 Javascript

[01:55]TI9显影之尘系列 - Evil Geniuses

2019/08/22 DOTA

Python2和Python3之间的str处理方式导致乱码的讲解

2019/01/03 Python

Python+pyplot绘制带文本标注的柱状图方法

2019/07/08 Python

详解Python 中sys.stdin.readline()的用法

2019/09/12 Python

pytorch-RNN进行回归曲线预测方式

2020/01/14 Python

django admin 根据choice字段选择的不同来显示不同的页面方式

2020/05/13 Python

如何解决cmd运行python提示不是内部命令

2020/07/01 Python

python中pathlib模块的基本用法与总结

2020/08/17 Python

澳大利亚宠物食品和用品商店：PETstock

2020/01/02 全球购物

C语言编程练习

2012/04/02 面试题

英文简历中的自我评价

2013/10/06 职场文书

热爱祖国演讲稿

2014/05/04 职场文书

环境卫生倡议书

2014/08/29 职场文书

商家认证委托书格式

2014/10/16 职场文书

党支部2014年度工作总结

2014/12/04 职场文书

研究生就业推荐表导师评语

2014/12/31 职场文书

市场部岗位职责范本

2015/04/15 职场文书

干货：如何写好工作计划！

2019/05/17 职场文书