多页面切换

最新推荐文章于 2023-07-19 13:19:58 发布

hqmln

最新推荐文章于 2023-07-19 13:19:58 发布

阅读量223

点赞数

分类专栏： jquery mobile 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/hqmln/article/details/84696666

版权

jquery mobile 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在jquery mobile中一个页面可以有多个容器当做多个不同的页面，他们直接的切换通过<a>元素来切换，并将该元素href设置为#加对应id号

例如：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 应用程序</title>
    <meta name="viewport" content="width=device-width" /> 
    <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>
<section id="page1" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是首页</p>
      <p><a href="#page2">详细页</a></p>
   </div>
   <footer data-role="footer"><h1>工作室版权所有</h1></footer>
</section>

<section id="page2" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>这是详细页</p>
      <p><a href="#page1">返回首页</a></p>
   </div>
   <footer data-role="footer"><h1>工作室版权所有</h1></footer>
</section>
</body>
</html>

跳转到外链接（及不在一个页面中，跳转到另外页面）

其实现方式和内链接是一样的，只是在<a>元素中添加rel属性，并将该属性值为“external”表示外链接

<a href="xiangxi.html" rel="external">返回首页</a>

切换的效果只需要加一个data-transition属性

<a href="xiangxi.html" rel="external"  data-transition="pop">返回首页</a>

data-add-back-btn="true"添加返回按钮

div data-role="page" id="w1" data-add-back-btn="true">
　　<div data-role="header"><h1>今天天气</h1></div>
　　<div data-role="content">
　　     <p>4～-7℃<br />晴转多云<br />微风</p>
　　</div>
　　<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div>
　</div>