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

改进：论坛UBB代码自动插入方式

Dec 22 Javascript

Javascript原型链和原型的一个误区

Oct 22 Javascript

利用jQuery和CSS将背景图片拉伸

Oct 16 Javascript

基于JavaScript FileReader上传图片显示本地链接

May 27 Javascript

详解webpack的配置文件entry与output

Aug 21 Javascript

Angularjs使用过滤器完成排序功能

Sep 20 Javascript

Scala解析Json字符串的实例详解

Oct 11 Javascript

详解js的视频和音频采集

Aug 09 Javascript

jQuery选择器之层次选择器用法实例分析

Feb 19 jQuery

微信小程序实现滚动加载更多的代码

Dec 06 Javascript

JavaScript实现缓动动画

Nov 25 Javascript

vue项目多环境配置(.env)的实现

Jul 21 Vue.js

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

关于页面优化和伪静态

2009/10/11 PHP

ThinkPHP表单自动验证实例

2014/10/13 PHP

PHP开发中常用的十个代码样例

2016/02/02 PHP

PHPStudy下如何为Apache安装SSL证书的方法步骤

2019/01/23 PHP

Laravel定时任务的每秒执行代码

2019/10/22 PHP

用javascript实现的支持lrc歌词的播放器

2007/05/17 Javascript

基于jQuery的图片大小自动适应实现代码

2010/11/17 Javascript

新鲜出炉的js tips提示效果

2011/04/03 Javascript

js实现在字符串中提取数字

2013/11/05 Javascript

javascript将DOM节点添加到文档的方法实例分析

2015/08/04 Javascript

JavaScript中Array的实用操作技巧分享

2016/09/11 Javascript

jQuery插件扩展实例【添加回调函数】

2016/11/26 Javascript

利用iscroll4实现轮播图效果实例代码

2017/01/11 Javascript

Angular中使用MathJax遇到的一些问题

2017/12/15 Javascript

简单实现节流函数和防抖函数过程解析

2019/10/08 Javascript

Vue发布订阅模式实现过程图解

2020/04/30 Javascript

Openlayers实现距离面积测量

2020/09/28 Javascript

[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2

2018/06/03 DOTA

Python跳出循环语句continue与break的区别

2014/08/25 Python

Python数据类型中的“冒号“[::]——分片与步长操作示例

2018/01/24 Python

Python面向对象类继承和组合实例分析

2018/05/28 Python

Python3.5运算符操作实例详解

2019/04/25 Python

Python读取xlsx文件的实现方法

2019/07/04 Python

Python彻底删除文件夹及其子文件方式

2019/12/23 Python

美国顶级户外凉鞋品牌：Chacos

2017/03/27 全球购物

亚马逊意大利站点：Amazon.it

2020/12/31 全球购物

中学生在校期间的自我评价分享

2013/11/13 职场文书

小学教师师德演讲稿

2014/05/06 职场文书

校园活动策划方案

2014/06/13 职场文书

重阳节慰问信

2015/02/15 职场文书

北京青年观后感

2015/06/15 职场文书

《雪域豹影》读后感：父爱的伟大

2019/12/23 职场文书

java实现对Hadoop的操作

2021/07/01 Java/Android

使用Redis实现点赞取消点赞的详细代码

2022/03/20 Redis

Redis如何使用乐观锁(CAS)保证数据一致性

2022/03/25 Redis

AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解

2022/04/09 Javascript