文档介绍：
jQuery 程序设计基础教程 jQuery jQuery 程序设计基础教程程序设计基础教程授课教师: 授课教师: 职务: 职务: 第13章jQuery Mobile 课程描述课程描述 jQuery Mobile 是基于 jQuery 的针对触屏智能手机与平板电脑 Web 开发框架,是兼容所有主流移动设备平台的、支持 HTML5 的用户界面设计系统。 jQuery Mobile 并不是jQuery 的一部分,为了扩展读者的知识面, 本章介绍使用 jQuery Mobile 开发移动 Web 应用程序的基本方法。本章知识点?13.1 jQuery Mobile 概述?13.2 jQuery Mobile 组件 13.1 jQuery Mobile 概述?13.1.1 初识 jQuery Mobile ?13.1.2 引用 jQuery Mobile 开发包 13.1.1 初识 jQuery Mobile 1.页面和对话框 2.Ajax 导航和转换 3.内容和控件 4.按钮 5.列表( Listview ) 6.表单元素 7.自适应设计 8.主题 1.页面和对话框 2.Ajax 导航和转换 jQuery Mobile 包含一个 Ajax 导航系统,支持大量的动画页面集合。可以自动拦截标准链接和表单的提交操作, 并将其转换为 Ajax 请求。只要单击链接或提交表单, Ajax 导航系统就会检测到该事件,然后提出一个基于链接或表单动作的 Ajax 请求,这样就不用刷新页面了。当框架等待 Ajax 响应时,会显示一个加载页面。 3.内容和控件?jQuery Mobile 可以在页面中添加任何标准HTML 元素,例如标题、列表、段落等。样也可以在 jQuery Mobile 的样式表后面添加自定义样式表。?jQuery Mobile 还包含大量很好用的触屏 UI控件,包括按钮、表单元素、折叠控件、弹出控件、对话框、表格等。可以使用 jQuery Mobile Download Builder 来选择需要的组件。 4.按钮?在jQuery Mobile 中,有几种方法定义按钮。这里介绍其中的一种方法,让读者体会一下 jQuery Mobile 的便捷。只需要在链接中添加data-role="button" 属性,就可以将链接转换为按钮,从而使其更易于点击。也可以使用 data-icon 属性为按钮定义一个图标。?例如,下面的代码可以定义一个如图 13-2 所示的按钮。<a href="#" data-role="button" data-icon="star">Star button</a> 5.列表( Listview ) <ul data-role="listview" data-inset="true" data-filter="true"> <li><a href="#">Acura</a></li> <li><a href="#">Audi</a></li> <li><a href="#">BMW</a></li> <li><a href="#">Cadillac</a></li> <li><a href="#">Ferrari</a></li> </ul>

1