《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17　技巧：使用多个列

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

9.17 技巧：使用多个列

到目前为止，已经见过了page、header、footer和theme。有时候在页面中需要使用多个列。尤其是当与平板终端打交道时，可能屏幕上会多出很多有效的剩余空间区块。jQuery Mobile为你提供了默认的类来表示单独的列。代码清单9-20利用这些类在行（row）上放置多个按钮。

代码清单9-20 使用按钮来演示列

00 !DOCTYPE html 

01 html 

02 head 

03 title Layout /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 

15 /head 

16 body 

18 div data-role="page" 

20 div data-role="header" 

21 h1 Layouts /h1 

22 /div 

24 div data-role="content" 

26 div 

27 div 

28 a href="#" data-role="button" Left /a 

29 /div 

30 div 

31 a href="#" data-role="button" Right /a 

32 /div 

33 /div 

35 div 

36 div 

37 a href="#" data-role="button" Left /a 

38 /div 

39 div 

40 a href="#" data-role="button" Middle /a 

41 /div 

42 div 

43 a href="#" data-role="button" Right /a 

44 /div 

45 /div 

47 div 

48 div 

49 a href="#" data-role="button" Left /a 

50 /div 

51 div 

52 a href="#" data-role="button" Leftish /a 

53 /div 

54 div 

55 a href="#" data-role="button" Rightish /a 

56 /div 

57 div 

58 a href="#" data-role="button" Right /a 

59 /div 

60 /div 

61 /div 

63 /body 

64 /html 

首先请看第26、35和47行。这些div包含了类ui-grid-a、ui-grid-b和ui-grid-c。这些类将div转换成了多个列的容器，分别表示2、3和4列。

在这些div之中，你会发现有内嵌的div：它们拥有类ui-block-a、ui-block-b、ui-block-c及ui-block-d。它们就是所谓的“列”。不管在哪个容器中，列的名称都可以被使用。很明显，还是要避免在ui-grid-a中出现ui-block-c的情况为好，因为ui-grid-a会认为只有两列。

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——导读 JavaScript刚一登上互联网的舞台的时候，专家们就投来了轻视的眼光，认为它只是一个适合娱乐而在与用户交互方面没有什么作用的玩具。但时至今日，它已经成为了帮助产生丰富用户界面、无缝数据集成和客户端支持的驱动力量。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.22 小结 简介之后，介绍了基本的页面导航机制，包括底层的AJAX调用和过渡动画。接着，讨论了页面的基本元素，比如header和footer。有多个更改header和footer行为的选项。可以把它们设置成固定的位置，甚至在导航至别的页面时也保持不变，也可以根据需要隐藏它们。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.21 技巧：利用jQuery Mobile的辅助函数 第25行演示了parseUrl()函数。它是一个从URL字符串读取多个部分信息的便捷函数。该函数返回一个对象。在这个示例中，它是字符串形式的JSON，为可读性的需要在每个逗号后面添加了一个换行。表9-3列出了parseUrl()函数的返回值。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.20 技巧：向jQuery Mobile中的DOM结点添加数据 jQuery Mobile提供了该函数的一个变体，即jqmData()。代码清单9-24演示了如何能像使用data()函数一样来使用它。主要的区别是它考虑了命名空间（namespace）。命名空间在jQuery Mobile中很重要，当jQuery Mobile连同其他插件或者外部库一起使用时，它有助于保护该框架不受到影响。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.9 技巧：监听Mobile事件 第4章解释了如何在Web浏览器中捕获标准的事件。Mobile设备使用的是“触摸手势”（touch gesture）而不是鼠标移动。jQuery Mobile对此进行了抽象。代码清单9-10演示了如何捕获一组挑选出来的典型的Mobile事件：轻击（tapping）、滑动（swiping）、方向变化（orientation change）以及页面变化（page change）。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。