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

更新时间：2013年01月08日 10:54:57 作者：

内部链接是通过在a标签内将href属性值设为#+id的形式，外链则是在a中增加rel属性，并将属性值设为external,感兴趣的朋友可以了解下哦

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、效果图预览：

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

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

您可能感兴趣的文章:

JQuery Tips(3) 关于$()包装集内元素的改变
JQuery包装集内的元素在一开始的选定后，还可以通过一系列JQuery提供的方法对包装集内的元素进行扩充，修改，筛选，删除find()方法 VS filter()方法
2009-12-12
jQuery简介_动力节点Java学院整理
目前jQuery有1.x和2.x两个主要版本，区别在于2.x移除了对古老的IE 6、7、8的支持，因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8，下文给大分享jquery 简介的相关知识，感兴趣的朋友一起看看吧
2017-07-07
jquery实现输入框实时输入触发事件代码
本文主要分享了jquery实现输入框实时输入触发事件的代码，代码简单易懂，需要的朋友一起来看下吧
2016-12-12
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
今天我们就带大家体会一下级联菜单的显示，只是实现了简单的效果，不过大都原理是一样的
2014-04-04
详谈表单格式化插件jquery.serializeJSON
下面小编就为大家带来一篇详谈表单格式化插件jquery.serializeJSON。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
基于jQuery倒计时插件实现团购秒杀效果
倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery倒计时超级实现团购秒杀效果，感兴趣的朋友一起学习吧
2016-05-05
Jquery的autocomplete插件用法及参数讲解
今天小编就为大家分享一篇关于Jquery的autocomplete插件用法及参数讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-03-03
jquery实现tab选项卡切换效果（悬停、下方横线动画位移）
这篇文章主要介绍了jquery实现tab选项卡切换效果，实现悬停、下方横线动画位移，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
一看就懂：jsonp详解
这篇文章主要介绍了一看就懂：jsonp详解,本文用浅显易懂的语言组织讲解了什么是jsonp、jsonp怎么用、jsonp使用实例等内容,需要的朋友可以参考下
2015-06-06
用Jquery重写windows.alert方法实现思路
本文将介绍下用Jquery重写windows.alert方法，已经在 IE8 , firefox3.0.11下面测试通过，喜欢的朋友可以放心使用
2013-04-04