第12章 jQuery 移动开发-【千锋教育】Jquery从入门到实战

第12章 jQuery 移动开发 jQuery mobile 其他框架 jQuery mobile 其他框架 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 12.2 12.1 学习目标 了解 了解 掌握 了解一些常见的移动端类库 1 2 了解移动端事件与响应式布局 3 掌握jQuery移动端开发框架的基本使用方法 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 在4G时代，手机应用炙手可热，由于手机携带方便，是生活必备随身用品，而且信号覆盖广，操作便捷，因此人们对其给予了越来越高的期望。 移动开发是当下的最热门技术，jQuery为此也提供了相关的操作，并且衍生出了很多基于jQuery的移动开发框架，本章将全面地进行讲解。 12.1 jQuery mobile 12.1.1 基础布局 返回目录 12.1.2 页面交互 12.1 jQuery mobile jQuery mobile是一个基于HTML5的用户界面系统，旨在打造所有智能手机、平板电脑和桌面设备都可以访问的响应式网站和应用程序。 jQuery mobile框架可以通过jQuery官方网站进入，界面如图所示。 12.1 jQuery mobile 使用jQuery mobile和jQuery UI组件类似，也需要引入相应的文件。单击“Latest stable” 按钮，下载最新稳定版本。 下载压缩包后，解压文件，其中jquery.mobile-1.4.5.css为样式文件，jquery.mobile-1.4.5.js为逻辑文件，基于jQuery1.8到1.12之间的版本，所以要注意引入文件的顺序和文件的版本类型。 还要注意在移动端需要设置viewport（视口），让视口自适应浏览器当前尺寸（大小），代码如下所示。 jQuery mobile中是通过自定义属性data方式来实现基础布局和交互行为的。其中data-role用来定义布局结构，表列出了一些常见的属性值。 12.1.1 基础布局 12.1 jQuery mobile 接下来将对部分属性值做简单演示，代码如下所示。 12.1.1 基础布局 12.1 jQuery mobile 运行以上代码，结果如图所示。 12.1.1 基础布局 12.1 jQuery mobile 通过data-role="button"的方式可以添加按钮到页面中，默认按钮类型为块，可以通过data-inline="true"改成内联方式，按钮自适应文字宽。还可以在按钮文字前添加装饰小图标，通过class样式实现，如ui-btn ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow，代码如下所示。 12.1.1 基础布局 12.1 jQuery mobile 可以通过data-theme来设置主题样式，默认取值为a，可选的值还有b，表示深色系主题样式，代码如下所示。 12.1.1 基础布局 12.1 jQuery mobile 通过data-theme设置主题样式后的效果如图所示。 jQuery mobile可以实现很多与用户交互的行为，如页面间跳转，滑动轮播等。 1. 页面间跳转 在jQuery mobile中，展示区域跳转切换是通过一个页面来完成的，这种方式在移动端开发中非常流行，一般叫作单页面应用开发。 页面是通过id属性来进行控制的，完整jQuery代码参考教材12.1.2节。 默认情况下切换页面的效果是淡入淡出，可以通过data-transition属性来设置其他动画形式，从而满足不同的需求体验。 12.1.2 页面交互 12.1 jQuery mobile 代码如下所示。 12.1.2 页面交互 12.1 jQuery mobile 通过设置data-transition属性值为slide，可以实现水平方向的滑屏切换，不过都是朝一个方向运动，即从右向左运动。如果想实现往返的动画效果，就需要设置data-direction属性值为reverse，这样就可以实现首页到详情页为从右向左切换，详情页到首页为从左向右切换。 代码如下所示。 12.1.2 页面交互 12.1 jQuery mobile 2. 滑动轮播 滑动轮播是常见的移动端交互行为，在jQuery mobile中添加滑动轮播需要配合jQuery来完成，完整的jQuery代码参加教材12.1.2节。 12.2 其他框架 12.2.1 zepto 返回目录 12.2.2 Swiper 12.2.3 Bootstrap 12.2 其他框架 除了jQuery官方推出的jQuery mobile框架外，还有很多