编程 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地图拖动功能SpryMap的简单实现

Jul 17 Javascript

jquery mobile实现拨打电话功能的几种方法

Aug 05 Javascript

js实现局部页面打印预览原理及示例代码

Jul 03 Javascript

ECMAScript6函数剩余参数（Rest Parameters）

Jun 12 Javascript

JS实现刷新父页面不弹出提示框的方法

Jun 22 Javascript

完美JQuery图片切换效果的简单实现

Jul 21 Javascript

jQuery实现的右下角广告窗体跟随效果示例

Sep 16 Javascript

jQuery Password Validation密码验证

Dec 30 Javascript

详解Vuejs2.0之异步跨域请求

Apr 20 Javascript

浅谈webpack打包过程中因为图片的路径导致的问题

Feb 21 Javascript

JavaScript中.min.js和.js文件的区别讲解

Feb 13 Javascript

解决vue-cli项目开发运行时内存暴涨卡死电脑问题

Oct 29 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中判断一个字符串包含另一个字符串的方法

2007/03/19 PHP

PHP调用Linux的命令行执行文件压缩命令

2013/01/27 PHP

php的hash算法介绍

2014/02/13 PHP

详解WordPress开发中的get_post与get_posts函数使用

2016/01/04 PHP

在thinkphp5.0路径中实现去除index.php的方式

2019/10/16 PHP

Jquery 动态添加按钮实现代码

2010/05/06 Javascript

js下判断 iframe 是否加载完成的完美方法

2010/10/26 Javascript

extjs之去除s.gif的影响

2010/12/25 Javascript

js拦截alert对话框另类应用

2013/01/16 Javascript

jQuery中contents()方法用法实例

2015/01/08 Javascript

js实现同一页面多个运动效果的方法

2015/04/10 Javascript

JavaScript获取当前运行脚本文件所在目录的方法

2016/02/03 Javascript

JS基于构造函数实现的菜单滑动显隐效果【测试可用】

2016/06/21 Javascript

JavaScript数据结构之二叉树的遍历算法示例

2017/04/13 Javascript

JavaScript中BOM对象原理与用法分析

2019/07/09 Javascript

jQuery实现图片下载代码

2019/07/18 jQuery

jquery实现烟花效果(面向对象)

2020/03/10 jQuery

JavaScript用document.write()输出换行的示例代码

2020/11/26 Javascript

Python下rrdtool模块的基本使用方法

2015/11/13 Python

Python的collections模块中的OrderedDict有序字典

2016/07/07 Python

Python在信息学竞赛中的运用及Python的基本用法(详解)

2017/08/15 Python

对python条件表达式的四种实现方法小结

2019/01/30 Python

python实现栅栏加解密支持密钥加密

2019/03/20 Python

python实现数据分析与建模

2019/07/11 Python

python中numpy.empty()函数实例讲解

2021/02/05 Python

HTML5+CSS3模仿优酷视频截图功能示例

2017/01/05 HTML / CSS

Zavvi西班牙：电子游戏、极客服装、Blu-ray、Funko Pop等

2019/05/03 全球购物

Timberland法国官网：购买靴子、鞋子、衣服、夹克和配饰

2019/11/30 全球购物

美团网旗下网上订餐平台：美团外卖

2020/03/05 全球购物

合伙协议书范本

2014/04/21 职场文书

计算机科学与技术专业求职信

2014/09/03 职场文书

西双版纳导游词

2015/02/03 职场文书

房屋产权证明书

2015/06/19 职场文书

《折线统计图》教学反思

2016/02/22 职场文书

《中国古代诗歌散文欣赏》高中语文教材

2019/08/20 职场文书

2019年12月24日平安夜祝福语集锦

2019/12/24 职场文书