跟我学jQuery Mobile框架技术及应用实例(第4部分)
1.1跟我学jQuery Mobile框架技术及应用实例（第4部分）
1.1.1在对话框中包含按钮
1、两种形式的按钮——普通的按钮
按钮是Jquery Mobile的核心组件，在其他的组件中也广泛应用。起导航作用的按钮应该写为链接标签，而在表单内起提交作用的按钮可以为如下形式（为普通的HTML按钮标签）：
不再支持type="image" 类型的图片按钮。
不需要添加任何额外的属性即可自动增强为Jquery Mobile的按钮——默认增强后的按钮为块级元素，并撑大到与页面等宽。Jquery Mobile自动把type为submi,reset,button或image 的按钮元素或输入元素样式化为按钮，所以没有必要增加data-role="button"的属性。
而如果添加data-role="none"属性，则可以保持HTML标签为标准的按钮显示风格，而不增强为JQM的按钮风格。
2、超链接按钮
起导航作用的按钮应该写为链接，在page的区域内，可以通过给链接加data-role="button"的属性样式化为按钮——默认增强后的按钮为块级元素，并撑大到与页面等宽。
也可以应用CSS样式定义出超链接按钮：
因此，在jQuery Mobile 中，按钮可通过如下的三种方式创建：
1)使用
2)使用 元素，如：
3)使用带有data-role="button" 的 元素，如：按钮
另外，在jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。因此推荐使用带有data-role="button" 的 元素在页面间进行链接（也包括应用class="ui-shadow ui-btn ui-corner-all"的样式定义）创建出导航按钮，使用 或
class="ui-shadow ui-btn ui-corner-all"的样式定义也可以采用对应的data-* 属性定义达到相同的效果：
1)data-corners true | false 规定按钮是否圆角
2)data-mini true | false 规定按钮是否更小
3)data-shadow true | false 规定按钮是否有阴影
3、如何设置成内联元素的按钮
在默认的情况下，按钮都是占满整个屏幕宽度（为100%）。如果需要一个仅是与按钮内的文字或者图标等内容一样宽的按钮，或者想要并排显示两个或多个按钮，请添加data-inline="true"属性定义。
（1）多个内联元素的按钮顺序排列
如果想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性——只需要添加data-inline="true"属性，下面以链接按钮为例：
如果有多个按钮想在一行横排，可以在按钮上增加data-inline="true"的属性，这样就可以把按钮样式化为最小宽度，并且浮动，使他们在同一行横排。而对于
等类型的按钮，则应该要通过data-inline="true"属性定义为内联类型的按钮。
value="查询提交" class="ui-btn ui-btn-inline" data-inline="true">
而对于
class="ui-btn ui-btn-inline">取消^_^?
4、保持HTML标签按钮风格不变
对于自动增强类型的按钮，可否禁用？只需要添加data-role="none"的属性即可，下面以button标签为例：
5、为按钮设置图标
（1）添加图标
Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。
如需添加图标到按钮中，请使用data-icon 属性定义出相关的按钮图标。
（2）在默认方式下图标是居左显示的
添加data-icon="home"的属性即可生成带有home图标的按钮，但默认图标是居左的。
（3）data-icon属性可以被用来创建如下所示的图标
左箭头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-icon="Alert" 信息data-icon="info" 首页data-icon="home" 搜索data-icon="Search"
6、如何设置图标按钮的位置
添加data-iconpos的属性可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。
7、如何设置只有图标的按钮
添加data-iconpos="notext"的属性即可生成只有图标的按钮：只有图标，没有文字，写再多也没有用 button插件会在屏幕上隐藏文本，但是会把文本作为title属性作为该按钮的动态提示文本信息。
8、如何设置自定义图标的按钮
添加data-iconpos="custom"的属性，下面以链接按钮为例：自定义图标按钮
然后再增加css样式：
.ui-icon-customButtonID{
background:;
}
因此，要使用自定义图标，需要指定一个唯一的data-icon 值（比如data-icon="customButtonID"）。Jquery Mobile的button插件会生成一个class值添加上去，该值由ui-icon-与data-icon的值组合而成（ui-icon-customButtonID ），然后在css中指定这个类的背景图片地址。
9、如何设置分组按钮
jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。只需要把data-role="controlgroup" 属性和data-type="horizontal|vertical"属性一起使用来规定是否水平或垂直组合按钮。
（1）默认是垂直排列
给分组按钮所在的容器标签添加data-role="controlgroup"的属性，但默认是垂直排列形成的列表。
（2）示例图
它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。
10、如何设置水平排列的分组按钮
给分组按钮所在的容器标签再添加data-type="horizontal"的属性，按钮会横向一个挨着一个地排列，容器会自动撑大到适应内容（所以要注意横排情况下按钮不要太多，按钮的字也不要太多）。
11、取消按钮的四周的圆角显示风格
添加data-corners="false"属性则可以取消按钮的四周的圆角显示风格。
而添加data-shadow="false"属性定义，则可以取消按钮四周的阴影。
12、改变按钮的显示风格
添加data-theme属性可以改变按钮的显示风格为标题的配色方案。
13、切换为小尺寸的按钮
添加data-mini="true"可以将按钮切换为小尺寸的按钮。
14、创建禁用状态的按钮——添加disabled属性
15、对按钮进行动态操作
（1）动态操作Button按钮，最好使用标签来实现
而完全不推荐，因为jquery mobile为了渲染出按钮的样式，会把input button隐藏，而用div来替代其内容，这时开发人员想通过javascript来隐藏/显示/更改按钮文字的话，是没效果的。
（2）对按钮的常用操作
$("#save").hide(); //隐藏按钮
$("#save").show(); //显示按钮
$("#save").find(".ui-btn-text").html("修改"); //修改按钮文字
下面的代码实现动态新增一个按钮
$("body").append("删除")
$("#del").button();
16、按钮的选中状态
需要添加“ui-btn-active ui-state-persist”CSS样式。
17、创建后退按钮
如需创建后退按钮，请使用data-rel="back" 属性（这将会忽略锚的href 值）。下面为代码示例：
18、与按钮相关的data- 属性
data- 属性值描述
data-corners true | false 规定按钮是否圆角
data-icon Icons 参考手册规定按钮的图表。默认没有图标。
data-iconpos left | right | top | bottom | notext 规定图标的位置
data-iconshadow true | false 规定按钮图标是否有阴影
data-inline true | false 规定按钮是否内联
data-mini true | false 规定按钮是小尺寸还是常规尺寸
data-shadow true | false 规定按钮是否有阴影
data-theme letter (a-z) 规定按钮的主题颜色