构建跨平台APP：jQueryMobile移动应用实战6、7章

1、跨平台跨平台APP：jQuery Mobile移动应用实战第第6 6章、第章、第7 7章章第6章 按钮的使用6.1 按钮的使用6.2 为按钮加入图标6.3 更加个性化的显示图标6.4 自定义按钮的图标6.5 播放器的页面设计6.6 头部栏中的按钮图标6.7 一个按钮也可以玩得很开心6.8 简单的QWER6.9 方形的按钮6.10 对话框中的按钮6.1 简单按钮的使用代码代码效果效果data-role=“data-role=“* *”类型类型内容内容page页面容器，其内部的mobile元素将会继承这个容器上所设置的属性header页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素

2、footer页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素content页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素controlgroup将几个元素设置成一组，一般是几个相同的元素类型fieldcontain区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔navbar功能导航容器，通俗的讲就是工具条listview列表展示容器，类似手机中联系人列表的展示方式list-divider列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接button按钮，将链接和普通按钮的样式设置成为jQue

3、ryMobile的风格none阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。6.2 为按钮加入图标代码代码效果效果编号编号名称名称描述描述图标示例图标示例1左箭头arrow-l2右箭头arrow-r3上箭头arrow-u4下箭头arrow-d5删除delete6添加plus7减少minus8检查check9齿轮gear10前进forward11后退back12网格grid13五角星star14警告alert15信息info16首页home17搜索searchdata-icon=“data-icon=“* *”6.3 更加个性化的显示图标源代码源代码效果效果dat

4、a-iconpos=“data-iconpos=“* *”类型类型内容内容left图标位于左侧right图标位于右侧top图标位于顶部bottom图标位于底部notext只显示图标noicon只显示内容6.4 自定义按钮的图标源代码源代码效果效果. .ui-icon-round ui-icon-round background-background-imageimage: :url(round.png)url(round.png); ; .ui-icon .ui-icon background-sizebackground-size: :18px 18px 26px26px; ; 6.5 播放

5、器的面板设计源代码源代码效果效果data-theme=“data-theme=“* *”主题按钮主题按钮在白色图标后的半透明的在白色图标后的半透明的黑色圆圈确保了在任何背黑色圆圈确保了在任何背景色下图片都能够清晰显景色下图片都能够清晰显示，也使它能很好的工作示，也使它能很好的工作在在Jquery MobileJquery Mobile主题系主题系统中。以下是一些在不同统中。以下是一些在不同主题样式下图标按钮的例主题样式下图标按钮的例子子A主题下的图标按钮data-theme=a“B主题下的图标按钮data-theme=“b“C主题下的图标按钮data-theme=“c6.6 头部栏中的按钮图标

6、源代码源代码效果效果data-position=“fixed”data-position=“fixed”固定工具栏固定工具栏在浏览器支持的在浏览器支持的 CSS position: CSS position: fixedfixed ( (大多数的桌面浏览器大多数的桌面浏览器, iOS5+, , iOS5+, Android 2.2+, BlackBerry 6, Android 2.2+, BlackBerry 6, 和其和其他他) )。工具栏使用。工具栏使用“固定工具栏固定工具栏”插插件将被固定在视图的顶部或底部，当件将被固定在视图的顶部或底部，当页面自由滚动，固定栏始终浮动在屏页面自由滚动

7、，固定栏始终浮动在屏幕的顶部或者底部。在浏览器不支持幕的顶部或者底部。在浏览器不支持固定定位，工具栏将留在那固定的位固定定位，工具栏将留在那固定的位置（页面的顶部或底部）。置（页面的顶部或底部）。给头部栏或底部栏设置这样的行为，给头部栏或底部栏设置这样的行为，需要给工具栏的容器增加需要给工具栏的容器增加 data-data-position=fixedposition=fixed 属性属性。6.7 一个按钮也可以玩得很开心源代码源代码效果效果6.8 简单的QWER键盘源代码源代码效果效果值：值：true/falsetrue/false功能功能：规定按钮规定按钮是否有圆角是否有圆角值：值：tru

8、e/falsetrue/false功能功能：规定按钮是否是行内的：规定按钮是否是行内的data-inlinedata-inlinedata-cornersdata-corners6.9 方形的按钮源代码源代码效果效果6.10 对话框中的按钮源代码源代码效果效果功能：功能：定义定义单独弹出对话框单独弹出对话框data-reldata-rel第7章 表单元素的使用7.1 简单的QQ登录界面7.2 手机调查问卷7.3 精准的进度控制7.4 多彩的调色板7.5 熄灯，请闭眼7.6 做一道选择题7.7 多项选择题7.8 请问先生需要什么服务7.9 对话框中的表单7.1 简单的QQ登录界面源代码源代码效果

9、效果7.2 手机调查问卷源代码源代码效果效果功能：功能：多多行文本输入框。行文本输入框。功能：带有文字的搜索框功能：带有文字的搜索框text-areatext-areaplaceholderplaceholder功能：带有两个输入字段和相关标记的简功能：带有两个输入字段和相关标记的简单单HTMLHTML标签标签labellabel7.3 精准的进度控制源代码源代码效果效果7.4 多彩的调色板源代码源代码效果效果7.5 熄灯，请闭眼源代码源代码效果效果功能：包裹单个选项功能：包裹单个选项optionoptionselectselect功能：包含多个功能：包含多个optionoption7.6 做一道选择题源代码源代码效果效果值：值：texttext功能：定义当使用功能：定义当使用时所使时所使用的标注用的标注功能：创建带有选项的选择列表功能：创建带有选项的选择列表labellabellabellabe