编程 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中的有名函数和无名函数

Oct 17 Javascript

javascript 鼠标滚轮事件

Apr 09 Javascript

两种WEB下的模态对话框（asp.net或js的分别实现）

Dec 02 Javascript

jquery得到font-size属性值实现代码

Sep 30 Javascript

JavaScript sub方法入门实例（把字符串显示为下标）

Oct 17 Javascript

jQuery Ajax()方法使用指南

Nov 19 Javascript

使用Javascript写的2048小游戏

Nov 25 Javascript

微信小程序使用第三方库Underscore.js步骤详解

Sep 27 Javascript

jQuery鼠标事件总结

Oct 13 Javascript

ajax异步请求详解

Jan 06 Javascript

JavaScript 严格模式(use strict)用法实例分析

Mar 04 Javascript

使用vue引入maptalks地图及聚合效果的实现

Aug 10 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

攻克CakePHP系列一连接MySQL数据库

2008/10/22 PHP

php带密码功能并下载远程文件保存本地指定目录修改加强版

2010/05/16 PHP

PHP UTF8中文字符截断函数代码

2012/09/11 PHP

PHP以mysqli方式连接类完整代码实例

2014/07/15 PHP

php验证session无效的解决方法

2014/11/04 PHP

phpMyAdmin安装并配置允许空密码登录

2015/07/04 PHP

smarty模板数学运算示例

2016/12/11 PHP

javascript学习笔记(五) Array 数组类型介绍

2012/06/19 Javascript

javascript:FF/Chrome与IE动态加载元素的区别说明

2014/01/26 Javascript

调用DOM对象的focus使文本框获得焦点

2014/02/19 Javascript

类似天猫商品详情随浏览器移动的示例代码

2014/02/27 Javascript

Angularjs实现下拉框联动的示例代码

2017/08/22 Javascript

jsonp跨域获取数据的基础教程

2018/07/01 Javascript

解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题

2018/09/14 Javascript

jQuery使用each遍历循环的方法

2018/09/19 jQuery

详解基于webpack&gettext的前端多语言方案

2019/01/29 Javascript

vant IndexBar实现的城市列表的示例代码

2019/11/20 Javascript

vue使用echarts画组织结构图

2021/02/06 Vue.js

[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29

2020/10/29 DOTA

[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19

2020/12/24 DOTA

TensorFlow 多元函数的极值实例

2020/02/10 Python

python实现提取str字符串/json中多级目录下的某个值

2020/02/27 Python

Python 实现将大图切片成小图,将小图组合成大图的例子

2020/03/14 Python

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

2015/01/01 HTML / CSS

Lookfantastic美国/加拿大：英国知名美妆购物网站

2019/03/27 全球购物

Spartoo美国：欧洲排名第一的在线时装零售商

2019/12/12 全球购物

结构和类有什么异同

2012/07/16 面试题

土木工程专业自荐信

2013/10/04 职场文书

金属材料工程个人求职的自我评价

2013/12/04 职场文书

机关搬迁方案

2014/05/18 职场文书

微电影大赛策划方案

2014/06/05 职场文书

党支部对照检查材料

2014/08/25 职场文书

2014年医院后勤工作总结

2014/12/06 职场文书

雷锋的观后感

2015/06/10 职场文书

2015年党建工作汇报材料

2015/06/25 职场文书

数据设计之权限的实现

2022/08/05 MySQL