html5各种页面切换效果和模态对话框用法总结

复制代码<div data-role="controlgroup">
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
如果需要按钮横向排列可以增加 data-type="horizontal"属性。

表单应用

jQuery Mobile 框架为原生的 html 表单元素封装了新的表现形式，对触屏设备的操作进行了优化。在框架的页面中会自动将 form 元素渲染成 jQuery Mobile 风格的元素。
form 元素的使用和默认的 html 方式使用相同，可以同样使用 Post 和 get 方式提交数据，但是需要注意的是元素的 ID 命名问题，在常规的规范中同一个页面中是不允许出现相同的 ID命名的，在 jQuery Mobile 中由于其允许在同一个 DOM 中存在多个页面，所以建议 form 元素的 ID 命名在整个项目中是唯一的，防止由于 ID 问题引发的错误。
默认情况下框架会自动渲染在标准页面中的 form 元素的风格，一旦成功渲染后，这个控件元素将可以使用 jQuery 中的函数进行操作。在某些情况下，我们需要使用 html 原生的 form 元素，为了阻止 mobile 框架对该元素的自动渲染，在框架中我们在 data-role 属性中引入了一个控制参数”none”。使用这个属性参数就会让该元素以 html 原生的状态显示。
例如：

复制代码<select name="foo" id="foo" data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>
 
列表应用

信息列表是开发应用中使用频率相对比较高的控件，用于数据显示、导航, 数据列表等。为了适应不同的信息内容，列表的表现形式也多种多样。
列表的代码结构是以有序和无序列表来实现的，只要在 ul 或 ol 上声明 data-role="listview"就可以让框架以列表的方式渲染了，例如：

复制代码<ul data-role="listview" data-theme="g">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
如果需要在列表里添加数据，则需要在数据加载后执行 refresh()方法对列表进行数据更新。
例如：
复制代码$('ul').listview('refresh');
以上是运用 jQuery Mobile 进行界面构建的基础规则。

希望本文所述对大家的HTML5程序设计有所帮助。