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

一些技巧性实用js代码小结

Oct 14 Javascript

node.js中的http.response.addTrailers方法使用说明

Dec 14 Javascript

JavaScript获取元素尺寸和大小操作总结

Feb 27 Javascript

js实现兼容性好的微软官网导航下拉菜单效果

Sep 07 Javascript

vue-cli+webpack在生成的项目中使用bootstrap实例代码

May 26 Javascript

详谈表单重复提交的三种情况及解决方法

Aug 16 Javascript

JS实现简单的浮动碰撞效果示例

Dec 28 Javascript

基于jQuery实现Ajax验证用户名是否可用实例

Mar 25 jQuery

Vue.js 表单控件操作小结

Mar 29 Javascript

vue和iview实现Scroll 数据无限滚动功能

Oct 31 Javascript

OpenLayers3实现地图显示功能

Sep 25 Javascript

jQuery实现可以扩展的日历

Dec 01 jQuery

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下实现一个阿拉伯数字转中文数字的函数

2008/07/10 PHP

apache2.2.4+mysql5.0.77+php5.2.8安装精简

2009/04/29 PHP

WordPress中用于更新伪静态规则的PHP代码实例讲解

2015/12/18 PHP

PHP中include/require/include_once/require_once使用心得

2016/08/28 PHP

php微信公众平台配置接口开发程序

2016/09/22 PHP

php array_values 返回数组的所有值详解及实例

2016/11/12 PHP

Yii实现复选框批量操作实例代码

2017/03/15 PHP

jQuery ajax cache缓存问题

2010/07/01 Javascript

js 自动播放的实例代码

2013/11/19 Javascript

JSON+HTML实现国家省市联动选择效果

2014/05/18 Javascript

jQuery弹簧插件编写基础之“又见弹窗”

2015/12/11 Javascript

jQuery实现图片向左向右切换效果的简单实例

2016/05/18 Javascript

jQuery如何封装输入框插件

2016/08/19 Javascript

用AngularJS来实现监察表单按钮的禁用效果

2016/11/02 Javascript

JS调用Android、Ios原生控件

2017/01/06 Javascript

servlet+jquery实现文件上传进度条示例代码

2017/01/25 Javascript

微信小程序如何获知用户运行小程序的场景教程

2017/05/17 Javascript

在vue项目中,使用axios跨域处理

2018/03/07 Javascript

基于Vue2-Calendar改进的日历组件（含中文使用说明）

2019/04/14 Javascript

JavaScript实现好看的跟随彩色气泡效果

2020/02/06 Javascript

JS事件循环机制event loop宏任务微任务原理解析

2020/08/04 Javascript

[02:38]DOTA2超级联赛专访Loda 认为IG世界最强

2013/05/27 DOTA

[02:38]2018年度DOTA2最佳劣单位选手-完美盛典

2018/12/17 DOTA

matplotlib在python上绘制3D散点图实例详解

2017/12/09 Python

Python中单例模式总结

2018/02/20 Python

详解numpy.meshgrid()方法使用

2019/08/01 Python

PyCharm无法识别PyQt5的2种解决方法，ModuleNotFoundError: No module named 'pyqt5'

2020/02/17 Python

Tensorflow卷积实现原理+手写python代码实现卷积教程

2020/05/22 Python

python爬虫用mongodb的理由

2020/07/28 Python

纯CSS3实现地球自转实现代码(图文教程附送源码)

2012/12/26 HTML / CSS

canvas像素画板的实现代码

2018/11/21 HTML / CSS

巴西手表购物网站：eclock

2019/03/19 全球购物

国际贸易毕业生自荐书

2014/06/22 职场文书

高中议论文（范文2篇）

2019/08/19 职场文书

JavaScript的function函数详细介绍

2021/11/20 Javascript

win11无法登录onedrive错误代码0x8004def7怎么办 ?

2022/04/05 数码科技