第3章 工具栏和按钮的使用

— 之需求分析
简单按钮
给HTML元素添加 data-role="button" 属性。jQuery Moble就会给此元素 增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序 所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图 标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景 色下图片都能够清晰显示。
第三章 工具栏和按钮的 使用
Байду номын сангаас
— 之需求分析
提问

固定工具栏的属性是什么？
— 之需求分析
头部结构
页眉是一个工具栏在页面的顶部，通常包 含页面标题文本和可选的按钮。按钮被定 位在标题的左右侧。头部标题通常是导航 或动作。标题可以被固定的，当滚动页面 时，他们始终在屏幕顶部。 标题文本通常是一个H1标题元素，但使用 任何级别的标题（h1-h6）允许语义的灵活 性。
按钮图标一
<a href="index.html" data-role="button" data-icon="delete">Delete</a>
Query Mobile 自带很多按钮小图标，如下图所示： 左箭头：data-icon="arrow-l" 右箭头：data-icon="arrow-r" 上箭头：data-icon="arrow-u" 下箭头：data-icon="arrow-d" 删除：data-icon="delete" 添加：data-icon="Plus" 减少：data-icon="minus" 检查：data-icon="Check" 齿轮：data-icon="gear" 前进：data-icon="Forward" 后退：data-icon="Back" 网格：data-icon="Grid" 五角：data-icon="Star" 仅图标 data-iconpos="notext" 警告：data-icon="Alert" 信息：data-icon="info" 首页：data-icon="home" 搜索：data-icon="Search"
<div data-role="header"> <h1> Page Title </h1> </div>
普通网页源代码
头部工具栏固定按钮位置
a 链接按钮的位置，也可以通过CSS来控制按钮，而不依赖 他们在源代码中的顺序。如果你只需要一个按钮并且想放在 右侧，这是特别有用的。指定按钮的位置，需要添加CSS类 ui-btn-left 或者 ui-btn-right 来设置定位。
头部工具栏无标题
头部栏有标题的时候，标题栏才能正常显示高度和外边距。 如果您选择不使用一个标题，你将需要添加一个类 class="ui-title" ，才能得到正确显示。 <div data-role="header"> <a href="index.html" data-icon="gear" class="ui-btnright">Options</a> <span class="ui-title" /> </div
作业
做一个类似微信的首页界面，要求：中间的内 容包含含有7个不同按钮图标的按钮，且按钮 图标至少含有3种不同的摆法，如图标摆在左 边、图标摆在右边、图标摆在上面==，其他界 面和示例保持一致，手机APP图标换成微信图 标，APP名称改成假微信。
按钮图标二
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>
默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使 用 data-iconpos 属性来设置图标的右上方（top）、底部（bottom）、右 侧（right）、左侧（left）的文本。
隐藏图片上的文字 data-iconpos="notext" data-inline="true"
按钮图标三
使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会 将生成一个CSS类，它的前缀是ui-icon然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。 然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上 的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha 透明度。
.ui-icon-myapp-email { background-image: url( "app-icon-email.png" ); }
按钮图标四
用自带的样式加入自定义的图标要求图标必须是18*18的小图标，如何加 入大的自定义图标？需要修改jQuery Mobile的样式
<style type="text/css"> .nav-3-1 .ui-btn .ui-btn-inner { padding-top: 40px !important; } .nav-3-1 .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; } .weixin .ui-icon { background: url(adr.png) 100% 100% no-repeat; background-size: 30px 26px; } </style> </head>
分组按钮
有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一 个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容 器添加 data-role=“controlgroup” 属性，Jquery Mobile会创建一个垂直 的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后 一个按钮产生圆角，使他们看起来是一组按钮。 默认情况下，组按钮表现为垂直列表，如果给容器添加 datatype="horizontal" 的属性，则可以转换为水平按钮的列表，按钮会横向 一个挨着一个地水平排列，并设置只有足够大以适应内容的宽度。（（ 所以要注意横排情况下按钮不要太多，按钮的字也不要太多）