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

跨平台跨平台APP：jQuery Mobile移动应用实战 第6章、第7章 第6章 按钮的使用 6.1 按钮的使用 6.2 为按钮加入图标 6.3 更加个性化的显示图标 6.4 自定义按钮的图标 6.5 播放器的页面设计 6.6 头部栏中的按钮图标 6.7 一个按钮也可以玩得很开心 6.8 简单的QWER 6.9 方形的按钮 6.10 对话框中的按钮 6.1 简单按钮的使用 代码 效果 data-role=“*” 类型 内容 page? 页面容器，其内部的mobile元素将会继承这个容器上所设置的属性 header 页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素 footer 页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素 content 页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素 controlgroup 将几个元素设置成一组，一般是几个相同的元素类型 fieldcontain 区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔 navbar 功能导航容器，通俗的讲就是工具条 listview 列表展示容器，类似手机中联系人列表的展示方式 list-divider 列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接 button 按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格 none 阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。 6.2 为按钮加入图标 代码 效果 编号 名称 描述 图标示例 1 左箭头 arrow-l 2 右箭头 arrow-r 3 上箭头 arrow-u 4 下箭头 arrow-d 5 删除 delete 6 添加 plus 7 减少 minus 8 检查 check 9 齿轮 gear 10 前进 forward 11 后退 back 12 网格 grid 13 五角星 star 14 警告 alert 15 信息 info 16 首页 home 17 搜索 search data-icon=“*” 6.3 更加个性化的显示图标 源代码 效果 data-iconpos=“*” 类型 内容 left 图标位于左侧 right 图标位于右侧 top 图标位于顶部 bottom 图标位于底部 notext 只显示图标 noicon 只显示内容 6.4 自定义按钮的图标 源代码 效果 .ui-icon-round{ background-image:url(round.png); } .ui-icon{ background-size:18px 26px; } 6.5 播放器的面板设计 源代码 效果 data-theme=“*”主题按钮 在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子 A主题下的图标按钮?data-theme=a “B主题下的图标按钮?data-theme=“b “C主题下的图标按钮?data-theme=“c 6.6 头部栏中的按钮图标 源代码 效果 data-position=“fixed”固定工具栏 在浏览器支持的 CSS?position: fixed?(大多数的桌面浏览器, iOS5+, Android 2.2+, BlackBerry 6, 和其他)。工具栏使用“固定工具栏”插件将被固定在视图的顶部或底部，当页面自由滚动，固定栏始终浮动在屏幕的顶部或者底部。在浏览器不支持固定定位，工具栏将留在那固定的位置（页面的顶部或底部）。 给头部栏或底部栏设置这样的行为，需要给工具栏的容器增加?data-position=fixed?属性。 6.7 一个按钮也可以玩得很开心 源代码 效果 6.8 简单的QWER键盘 源代码 效果 值：true/false 功能：规定按钮是否有圆角 值：true/false 功能：规定按钮是否是行内的 data-inline data-corners 6.9 方形的按钮 源代码 效果 6.10 对话框中的按钮 源代码 效果 功能：定义单独弹出对话框 data-rel 第7章 表单元素的使用 7.1 简单的QQ登录界面 7.2 手机调查问卷 7.3 精准的进度控制 7.4 多彩的调色板 7.5 熄灯，请闭眼 7.6 做一道选择题 7.7 多项选择题 7.8 请问先生需要什么服务 7.9 对话框中的表单 7.1 简单的QQ登录界面 源代码 效果 7.2 手机调查问卷 源代码 效果 功能：多行文本输入框。 功能：带有文字的搜索框