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

日期函数扩展类Ver0.1.1

Sep 07 Javascript

jquery1.4后 jqDrag 拖动不可用

Feb 06 Javascript

jQuery的$.proxy()应用示例介绍

Apr 03 Javascript

jquery实现的网页自动播放声音

Apr 30 Javascript

AngularJS通过$sce输出html的方法

Sep 22 Javascript

jQuery实现表格文本框淡入更改值后淡出效果

Sep 27 Javascript

微信小程序项目总结之点赞删除列表分享功能

Jun 25 Javascript

对vue v-if v-else-if v-else 的简单使用详解

Sep 29 Javascript

vue使用vuex实现首页导航切换不同路由的方法

May 08 Javascript

JS实现的字符串数组去重功能小结

Jun 17 Javascript

JavaScript 中的六种循环方法

Jan 06 Javascript

使用原生javascript开发计算器实例代码

Feb 21 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 intval的测试代码发现问题

2008/07/27 PHP

php 无限级分类学习参考之对ecshop无限级分类的解析带详细注释

2010/03/23 PHP

PHP获取POST数据的几种方法汇总

2015/03/03 PHP

php计算两个文件相对路径的方法

2015/03/14 PHP

详解PHP的Yii框架中组件行为的属性注入和方法注入

2016/03/18 PHP

TP3.2批量上传文件或图片同名冲突问题的解决方法

2017/08/01 PHP

prototype 源码中文说明之 prototype.js

2006/09/22 Javascript

Ext第一周史上最强学习笔记---GridPanel（基础篇）

2008/12/29 Javascript

JavaScript 原型链学习总结

2010/10/29 Javascript

jqeury-easyui-layout问题解决方法

2014/03/24 Javascript

jquery实现点击查看更多内容控制段落文字展开折叠效果

2015/08/06 Javascript

Jquery和JS获取ul中li标签的实现方法

2016/06/02 Javascript

深入理解JavaScript中的并行处理

2016/09/22 Javascript

AngularJS打开页面隐藏显示表达式用法示例

2016/12/25 Javascript

Node.js环境下Koa2添加travis ci持续集成工具的方法

2017/06/19 Javascript

React-Native中禁用Navigator手势返回的示例代码

2017/09/09 Javascript

weebox弹出窗口不居中显示的解决方法

2017/11/27 Javascript

Layui组件Table绑定行点击事件和获取行数据的方法

2018/08/19 Javascript

[04:51]TI10典藏宝瓶Ⅱ外观视频展示

2020/08/15 DOTA

Python实现爬取知乎神回复简单爬虫代码分享

2015/01/04 Python

Python中import导入上一级目录模块及循环import问题的解决

2016/06/04 Python

Python算法应用实战之栈详解

2017/02/04 Python

Python语言实现将图片转化为html页面

2017/12/06 Python

Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解

2018/09/19 Python

python之列表推导式的用法

2019/11/29 Python

戴森英国官网：Dyson英国

2019/05/07 全球购物

专业幼师实习生自我鉴定范文

2013/12/08 职场文书

厨师个人自我鉴定范文

2014/04/19 职场文书

农业开发项目建议书

2014/05/16 职场文书

2015年五一劳动节慰问信

2015/03/23 职场文书

工作时间调整通知

2015/04/24 职场文书

刑事法律意见书

2015/06/04 职场文书

消防宣传标语大全

2015/08/03 职场文书

谢师宴学生答谢词

2015/09/30 职场文书

HTML基础详解(上)

2021/10/16 HTML / CSS

Spring Data JPA框架Repository自定义实现

2022/04/28 Java/Android