第16章jQuery Mobile页面组件课件.ppt

《第16章jQuery Mobile页面组件课件.ppt》由会员分享，可在线阅读，更多相关《第16章jQuery Mobile页面组件课件.ppt（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

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

3、盘视频第16章16-1-2.swf在HTML中表单占有十分重要的地位。针对表单，jQuery Mobile提供了一套完全基于HTML原始代码且适合触摸操作的框架。在该框架下，所有的表单元素先由原始的代码升级为jQuery Mobile组件，然后调用各自组件提供的方法与属性，实现在jQuery Mobile下表单元素的各种操作。文本输入组件文本输入组件在jQuery Mobile中，文本输入组件包括文本域和HTML 5中新增的输入类型。文本输入组件使用标准的HTML原始元素，借助jQuery Mobile的渲染效果，使其更易于触摸型使用。另外，HTML 5中新增的输入类型（如number类型），

4、在jQuery Mobile中会被显示成数字输入框，还在输入框的最右端有两个可调节大小的“+”和“-”号按钮，方便移动终端的用户修改输入框中的数字。实战练习实战练习添加不同类型的文本输入组件添加不同类型的文本输入组件滑块滑块如果在标签中设置type属性值为range，则可以在页面中创建一个滑块组件。在jQuery Mobile中，滑块组件由两部分组成，一部分是可调整大小的数字输入框，另一部分是可拖动修改输入框数字的滑动条。实战练习实战练习添加滑块改变页面元素背景颜色添加滑块改变页面元素背景颜色 最终文件：光盘最终文件第16章16-2-1.html视频：光盘视频第16章16-2-1.swf最终文

5、件：光盘最终文件第16章16-2-2.html视频：光盘视频第16章16-2-2.swf翻转切换开关翻转切换开关在jQuery Mobile中，在标签中设置data-role属性值为slider，可以将该下拉列表元素中的两个选项转变为一个翻转切换开关。第一个选项为“开”，取值为true或1；第二个选项为“关”，取值为false或0。它是移动设备上常用的UI元素之一，常用于一些系统默认值的设置。单选按钮单选按钮使用标签，并在该标签中设置data-role属性值为controlgroup，使用该标签包含所有的和元素，这样可以以整个组的形式样式化容器中的全部标签；然后，在组成员结构中，在每个标签中添

6、加for属性设置，对应一个类型为radio的元素。为了便于用户触摸，这些元素将会被拉长。实战练习实战练习使用单选按钮制作投使用单选按钮制作投票表单票表单 最终文件：光盘最终文件第16章16-2-4.html视频：光盘视频第16章16-2-4.swf16.2.5复选框复选框与单选按钮相类似，使用标签，并在该标签中添加data-role=”controlgroup”属性设置，包裹多个复选框。通常情况下，多个复选框选项组合成的复选框组放置在标题下面，通过jQuery Mobile固有的样式自动删除各个复选框选项间的间距，使其看起来更像一个整体。实战练习实战练习使用复选框制作调查表单使用复选框制作调查

7、表单选择菜单选择菜单与单选按钮和复选框不同，使用标签形成的选择菜单在jQuery Mobile中样式发生了很大的变化。它分为两种类别：一种是原生菜单类型，这种类型继续保持了原来PC端浏览器的样式，单击右端的向下箭头出现一个下拉列表，选择其中的某一选项。另一种类型是自定义菜单类型，该类型专用于移动设备的浏览器显示，使用该类型时，jQuery Mobile中提供的自定义菜单样式将取代原始选择菜单的样式，使选择菜单在显示时发生变化。实战练习实战练习使用自定义类型选择菜单使用自定义类型选择菜单 最终文件：光盘最终文件第16章16-2-5.html视频：光盘视频第16章16-2-5.swf 最终文件：光

8、盘最终文件第16章16-2-6.html视频：光盘视频第16章16-2-6.swf多项选择菜单多项选择菜单与原生的页面中的选择菜单不同，jQuery Mobile中的选择菜单还可以通过设置multiple属性，实现菜单的多项选择。如果将某个选择菜单的multiple属性值设置为true，单击该按钮弹出的菜单对话框中，全部菜单选项的右侧将会出现一个可勾选的复选框，用户通过单击该复选框，可以选中任意多个选项。 在jQuery Mobile中，如果在标签中设置data-role属性值为listview，便可以创建一个无序列表，并且将会使用jQuery Mobile的默认样式对列表进行渲染显示。默认情

9、况下，jQuery Mobile页面中的列表宽度与屏幕进行等比例缩放，在列表选项的最右侧会显示一个带箭头的图标。另外，列表还有许多种类，如基本列表、嵌套列表、编号列表等，同时，还可以对列表中选项的内容进行分割与格式化 。 基本列表基本列表在jQuery Mobile页面中，一个元素一旦被定义为列表，jQuery Mobile将会使用默认的样式对该列表进行渲染显示，列表中的选项非常易于触摸。如果单击列表选项，将会通过AJAX的方式异步请求一个对应的URL地址，并在DOM中创建一个新的页面，借助默认的切换效果进入该页面中。实战练习实战练习创建创建jQuery Mobile页面基本列表页面基本列表

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

11、方法非常简单，只需要在标签中再添加一个标签，便可以在页面中实现分割的效果。 实战练习实战练习实现列表选项的分割实现列表选项的分割对列表项进行分类对列表项进行分类实现列表项分组的方法很简单，只需要在分组的位置增加一个元素，并在该标签中添加data-role=list-divider属性设置，表示该标签是一个分组列表项。默认情况下，普通列表项的主题色为“浅灰色”，分组列表项的主题色为“灰色”，两者通过主题颜色的区别，形成层次上的包含效果。实战练习实战练习实现列表选项的分组实现列表选项的分组 最终文件：光盘最终文件第16章16-3-3.html视频：光盘视频第16章16-3-3.swf最终文件：光盘

12、最终文件第16章16-3-4.html视频：光盘视频第16章16-3-4.swf图标与计数器图标与计数器如果将图片作为列表项的图标使用，则需要为该元素添加类别属性ui-li-icon，才能在列表的最左侧正常显示该图标。另外，如果想在列表项中的最右侧显示一个计数器，只需要添加一个标签，并在该标签中添加类别属性ui-li-count即可。实战练习实战练习为列表项添加图标和计数器为列表项添加图标和计数器列表项内容格式化处理列表项内容格式化处理jQuery Mobile支持以HTML语义化的元素（如、）显示列表中所需的内容格式。通常情况下，使用至标签来突显列表项中显示的内容，使用标签减弱列表项中显示的

13、内容，两者结合，可以使列表项中显示的内容具有层次关系。如果要增加补充信息，例如日期，可以在显示的标签中添加类别属性ui-li-aside。实战练习实战练习格式化列表项内容格式化列表项内容最终文件：光盘最终文件第16章16-3-5.html视频：光盘视频第16章16-3-5.swf最终文件：光盘最终文件第16章16-3-6.html视频：光盘视频第16章16-3-6.swf本章重点向读者介绍了jQuery Mobile中的按钮组件、表单组件和列表组件的创建和设置方法，接合实便的制作，使读者能够在jQuery Mobile页面中灵活地过用各种组件。完成本章内容的学习，读者需要能够掌握jQuery Mobile中各种重要组件的使用方法和技巧。