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

取得传值的函数

Oct 27 Javascript

php is_numberic函数造成的SQL注入漏洞

Mar 10 Javascript

js函数定时器实现定时读取系统实时连接数

Apr 30 Javascript

jquery+php实现搜索框自动提示

Nov 28 Javascript

Node.js环境下JavaScript实现单链表与双链表结构

Jun 12 Javascript

jQuery中 $ 符号的冲突问题及解决方案

Nov 04 Javascript

详谈jQuery中的一些正则匹配表达式

Mar 08 Javascript

vue-router 路由基础的详解

Oct 17 Javascript

网页爬虫之cookie自动获取及过期自动更新的实现方法

Mar 06 Javascript

js操作table中tr的顺序实现上移下移一行的效果

Nov 22 Javascript

解决layui追加或者动态修改的表单元素“没效果”的问题

Sep 18 Javascript

关于Vue中axios的封装实例详解

Oct 20 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

关于Sphinx创建全文检索的索引介绍

2013/06/25 PHP

php实现事件监听与触发的方法

2014/11/21 PHP

php计算税后工资的方法

2015/07/28 PHP

WordPress中用于创建以及获取侧边栏的PHP函数讲解

2015/12/29 PHP

Zend Framework动作助手FlashMessenger用法详解

2016/03/05 PHP

PHP实现的同步推荐操作API接口案例分析

2016/11/30 PHP

Laravel多用户认证系统示例详解

2018/03/13 PHP

thinkphp诸多限制条件下如何getshell详解

2020/12/09 PHP

一个tab标签切换效果代码

2009/03/27 Javascript

javascript getElementsByTagName

2011/01/31 Javascript

jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

2013/04/26 Javascript

jquery统计复选框选中示例

2013/11/05 Javascript

导入extjs、jquery 文件时$使用冲突问题解决方法

2014/01/14 Javascript

JavaScript日期类型的一些用法介绍

2015/03/02 Javascript

JS实现左右拖动改变内容显示区域大小的方法

2015/10/13 Javascript

基于JS代码实现导航条弹出式悬浮菜单

2016/06/17 Javascript

通过js动态创建标签,并设置属性方法

2018/02/24 Javascript

vue轮播图插件vue-concise-slider的使用

2018/03/13 Javascript

解决webpack多页面内存溢出的方法示例

2019/10/08 Javascript

微信小程序生成携带参数的二维码

2019/10/23 Javascript

详解vue页面首次加载缓慢原因及解决方案

2019/11/06 Javascript

解决微信小程序scroll-view组件无横向滚动的问题

2020/02/04 Javascript

python操作mongodb根据_id查询数据的实现方法

2015/05/20 Python

Python实现合并同一个文件夹下所有PDF文件的方法示例

2018/04/28 Python

python 模拟银行转账功能过程详解

2019/08/06 Python

python实现替换word中的关键文字(使用通配符)

2020/02/13 Python

通过css3的filter滤镜改变png图片的颜色的示例代码

2020/05/06 HTML / CSS

网上常见的一份Linux面试题(多项选择部分)

2015/02/07 面试题

与UNIX有关的几个名词

2015/09/17 面试题

学校搬迁方案

2014/06/15 职场文书

学校与家长安全责任书

2014/07/23 职场文书

政风行风整改报告

2014/11/06 职场文书

文艺节目主持词

2015/07/06 职场文书

小学生反邪教心得体会

2016/01/15 职场文书

经典励志格言：每日一句，让你每天充满能量

2019/08/16 职场文书

Docker与K8s关系介绍不会Docker也可以使用K8s

2022/06/25 Servers