按钮和表单元素

1、表单元素和按钮（第八讲（第八讲 ) )知识回顾n页眉栏相关属性？ n页脚栏相关属性？n工具栏相关属性？n标签栏相关属性？教学内容n在 jQuery Mobile 中创建按钮n导航按钮n内联按钮n组合按钮n后退按钮njQuery Mobile按钮图标n表单元素1.在 jQuery Mobile 中创建按钮在 jQuery Mobile 中，按钮可通过三种方式创建：n 使用 元素n 使用 元素n 使用带有 data-role=button 的 元素（1）使用 元素创建按钮创建方法：按钮请参照下边效果图完成页面制作：请参照下边效果图完成页面制作： （2）使用 元素创建按钮创建方法：请参照下边效果图完

2、成页面制作：请参照下边效果图完成页面制作：（3）使用 元素创建按钮创建方法：按钮请参照下边效果图完成页面制作：请参照下边效果图完成页面制作：（3）使用 元素创建按钮 在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。 我们推荐您使用带有我们推荐您使用带有 data-role=button 的的 元素在页面间进行链接，使用元素在页面间进行链接，使用 或或 元素进行表单提交。元素进行表单提交。2.导航按钮如需通过按钮在页面间进行链接，请使用带有 data-role=“button” 属性的 元素如：访问第二个页面请参照下边两个效果图完成页面制作：请参照下边

3、两个效果图完成页面制作：效果图1效果图23.内联按钮 默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline=“true”。方法如下：访问第二个页面3.内联按钮请参照下边两个效果图完成页面制作：请参照下边两个效果图完成页面制作：效果图1效果图24.组合按钮 jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。 data-role=“controlgroup” 属性和 data-type=“horizontal|vertical” 一起使用来规定是否水平或垂直组合按钮。 默认情况下，组合按钮是垂

4、直组合，它们之间没有外边距和空间。并且只有第一个和最后一个按钮是圆角，以便它们组合在一起的时候创建一个漂亮的外观。4.组合按钮实例实例按钮 1按钮 2按钮 34.组合按钮请参照下边两个效果图完成页面制作：请参照下边两个效果图完成页面制作：data-role=controlgroupdata-type=horizontal|vertical“实例：按钮1按钮2按钮35.后退按钮 如需创建后退按钮，请使用 data-rel=back 属性（这会忽略锚的 href 值）：实例实例返回5.后退按钮请参照下边两个效果图完成页面制作：请参照下边两个效果图完成页面制作：5.后退按钮属性值描述实例data-c

5、ornerstrue|false规定按钮是否圆角尝试一下data-minitrue|false规定按钮是否更小尝试一下data-shadowtrue|false规定按钮是否有阴影 尝试一下更多用于按钮的 data-* 属性data-cornersdata-minidata-shadow6.jQuery Mobile按钮图标jQueryMobile提供了一套让按钮看起来更称心如意的图标。(1)添加图标到 jQuery Mobile 按钮如需添加图标到您的按钮，请使用data-icon属性。如：Search提示：提示：您也可以在或元素上使用data-icon属性。(1)添加图标到 jQuery M

6、obile 按钮下面我们列出一些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属性来指定位置。图标的位置：图标的位置：顶部右侧底部左侧(3)只显示图标如果只想显示图标，请设置data-iconpos 为为 notext：后退：后退：搜索 jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。 1.jQuery Mobile 表单基础表单基础 2