第16章-jQuery-Mobile页面组件

16.1

jQueryMobile按钮组件jQueryMobile中的按钮由两类元素形成：一类是超链接<a>标签元素，在<a>标签中添加data-role="button"属性设置，jQueryMobile便会自动为该元素添加相应的样式外观，形成可单击的按钮形状；另一类是在表单中，在<input>标签中设置type属性为sumbit、reset、button或image，都会形成相应的按钮表单元素。内联按钮在jQueryMobile中，被样式化的按钮元素默认都是块状，并且自动填充页面宽度。如果要取消默认效果，只需要在按钮的元素中添加data-inline属性，将该属性值设置为true，该按钮将会根据其内容中文字和图片的宽度自动进行缩放，形成一个紧凑型的按钮。实战练习——在页面中添加内联按钮

最终文件：光盘\最终文件\第16章\16-1-1.html视频：光盘\视频\第16章\16-1-1.swf按钮组在jQueryMobile中，多个按钮不但能以内联的形式显示，还可以全部放入按钮组，即controlgroup容器中，按照垂直或水平方向展现按钮列表。默认情况下，按钮组是以垂直方向展示一组按钮列表，可以通过给按钮组容器添加data-type属性来修改按钮组默认的显示方式。实战练习——在页面中添加按钮组

垂直排列按钮组水平排列按钮组最终文件：光盘\最终文件\第16章\16-1-2.html视频：光盘\视频\第16章\16-1-2.swf

16.2

jQueryMobile表单组件在HTML中表单占有十分重要的地位。针对表单，jQueryMobile提供了一套完全基于HTML原始代码且适合触摸操作的框架。在该框架下，所有的表单元素先由原始的代码升级为jQueryMobile组件，然后调用各自组件提供的方法与属性，实现在jQueryMobile下表单元素的各种操作。文本输入组件在jQueryMobile中，文本输入组件包括文本域和HTML5中新增的输入类型。文本输入组件使用标准的HTML原始元素，借助jQueryMobile的渲染效果，使其更易于触摸型使用。另外，HTML5中新增的输入类型（如number类型），在jQueryMobile中会被显示成数字输入框，还在输入框的最右端有两个可调节大小的“+”和“-”号按钮，方便移动终端的用户修改输入框中的数字。实战练习——添加不同类型的文本输入组件滑块如果在<input>标签中设置type属性值为range，则可以在页面中创建一个滑块组件。在jQueryMobile中，滑块组件由两部分组成，一部分是可调整大小的数字输入框，另一部分是可拖动修改输入框数字的滑动条。实战练习——添加滑块改变页面元素背景颜色

最终文件：光盘\最终文件\第16章\16-2-1.html视频：光盘\视频\第16章\16-2-1.swf最终文件：光盘\最终文件\第16章\16-2-2.html视频：光盘\视频\第16章\16-2-2.swf翻转切换开关在jQueryMobile中，在<select>标签中设置data-role属性值为slider，可以将该下拉列表元素中的两个<option>选项转变为一个翻转切换开关。第一个<option>选项为“开”，取值为true或1；第二个<option>选项为“关”，取值为false或0。它是移动设备上常用的UI元素之一，常用于一些系统默认值的设置。单选按钮使用<fieldset>标签，并在该标签中设置data-role属性值为controlgroup，使用该标签包含所有的<input>和<label>元素，这样可以以整个组的形式样式化容器中的全部标签；然后，在组成员结构中，在每个<label>标签中添加for属性设置，对应一个类型为radio的<input>元素。为了便于用户触摸，这些<label>元素将会被拉长。实战练习——使用单选按钮制作投票表单

最终文件：光盘\最终文件\第16章\16-2-4.html视频：光盘\视频\第16章\16-2-4.swf16.2.5复选框与单选按钮相类似，使用<fieldset>标签，并在该标签中添加data-role=”controlgroup”属性设置，包裹多个复选框。通常情况下，多个复选框选项组合成的复选框组放置在标题下面，通过jQueryMobile固有的样式自动删除各个复选框选项间的间距，使其看起来更像一个整体。实战练习——使用复选框制作调查表单选择菜单与单选按钮和复选框不同，使用<selece>标签形成的选择菜单在jQueryMobile中样式发生了很大的变化。它分为两种类别：一种是原生菜单类型，这种类型继续保持了原来PC端浏览器的样式，单击右端的向下箭头出现一个下拉列表，选择其中的某一选项。另一种类型是自定义菜单类型，该类型专用于移动设备的浏览器显示，使用该类型时，jQueryMobile中提供的自定义菜单样式将取代原始选择菜单的样式，使选择菜单在显示时发生变化。实战练习——使用自定义类型选择菜单

最终文件：光盘\最终文件\第16章\16-2-5.html视频：光盘\视频\第16章\16-2-5.swf

最终文件：光盘\最终文件\第16章\16-2-6.html视频：光盘\视频\第16章\16-2-6.swf多项选择菜单与原生的页面中的选择菜单不同，jQueryMobile中的选择菜单还可以通过设置multiple属性，实现菜单的多项选择。如果将某个选择菜单的multiple属性值设置为true，单击该按钮弹出的菜单对话框中，全部菜单选项的右侧将会出现一个可勾选的复选框，用户通过单击该复选框，可以选中任意多个选项。

16.3

jQueryMobile列表组件在jQueryMobile中，如果在<ul>标签中设置data-role属性值为listview，便可以创建一个无序列表，并且将会使用jQueryMobile的默认样式对列表进行渲染显示。默认情况下，jQueryMobile页面中的列表宽度与屏幕进行等比例缩放，在列表选项的最右侧会显示一个带箭头的图标。另外，列表还有许多种类，如基本列表、嵌套列表、编号列表等，同时，还可以对列表中选项的内容进行分割与格式化。

基本列表在jQueryMobile页面中，一个<ul>元素一旦被定义为列表，jQueryMobile将会使用默认的样式对该列表进行渲染显示，列表中的选项非常易于触摸。如果单击列表选项，将会通过AJAX的方式异步请求一个对应的URL地址，并在DOM中创建一个新的页面，借助默认的切换效果进入该页面中。实战练习——创建jQueryMobile页面基本列表

有序列表与<ul>无序列表元素相对应，使用<ol>标签可以创建一个有序的列表。在有序列表中，借助排列的编号顺序可以展现一种有序的列表效果。在有序列表显示时，jQueryMobile会优先使用CSS样式给列表添加编号。如果浏览器不支持这种CSS样式，jQueryMobile将会调用JavaScript中的方法向列表写入编号，以确保有序列表的效果可以兼容各种浏览器。最终文件：光盘\最终文件\第16章\16-3-1.html视频：光盘\视频\第16章\16-3-1.swf分割列表选项在jQueryMobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法非常简单，只需要在<li>标签中再添加一个<a>标签，便可以在页面中实现分割的效果。

实战练习——实现列表选项的分割对列表项进行分类实现列表项分组的方法很简单，只需要在分组的位置增加一个<li>元素，并在该标签中添加data-role="list-divider"属性设置，表示该<li>标签是一个分组列表项。默认情况下，普通列表项的主题色为“浅灰色”，分组列表项的主题色为“灰色”，两者通过主题颜色的区别，形成层次上的包含效果。实战练习——实现列表选项的分组

最终文件：光盘\最终文件\第16章\16-3-3.html视频：光盘\视频\第16章\16-3-3.swf最终文件：光盘\最终文件\第16章\16-3-4.html视频：光盘\视频\第16章\16-3-4.swf图标与计数器如果将图片作为列表项的图标使用，则需要为该元素添加类别属性ui-li-icon，才能在列表的最左侧正常显示该图标。另外，如果想在列表项中的最右侧显示一个计数器，只需要添加一个<span>标签，并在该标签中添加类别属性ui-li-count即可。实战练习——为列表项添加图标和计数器列表项内容格式化处理jQueryMobile支持以HTML语义化的元素（如<span>、<h>、<p>）显示列表中所需的内容格式。通常情况下，使用<h1>至<h6>标签来突显列表项中显示的内容，使用<p>标签减弱列表项中显示的内容，两者结合，可以使列表项中显示的内容具有层次关系。如果要增加补充信息，例如日期，可以在显示的<p>标签中添加类别属性ui-li-aside。实战练习——格式化列表项内容最终文件：光盘\最终文件\第16章\16-3-5.html视频：光盘\视频\第16章\1