编程 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 29 Javascript

jquery模拟按下回车实现代码

Sep 20 Javascript

多浏览器兼容性比较好的复制到剪贴板的js代码

Oct 09 Javascript

Jquery带搜索框的下拉菜单

May 06 Javascript

Ajax同步与异步传输的示例代码

Nov 21 Javascript

jquery中的过滤操作详细解析

Dec 02 Javascript

JS判断表单输入是否为空(示例代码)

Dec 23 Javascript

php的文件上传入门教程（实例讲解）

Apr 10 Javascript

JS中的phototype详解

Feb 04 Javascript

JavaScript实现网页头部进度条刷新

Apr 16 Javascript

基于Vue渲染与插件的加载顺序的问题详解

Mar 05 Javascript

Webpack的dll功能使用

Jun 28 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

在线短消息收发的程序,不用数据库

2006/10/09 PHP

PHP网站安装程序制作的原理、步骤、注意事项和示例代码

2010/08/01 PHP

使用ltrace工具跟踪PHP库函数调用的方法

2016/04/25 PHP

PHP实现将多个文件中的内容合并为新文件的方法示例

2017/06/10 PHP

thinkPHP5框架auth权限控制类与用法示例

2018/06/12 PHP

PHP的PDO连接讲解

2019/01/24 PHP

laravel框架邮箱认证实现方法详解

2019/11/22 PHP

jQuery ui1.7 dialog只能弹出一次问题

2009/08/27 Javascript

得到jQuery detach()后节点中的某个值实现代码

2013/02/05 Javascript

JavaScript回调(callback)函数概念自我理解及示例

2013/07/04 Javascript

js判断iframe内的网页是否滚动到底部触发事件

2014/03/18 Javascript

如何编写高质量JS代码(续)

2015/02/25 Javascript

详解AngularJS中的表格使用

2015/06/16 Javascript

Backbone.js的Hello World程序实例

2015/06/19 Javascript

JQuery validate插件Remote用法大全

2016/05/15 Javascript

Vue中使用vux的配置详解

2017/05/05 Javascript

Js利用prototype自定义数组方法示例

2017/10/20 Javascript

优雅的将ElementUI表格变身成树形表格的方法步骤

2019/04/11 Javascript

python操作数据库之sqlite3打开数据库、删除、修改示例

2014/03/13 Python

Python中使用md5sum检查目录中相同文件代码分享

2015/02/02 Python

python通过自定义isnumber函数判断字符串是否为数字的方法

2015/04/23 Python

Python爬虫实现百度图片自动下载

2018/02/04 Python

opencv实现静态手势识别 opencv实现剪刀石头布游戏

2019/01/22 Python

PyCharm 配置远程python解释器和在本地修改服务器代码

2019/07/23 Python

使用pandas实现连续数据的离散化处理方式(分箱操作)

2019/11/22 Python

Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释

2020/01/25 Python

韩国休闲女装品牌网站：ANAIS

2016/08/24 全球购物

Marmot土拨鼠官网：美国专业户外运动品牌

2018/01/11 全球购物

求职信格式范本

2013/11/15 职场文书

后勤主管岗位职责

2014/03/01 职场文书

求职自荐信的格式

2014/04/07 职场文书

2014年向国旗敬礼活动总结

2014/09/27 职场文书

计划生育个人总结

2015/03/02 职场文书

退休职工欢送会致辞

2015/08/01 职场文书

《为人民服务》教学反思

2016/02/20 职场文书

kubernetes集群搭建Zabbix监控平台的详细过程

2022/07/07 Servers