jQuery Mobile允许在一个文件中创建多个页面,不同的页面由id唯一标识。
如下所示:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"/> <title></title> <link href="../src/jquery.mobile-1.4.3.min.css" rel="stylesheet"/> <script src="../src/jquery.min.js"></script> <script src="../src/jquery.mobile-1.4.3.min.js"></script> </head> <body> <!-- 在jQuery Mobile中,如果将div容器的data-role属性值设置为“page”,则该容器为一个页面。 在一个文件中,可以设置多个div容器为页面,即多个页面在同一个文件中,不同的页面由id唯一 标识。在同一文件中的多个页面间进行的切换,称为内连接。方式为:添加一个a元素,并将href属性 值设置为“#”加对应页面的id值的形式。如下所示: --> <div data-role="page" id="page1"> <div data-role="header"> <h1>首页</h1> </div> <div data-role="content"> <!-- 在同一文件中的页面之间进行切换,由a元素的href属性值为“#”加对应要切换的页面的id值完成。 --> <p><a href="#page2">详细页</a></p> </div> <div data-role="footer"> <h1>页脚</h1> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <a href="#page1">返回</a> <h1>这是详细页</h1> </div> <div data-role="content"> <p>好吧,我确实不知道该说些什么</p> </div> <div data-role="footer"> <h1>我真不知道能说些什么</h1> </div> </div> <!--除内连接外,还有一个外连接。外连接指的是通过单击页面中的某个链接,跳转到另外一个文件页面。 实现方式和我们普通的web页面跳转类似。--> </body> </html>
效果如图: