移动端开发利器 jQuery Mobile开发实录视频课程

1

jquery mobile学习线路主要讲解本章课程的学习路线图，了解jQuery Mobile的框架结构以及安装。

「仅限付费用户」点击下载“jquery mobile学习线路.rar”

2

简单布局及jquery mobile css类库修改使用DW进行简单的div+css布局，更加深入的了解jquery mobile框架的使用与布局。

「仅限付费用户」点击下载“简单布局及jquery mobile css类库修改.rar”

3

jquery mobile的单页过渡效果jquery mobile的过渡标签，能够更好的实现移动端开发效果，提高用户体验度。

「仅限付费用户」点击下载“jquery mobile的单页过渡效果.rar”

4

jquery mobile按钮工具及效果实现（一）在项目开大中，jquery mobile的框架按钮，被用的的时候并不多，大多时候还是需要我们自己去编写想要的按钮形势，本节课着重讲解了div+css布局的按钮效果，以及运用超链接、js和jquery来实现按钮效果。

「仅限付费用户」点击下载“jquery mobile按钮效果实现（一）.rar”

5

jquery mobile按钮工具及效果实现（二）使用jquery mobile框架按钮，能够快速的完成按钮功能布局，此处一定要记住，如何去修改它的样式，将固定默认格式的按钮样式，修改成自己想要的效果。

「仅限付费用户」点击下载“jquery mobile按钮效果实现（二）.rar”

6

jquery mobile按钮工具及效果实现（三）jquery mobile框架按钮效果的多样变化与使用，对于构建丰富多彩的wap项目交互功能具有十分便捷的作用。

「仅限付费用户」点击下载“jquery mobile按钮效果实现（三）.rar”

7

jquery mobile按钮工具及效果实现（四）jquery mobile开发框架自带很多小图标素材，开发者可以直接根据相应的css类进行使用和调取，非常方便快捷，但是我还是要提醒大家，实际开发中，最好自己去处理一些东西，那样会显得更加流畅自然。

「仅限付费用户」点击下载“jquery mobile按钮工具及效果实现（四）.rar”

8

jquery mobile弹窗效果的实现（一）创建一个弹窗，需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性， <div> 元素添加 data-role="popup" 属性。

「仅限付费用户」点击下载“jquery mobile弹窗效果的实现（一）.rar”

9

jquery mobile弹窗效果的实现（二）jquery mobile框架的<div> 弹窗与点击的 <a> 链接必须在同一个页面上。

「仅限付费用户」点击下载“jquery mobile弹窗效果的实现（二）.rar”

10

jquery mobile弹窗效果的实现（三）默认情况下，弹窗会直接显示在点击元素的上方，如果需要控制弹窗的位置，可以在用于打开弹窗的点击链接上使用 data-position-to 属性。

「仅限付费用户」点击下载“jquery mobile弹窗效果的实现（三）.rar”

11

jquery mobile弹窗效果的实现（四）你可以使用 data-overlay-theme 属性在弹窗后添加背景颜色。默认情况下覆盖的背景色的透明的。使用 data-overlay-theme="a" 添加浅色背景，使用 data-overlay-theme="b" 添加深色的覆盖背景。

「仅限付费用户」点击下载“jquery mobile弹窗效果的实现（四）.rar”

12

jquery mobile工具栏、导航栏效果使用工具栏元素通常位于头部和尾部内 - 让导航易于访问；导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内。

「仅限付费用户」点击下载“jquery mobile工具栏、导航栏.rar”

13

jquery mobile基础布局（一）过向指定 id 的 <div> 元素添加 data-role="panel" 属性来创建面板。在 <div> 中添加 HTML 标记来显示你的面板内容。

「仅限付费用户」点击下载“jquery mobile基础布局（一）.rar”

14

jquery mobile基础布局（二）有时候依托框架知识，不如退而结网，亲自去实现自己想要的效果，多多掌握jquery的知识，灵活熟练的运用布局知识。

「仅限付费用户」点击下载“jquery mobile基础布局（二）.rar”

15

jquery mobile基础布局（三）通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，其属性中可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

「仅限付费用户」点击下载“jquery mobile基础布局（三）.rar”

16

jquery mobile基础布局（四）如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。在容器（div）内，添加一个标题元素（H1-H6），后跟您想要进行扩展的 HTML 标记。

「仅限付费用户」点击下载“jquery mobile基础布局（四）.rar”

17

jquery mobile基础布局（五）响应式表格让页面内容在移动端和桌面设备上能够很好的适配，响应式表格有两种类型： reflow(回流) 与 列切换。

「仅限付费用户」点击下载“jquery mobile基础布局（五）.rar”

18

jquery mobile基础布局（六）想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。

「仅限付费用户」点击下载“jquery mobile基础布局（六）.rar”

19

jquery mobile列表框架（一）列表视图是jQuery Mobile中功能强大的一个特性，它会使标准的无序或有序列表应用更广泛，应用方法就是在ul或ol标签中添加data-role="listview"属性。

「仅限付费用户」点击下载“jquery mobile列表框架（一）.rar”

20

jquery mobile列表框架（二）默认情况下每个列表项都会包含一个箭头图标 "carat-r" (右箭头)。如果要修改这个图标可以使用 data-icon 属性。

「仅限付费用户」点击下载“jquery mobile列表框架（二）.rar”