编程 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的onchange事件与jQuery的change()方法比较

Sep 28 Javascript

jquery ajax提交表单数据的两种方式

Nov 24 Javascript

JS Loading功能的简单实现

Nov 29 Javascript

JavaScript实现网页加载进度条代码超简单

Sep 21 Javascript

jquery及js实现动态加载js文件的方法

Jan 21 Javascript

jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】

Sep 04 Javascript

AngularJS解决ng界面长表达式(ui-set)的方法分析

Nov 07 Javascript

JS识别浏览器类型(电脑浏览器和手机浏览器)

Nov 18 Javascript

简单了解Ajax表单序列化的实现方法

Jun 14 Javascript

详解Vue-cli3.X使用px2rem遇到的问题

Aug 09 Javascript

解决layer.confirm快速点击会重复触发事件的问题

Sep 23 Javascript

JS实现炫酷雪花飘落效果

Aug 19 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中执行cmd命令的方法

2014/10/11 PHP

学习php设计模式 php实现适配器模式

2015/12/07 PHP

Linux环境下php实现给网站截图的方法

2016/05/03 PHP

php实现生成带二维码图片并强制下载功能

2018/02/24 PHP

YII框架常用技巧总结

2019/04/27 PHP

ThinkPHP5与单元测试PHPUnit使用详解

2020/02/23 PHP

jQuery动态添加的元素绑定事件处理函数代码

2011/08/02 Javascript

jQuery知识点整理

2015/01/30 Javascript

JavaScript 模块的循环加载实现方法

2015/12/13 Javascript

JS正则表达式验证中文字符

2017/05/08 Javascript

老生常谈Bootstrap媒体对象

2017/07/06 Javascript

详解Vue组件插槽的使用以及调用组件内的方法

2018/11/13 Javascript

JavaScript惰性求值的一种实现方法示例

2019/01/11 Javascript

详解Vue组件之间通信的七种方式

2019/04/14 Javascript

使用Vue 自定义文件选择器组件的实例代码

2020/03/04 Javascript

基于Vue sessionStorage实现保留搜索框搜索内容

2020/06/01 Javascript

[02:56]DOTA2英雄基础教程巨魔战将

2013/12/10 DOTA

[46:00]Ti4 冒泡赛第二轮LGD vs C9 2

2014/07/14 DOTA

如何利用Fabric自动化你的任务

2016/10/20 Python

TensorFlow 模型载入方法汇总(小结)

2018/06/19 Python

Python基于递归算法求最小公倍数和最大公约数示例

2018/07/27 Python

python画图把时间作为横坐标的方法

2019/07/07 Python

解决Python数据可视化中文部分显示方块问题

2020/05/16 Python

python 将html转换为pdf的几种方法

2020/12/29 Python

美国领先的商务贺卡出版商：The Gallery Collection

2018/02/13 全球购物

Jdbc数据访问技术面试题

2012/03/30 面试题

2014年公司植树节活动方案

2014/03/04 职场文书

医学生自我鉴定范文

2014/03/26 职场文书

陈胜吴广起义口号

2014/06/20 职场文书

教师党员批评与自我批评

2014/10/15 职场文书

2014年采购部工作总结

2014/11/20 职场文书

草房子读书笔记

2015/06/29 职场文书

2016年春季开学典礼新闻稿

2015/11/25 职场文书

正确使用MySQL INSERT INTO语句

2021/05/26 MySQL

python scrapy简单模拟登录的代码分析

2021/07/21 Python

Oracle 触发器trigger使用案例

2022/02/24 Oracle