读书频道 > 网站 > 网页设计 > jQuery Mobile权威指南
2.1.4 页面后退链接
12-10-12    奋斗的小年轻
收藏    我要投稿   

本文所属图书 > jQuery Mobile权威指南

本书由资深专家根据jQuery Mobile最新版本撰写,是一本全面而系统的jQuery Mobile教程,对jQuery Mobile的所有功能、特性、开发方法和技巧进行了全面而透彻的讲解,是系统学习jQuery Mobile的权威参考书。在...立即去当当网订购

上一节介绍了将“page”容器的“data-add-back-btn”属性设置为“true”可以后退至上一页,在jQuery Mobile 页面中,还可以添加一个<a>元素,将该元素的“data-rel”属性设置为“back”,同样可以实现后退至上一页的功能。因为一旦该链接元素的“data-rel”属性设置为“back”,单击该链接将被视为后退行为,并且将忽视“href”属性的URL值,直接退回至浏览器历史的上一页面。

实例2-4 jQuery Mobile页面后退链接

1. 功能说明

在新建的HTML中,添加2个“page”容器,当单击第一个容器中的“测试后退链接”链接时,切换到第二个容器;单击第二个容器中的“返回首页”链接时,将以回退的方式返回到第一个容器中。

2. 实现代码

新建一个HTML页面2-4.htm,加入代码如代码清单2-4所示。

代码清单2-4 jQuery Mobile 页面后退链接

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 页面后退链接</title>
    <meta name="viewport" content="width=device-width,
          initial-scale=1" />
    <link  href="Css/jquery.mobile-1.0.1.min.css"
          rel="Stylesheet" type="text/css" />
    <script src="Js/jquery-1.6.4.js"
          type="text/javascript"></script>
    <script src="Js/jquery.mobile-1.0.1.js"
          type="text/javascript"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>测试</h1></div>
    <div data-role="content">
         <p><a href="#e">测试后退链接</a></p>
    </div>
    <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
  </div>
 
  <div data-role="page" id="e">
    <div data-role="header"><h1>测试</h1></div>
    <div data-role="content">
         <p>
            <a href="http://www.rttop.cn" data-rel="back">
                返回首页
            </a>
        </p>
    </div>
    <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
  </div>
</body>
</html>

3. 页面效果

该页面在Opera Mobile Emulator 12.0下执行的效果如图2-4所示。


 

4. 源码分析

在本实例的第二个“page”容器中,用户在容器中单击“返回首页”时,可以后退到上一页,方法是在添加<a>元素时,将“data-rel”属性设置为“back”,表明任何的单击操作都被视为回退动作,并且忽视元素“href”属性值设置的URL地址,只是直接回退到上一个历史记录页面;这种页面切换的效果可以用于关闭一个打开的对话框或页面。

说明 在设置回退链接属性时,除将“data-rel”属性设置为“back”外,还要尽量将“href”属性设置为一个可以访问的正确URL地址,以确保更多的浏览器可以单击该链接按钮。

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站