按钮和表单元素总结.pptVIP

(2)定位图标 您也可以规定图标定位在按钮的什么部位： 顶部（top） 右侧（right） 底部（bottom） 左侧（left） 默认情况下，所有的按钮图标被放置到左侧。 (2)定位图标 请使用 data-iconpos 属性来指定位置。 图标的位置： a href=#link data-role=button data-icon=search?data-iconpos=top顶部/a a href=#link data-role=button data-icon=search?data-iconpos=right右侧/a a href=#link data-role=button data-icon=search?data-iconpos=bottom底部/a a href=#link data-role=button data-icon=search?data-iconpos=left左侧/a (3)只显示图标 如果只想显示图标，请设置 data-iconpos 为 notext： 后退： a href=#link data-role=button data-icon=search?data-iconpos=notext搜索/a jQuery Mobile 表单  jQuery Mobile 会自动为 HTML 表单自动添加样式，让它们看起来更具吸引力，触摸起来更具友好性。 1.jQuery Mobile 表单基础 2.jQuery Mobile 表单输入 3.jQuery Mobile 表单选择 4.jQuery Mobile 表单滑动条  本讲总结 按钮的创建方式？ 图标的创建方式？ 表单元素的创建？ * * * * 表单元素和按钮 （第八讲 ) 知识回顾 页眉栏相关属性？ 页脚栏相关属性？ 工具栏相关属性？ 标签栏相关属性？ 教学内容 在 jQuery Mobile 中创建按钮 导航按钮 内联按钮 组合按钮 后退按钮 jQuery Mobile?按钮图标 表单元素  1.在 jQuery Mobile 中创建按钮 在 jQuery Mobile 中，按钮可通过三种方式创建： 使用 button 元素 使用 input 元素 使用带有 data-role=button 的 a 元素  （1）使用 button 元素创建按钮 创建方法：button按钮/button 请参照下边效果图完成页面制作： （2）使用 input 元素创建按钮 创建方法：input type=button value=按钮 请参照下边效果图完成页面制作： （3）使用a 元素创建按钮 创建方法：a href=#?data-role=button按钮/a 请参照下边效果图完成页面制作： （3）使用a 元素创建按钮 在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。 我们推荐您使用带有 data-role=button 的 a 元素在页面间进行链接，使用 input 或 button 元素进行表单提交。 2.导航按钮 如需通过按钮在页面间进行链接，请使用带有 data-role=“button” 属性的 a 元素如： a href=#pagetwo data-role=button访问第二个页面/a 请参照下边两个效果图完成页面制作：  效果图1 效果图2 3.内联按钮 默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline=“true”。 方法如下： a href=#pagetwo data-role=button?data-inline=true访问第二个页面/a  3.内联按钮 请参照下边两个效果图完成页面制作：  效果图1 效果图2 4.组合按钮 jQuery Mobile 提供了一个简单的方法来将按钮组合在一起。 data-role=“controlgroup” 属性和 data-type=“horizontal|vertical” 一起使用来规定是否水平或垂直组合按钮。 默认情况下，组合按钮