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

1、 第三章第三章 工具栏和按钮的工具栏和按钮的使用使用n固定工具栏的属性是什么？固定工具栏的属性是什么？提问 之需求分析头部结构头部结构 之需求分析普通网页源代码页眉是一个工具栏在页面的顶部，通常包含页面标题文本和可选的按钮。按钮被定位在标题的左右侧。头部标题通常是导航或动作。标题可以被固定的，当滚动页面时，他们始终在屏幕顶部。标题文本通常是一个H1标题元素，但使用任何级别的标题（h1-h6）允许语义的灵活性。 Page Title 头部工具栏固定按钮位置a 链接按钮的位置，也可以通过CSS来控制按钮，而不依赖他们在源代码中的顺序。如果你只需要一个按钮并且想放在右侧，这是特别有用的。指定按钮的位

2、置，需要添加CSS类 ui-btn-left 或者 ui-btn-right 来设置定位。头部工具栏无标题头部栏有标题的时候，标题栏才能正常显示高度和外边距。如果您选择不使用一个标题，你将需要添加一个类 class=ui-title ，才能得到正确显示。 Options /div 简单按钮简单按钮 之需求分析给HTML元素添加 data-role=button 属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一

3、个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。按钮图标一Delete 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=Forwa

4、rd后退后退：data-icon=Back网格网格：data-icon=Grid五角五角：data-icon=Star警告警告：data-icon=Alert信息信息：data-icon=info首页首页：data-icon=home搜索搜索：data-icon=Search 仅图标仅图标 data-iconpos=notext按钮图标二默认情况下，所有的图标都放在按钮的按钮文本左。此默认可以覆盖使用 data-iconpos 属性来设置图标的右上方（top）、底部（bottom）、右侧（right）、左侧（left）的文本。Delete 隐藏图片上的文字隐藏图片上的文字 data-iconp

5、os=notextdata-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 ); 按钮图标四用自带的样式加入

6、自定义的图标要求图标必须是18*18的小图标，如何加入大的自定义图标？需要修改jQuery Mobile的样式 .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

7、: 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; 分组按钮 有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加 data-role=“controlgroup” 属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮。 默认情况下，组按钮表现为垂直列表，如果给容器添加 data-type=horizontal 的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地水平排列，并设置只有足够大以适应内容的宽度。（所以要注意横排情况下按钮不要太多，按钮的字也不要太