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

<div data-role="footer" class="ui-bar" data-position="inline">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-icon="delete">Remove</a>
<a href="index.html" data-icon="plus">Add</a>
<a href="index.html" data-icon="arrow-u">Up</a>
<a href="index.html" data-icon="arrow-d">Down</a>
</div>
</div>
技巧：通过使用 data-id 属性可以让多个页面使用相同的页脚。

导航

导航容器是一个可以每行容纳最多 5 个按钮的按钮组控件，用一个拥有 data-role="navbar"
属性的 div 来容纳这些按钮。
例子：

复制代码<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">One</a></li>
<li><a href="b.html">Two</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
在默认的按钮上添加 class="ui-btn-active"
如果按钮的数量超过 5 个，导航容器将会自动以合适的数量分配成多行显示。

按钮

你可以将页面中的任何一个链接通过 data-role="button"来声明成为按钮的显示风格。为了风格统一，框架会在页面加载时自动将 form 类的按钮格式化为 jQuery Mobile 风格的按钮，不需要添加 data-role 属性。
框架中包含了一组常用的图标可以用于按钮，用 data-icon 属性中的参数来定义显示不同的图标效果。
例如：

复制代码<a href="index.html" data-role="button" data-icon="delete">Delete</a>
data-icon 原生参数列表

除了可以默认显示左侧的图标之外，还可以用 data-iconpos 属性来定义图标与文字的位置关系。
data-iconpos 参数列表：

参数效果：
right 图标在文字的右侧
top 图标在文字上面
bottom 图标在文字下面
data-iconpos="notext"属性可以让按钮隐藏文字。

内联样式

在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮，这时候我们就需要知道一个新的叫做内联模式的属性了
data-inline="true"。
例如：

复制代码<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>
 
按钮组

jQuery Mobile 框架可以将几个按钮以组的方式显示，data-role="controlgroup"用以展示按钮间的紧凑关系。例如：