编程 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注意img图片的onerror事件的分析

Jan 01 Javascript

jquery.messager.js插件导致页面抖动的解决方法

Jul 14 Javascript

C++中的string类的用法小结

Aug 07 Javascript

JS+CSS实现自适应选项卡宽度的圆角滑动门效果

Sep 15 Javascript

jQuery简单入门示例之用户校验demo示例

Jul 09 Javascript

JS实现随机颜色的3种方法与颜色格式的转化

Jan 05 Javascript

jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】

Mar 08 Javascript

详解vue嵌套路由-query传递参数

May 23 Javascript

angular.js实现购物车功能

Oct 23 Javascript

JavaScript中严格判断NaN的方法

Feb 16 Javascript

Vue-不允许嵌套式的渲染方法

Sep 13 Javascript

Vue中ref和$refs的介绍以及使用方法示例

Jan 11 Vue.js

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

解决dede生成静态页和动态页转换的一些问题，及火车采集入库生成动态的办法

2007/03/29 PHP

php 模拟 asp.net webFrom 按钮提交事件的思路及代码

2013/12/02 PHP

CI框架学习笔记（二） -入口文件index.php

2014/10/27 PHP

php字符串截取函数用法分析

2014/11/25 PHP

Zend Framework入门知识点小结

2016/03/19 PHP

javascript Onunload与Onbeforeunload使用小结

2009/12/31 Javascript

一段实现页面上的图片延时加载的js代码

2010/02/11 Javascript

精通Javascript系列之Javascript基础篇

2011/06/07 Javascript

jQuery中hasClass()方法用法实例

2015/01/06 Javascript

javascript字符串循环匹配实例分析

2015/07/17 Javascript

JavaScript实现同时调用多个函数的方法

2015/11/09 Javascript

javascript中call apply 与 bind方法详解

2016/03/10 Javascript

分离与继承的思想实现图片上传后的预览功能：ImageUploadView

2016/04/07 Javascript

AngularJS基础 ng-repeat 指令简单示例

2016/08/03 Javascript

JS+html5制作简单音乐播放器

2020/09/13 Javascript

jQuery实现动态添加、删除按钮及input输入框的方法

2017/04/27 jQuery

angular指令笔记ng-options的使用方法

2017/09/18 Javascript

vue通过路由实现页面刷新的方法

2018/01/25 Javascript

JS实现的JSON数组去重算法示例

2018/04/11 Javascript

Node.js应用设置安全的沙箱环境

2018/04/23 Javascript

js事件on动态绑定数据,绑定多个事件的方法

2018/09/15 Javascript

js实现数字跳动到指定数字

2020/08/25 Javascript

python常规方法实现数组的全排列

2015/03/17 Python

使用matplotlib动态刷新指定曲线实例

2020/04/23 Python

Python实现ElGamal加密算法的示例代码

2020/06/19 Python

python爬虫要用到的库总结

2020/07/28 Python

想学画画？python满足你！

2020/12/24 Python

英国浴室洗脸盆购物网站：Click Basin

2018/06/08 全球购物

Deichmann英国：德国鞋类零售商

2021/01/30 全球购物

气象学专业个人求职信

2014/03/15 职场文书

省级优秀毕业生主要事迹

2014/05/29 职场文书

2014副镇长民主生活会个人对照检查材料思想汇报

2014/09/30 职场文书

党员查摆问题及整改措施

2014/10/10 职场文书

助学金感谢信

2015/01/20 职场文书

2016特色励志班级口号

2015/12/24 职场文书

2016入党积极分子心得体会

2016/01/06 职场文书