按钮和表单元素

表单元素和按钮（第八讲)知识回顾页眉栏相关属性？页脚栏相关属性？工具栏相关属性？标签栏相关属性？教学内容在jQueryMobile中创建按钮导航按钮内联按钮组合按钮后退按钮jQueryMobile

按钮图标表单元素

1.在jQueryMobile中创建按钮在jQueryMobile中，按钮可通过三种方式创建：使用<button>元素使用<input>元素使用带有data-role="button"的<a>元素

（1）使用<button>元素创建按钮创建方法：<button>按钮</button>请参照下边效果图完成页面制作：（2）使用<input>元素创建按钮创建方法：<inputtype="button"value="按钮">请参照下边效果图完成页面制作：

（3）使用<a>元素创建按钮创建方法：<ahref="#"

data-role="button">按钮</a>请参照下边效果图完成页面制作：

（3）使用<a>元素创建按钮在jQueryMobile中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。

我们推荐您使用带有data-role="button"的<a>元素在页面间进行链接，使用<input>或<button>元素进行表单提交。2.导航按钮如需通过按钮在页面间进行链接，请使用带有data-role=“button”属性的<a>元素如：<ahref="#pagetwo"data-role="button">访问第二个页面</a>请参照下边两个效果图完成页面制作：

效果图1效果图23.内联按钮默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加data-inline=“true”。方法如下：<ahref="#pagetwo"data-role="button"

data-inline="true">访问第二个页面</a>

3.内联按钮请参照下边两个效果图完成页面制作：

效果图1效果图24.组合按钮jQueryMobile提供了一个简单的方法来将按钮组合在一起。

data-role=“controlgroup”属性和data-type=“horizontal|vertical”一起使用来规定是否水平或垂直组合按钮。默认情况下，组合按钮是垂直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。

4.组合按钮

实例<div

data-role="controlgroup"data-type="horizontal">

<ahref="#anylink"data-role="button">按钮1</a>

<ahref="#anylink"data-role="button">按钮2</a>

<ahref="#anylink"data-role="button">按钮3</a>

</div>4.组合按钮请参照下边两个效果图完成页面制作：

data-role="controlgroup"

data-type="horizontal|vertical“实例：<div

data-role="controlgroup"data-type="horizontal">

<ahref="#anylink"data-role="button">按钮1</a>

<ahref="#anylink"data-role="button">按钮2</a>

<ahref="#anylink"data-role="button">按钮3</a>

</div>5.后退按钮如需创建后退按钮，请使用data-rel="back"属性（这会忽略锚的href值）：实例<ahref="#"data-role="button"

data-rel="back">返回</a>

5.后退按钮请参照下边两个效果图完成页面制作：

5.后退按钮属性值描述实例data-cornerstrue|false规定按钮是否圆角尝试一下data-minitrue|false规定按钮是否更小尝试一下data-shadowtrue|false规定按钮是否有阴影尝试一下更多用于按钮的data-*属性data-cornersdata-minidata-shadow6.jQueryMobile

按钮图标jQueryMobile提供了一套让按钮看起来更称心如意的图标。(1)添加图标到jQueryMobile按钮如需添加图标到您的按钮，请使用data-icon属性。如：<ahref="#anylink"data-role="button"

data-icon="search">Search</a>提示：您也可以在<button>或<input>元素上使用data-icon属性。(1)添加图标到jQueryMobile按钮下面我们列出一些jQueryMobile提供的可用图标：属性值描述图标实例data-icon="arrow-l"左箭头尝试一下data-icon="arrow-r"右箭头尝试一下data-icon="delete"删除尝试一下data-icon="info"信息尝试一下data-icon="home"首页尝试一下data-icon="back"后退尝试一下data-icon="search"搜索尝试一下data-icon="grid"网格尝试一下(2)定位图标您也可以规定图标定位在按钮的什么部位：

顶部（top）右侧（right）底部（bottom）

左侧（left）

默认情况下，所有的按钮图标被放置到左侧。(2)定位图标请使用data-iconpos属性来指定位置。图标的位置：<ahref="#link"data-role="button"data-icon="search"

data-iconpos="top">顶部</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="right">右侧</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="bottom">底部</a>

<ahref="#link"data-role="button"data-icon="search"

data-iconpos="left">左侧</a>(3)只显示图标如果只想显示图标，请设置data-iconpos为"notext"：后退：<ahref="#link"data-role="button"data-icon="search"

data-iconpos="notext">搜索</a>jQueryMobile表单

jQueryMobile会自动为HTM