《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.18　技巧：利用JavaScript调用来变更页面

本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.18节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

9.18 技巧：利用JavaScript调用来变更页面

在本章的开始部分，你已经看到了关于使用HTML链接（ a href="..." ）把不同的页面连接起来的示例了。jQuery Mobile是JavaScript框架。虽然在jQuery Mobile中你几乎不用编写自己的JavaScript代码，但是还是需要有通过JavaScript变更页面的选择。代码清单9-21演示了如何使用JavaScript来变更至不同的页面。

代码清单9-21 通过JavaScript来变更页面

00 !DOCTYPE html 

01 html 

02 head 

03 title Change Page /title 

04 meta name="viewport" 

05 content="width=device-width, initial-scale=1" 

06 link rel="stylesheet" href=

07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" 

08 script type="text/javascript"

09 src="http://code.jquery.com/jquery-1.7.1.min.js" 

10 /script 

11 script type="text/javascript" src=

12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js" 

13 /script 

14 script 

15 $(document).ready(function() {

17 $(#change).on(click, function(event) {

18 $.mobile.changePage(43b-change-page.html,

19 {transition: fade});

20 });

22 });

23 /script 

24 /head 

25 body 

27 div data-role="page" 

29 div data-role="header" 

30 h1 Change page /h1 

31 /div 

33 div data-role="content" 

34 a href="#" id="change" data-role="button" Change Page /a 

35 /div 

37 /body 

38 /html 

第18行和第19行调用了changePage。当将页面变更至指定的URL时，该代码要求使用fade过渡动画而不是默认的动画。与过渡动画的选项类似，你可以使用jQuery Mobile来指定其他的参数。

表9-2列出了其他的选项。

代码清单9-22提供了要被加载到页面中的内容。

代码清单9-22 供JavaScript加载使用的内容

00 !DOCTYPE html 

01 html 

02 head 

03 title Linked Page /title 

04 /head 

05 body 

07 div data-role="page" 

09 div data-role="header" 

10 h1 Linked File /h1 

11 /div 

13 div data-role="content" 

14 p a href="43-change-page.html" Link to an original

15 file /a /p 

16 /div 

18 /div 

20 /body 

21 /html 

与早先的示例类似，示例故意去掉了脚本和样式，以便演示页面是用AJAX请求加载的。在实际的示例中，有很好的理由来提供脚本和样式：因为可能会直接请求该页面的URL。当代码是从别的jQuery Mobile页面加载而来的，则在头部中的任何脚本都会被忽略。

【前端】使用jQuery封装一套UI组件 - 级联选择器组件 本篇文章来讲解下级联选择器组件 级联选择器，在实际项目中也是比较常用的组件，比如：省市区三级关联，上下级联动等 最后面会附上全部代码
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件 本篇文章来讲解下是和否的滑动切换组件 切换滑动组件，使用的场景实际上就是一个开和关的场景，一般有是和否，开和关，禁用和启用等等，只需要设置0和1即可
【前端】使用jQuery封装一套UI组件 - 移动端时间选择组件 【首先要声明一点，技术不分好坏，能用好就行，不用鄙视老技术】 今天要给大家展示的是移动端时间选择组件 最开始，看到比较新颖的移动端时间选择组件是在某款手机上，分年月日下拉选择，UI界面也挺好看的 除了讲解实现的步骤以及关键点，文章最后面会有完整的代码
【前端】使用jQuery封装一套UI组件 - 单选框 目前前端技术发展非常快，各大厂都开源和分享了自家的前端框架，非常多成熟的UI组件供大家选择，很实用也很方便，给开发上节省了不少时间成本，当然少不了学习成本，不过也不会占用太多时间，只要有前端基础的话，原理基本都是通用的，只是写法不一样。 因此，除了学习现有的优秀前端之外，最好能自己根据原理封装一套自己的UI组件，目的是为了更好的理解前端知识点以及锻炼编程逻辑
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。