jQuery-Mobile详解(精编)电子书.pdf

Jquery Mobile 综述 快速上手 开始使用 jQuery Mobile 提供了一系列针对触摸操作友好的 ui 组件和基 于ajax 的导航系统来支持动画的页面转场。构建一个自己的jQuery Mobile 页面是非常容易的： 基本的页面的模板 打开你最喜欢的文本编辑器，把下面的页面模板代码粘贴进去， 保存然后用浏览器打开。你现在也是移动开发者了！ 在 head 里，viewport 的meta 标签将屏幕的宽度设置为了与 设备的宽度相同，并且从 Cdn 引入了 jQuery, jQuery Mobile 和 jQuer 。y Mobile 的主题样式表。jQuery Mobile 1.1 需要工作于1.6.4 或 1.7.1 版本的jQuery 框架之上。 在body 之中，用data-role=“page”来标记的一个div 容器，用 来定义一个page，页面，data-role=header来标记的div 容器用 来定义页面的头部栏，data-role=content来标记的div 容器用来 定义页面的内容区域，这些用 HTML5 的data- 属性标记的标签会 通过jQuery Mobile 框架自动将基本的标记增强为部件。 HTML 代码: !DOCTYPE html html head titleMy Page/title meta name=viewport content=width=device-width, initial-scale=1 link rel=stylesheet href=/mobile/1.1.0/jquery.mobile-1.1.0.min.css / script src=/jquery-1.7.1.min.js/script script src=/mobile/1.1.0/jquery.mobile-1.1.0.min.js/scrip t /head body div data-role=page div data-role=header h1My Title/h1 /div!-- /header -- div data-role=content pHello world/p /div!-- /content -- /div!-- / /body /html 加入你自己的内容 在content 容器中，你可以加入你自己的标准的HTML 元素 h1,ul,p等，你可以自己写样式来创建自定义的布局， 但是注意要在jQuery Mobile 的样式表之后加入自己的样式。 列表 jQuery Mobile 包含了一系列不同的列表，可以用 data role=listview 标记的 ul 标记来定义。可 以添加 data-inset=true 的属性来使列表看起来是内嵌的。还可以加入 data-filter=true属性加 入一个动态的搜索过滤条。 HTML 代码: ul data-role=listview data-inset=true data-filter=true lia href=#Acura/a/li lia href=#Audi/a/li lia href=#BMW/a/li lia href=#Cadillac/a/li lia href=#Ferrari/a/li /ul 滑动条 jquery mobile 框架包含了一整套表单元素会自动将表单增强 为易于触摸的样式。这个滑动条是用html5 新的input 类型“range” 写的，不需要 data-role 属性。务必把他放到form 标签内，并且 与label 元素相关联。 html 代码: form label for=slider-0Input slider:/label input type=range name=slider id=slider-0 value=25 min=0 max=100 / /form 按钮 有几种办法可以做按钮，先让a 标签成为按钮，只需要在a 标 签添加data-role=button属性就可以了。通过data-icon