标签：
页面
基本页面
<div data-role=‘page‘ id=‘main‘> <div data-role=‘header‘> <h1>header</h1> </div> <div data-role=‘content‘> <p>content</p> </div> <div data-role=‘footer‘> <h1>footer</h1> </div> </div>
一个html文件中创建多个页面
转到外部文件：不能使用dialog
其他页面用对话框显示
<div data-role=‘page‘ id=‘main‘> <div data-role=‘header‘> <h1>jquery mobile完整示例</h1> </div> <div data-role=‘content‘> <p>content</p> <a href=‘#another‘ data-rel=‘dialog‘>转到另一个页面</a></br> <a href=‘http://www.baidu.com‘>百度</a> </div> <div data-role=‘footer‘> <h1>footer</h1> </div> </div> <div data-role=‘page‘ id=‘another‘> <div data-role=‘content‘> <a href=‘#main‘>转到主页</a> </div> </div>
过渡
<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>
| fade | 默认。淡入淡出到下一页。 | |
| flip | 从后向前翻动到下一页。 | |
| flow | 抛出当前页面，引入下一页。 | |
| pop | 像弹出窗口那样转到下一页。 | |
| slide | 从右向左滑动到下一页。 | |
| slidefade | 从右向左滑动并淡入到下一页。 | |
| slideup | 从下到上滑动到下一页。 | |
| slidedown | 从上到下滑动到下一页。 | |
| turn | 转向下一页。 | |
| none | 无过渡效果。 |
按钮
三种创建方式
<button>按钮</button> <input type=‘button‘ value=‘按钮‘> //以上都是表单提交 <a href=‘#‘ data-role=‘button‘>按钮</a> //用按钮来链接页面
行内按钮
组合按钮
后退按钮
<a href=‘#‘ data-role=‘button‘ data-inline=‘true‘>按钮</a> <div data-role=‘controlgroup‘ data-type=‘horizontal‘> <a href=‘#‘ data-role=‘button‘>按钮1</a> <a href=‘#‘ data-role=‘button‘>按钮2</a> <a href=‘#‘ data-role=‘button‘>按钮3</a> </div> <div data-role=‘controlgroup‘ data-type=‘vertical‘> <a href=‘#‘ data-role=‘button‘>按钮1</a> <a href=‘#‘ data-role=‘button‘>按钮2</a> <a href=‘#‘ data-role=‘button‘>按钮3</a> </div> <a href=‘#‘ data-role=‘button‘ data-corners=‘true‘>圆角按钮</a> <a href=‘#‘ data-role=‘button‘ data-mini=‘true‘>小型按钮</a> <a href=‘#‘ data-role=‘button‘ data-shadow=‘true‘>阴影按钮</a>
图标
位置
只显示图标
<a href=‘#‘ data-role=‘button‘ data-icon=‘search‘>搜索</a> <a href=‘#‘ data-role=‘button‘ data-icon=‘search‘ data-iconpos=‘right‘>搜索</a> <a href=‘#‘ data-role=‘button‘ data-icon=‘search‘ data-iconpos=‘notext‘>搜索</a>
| 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" | 网格 |
工具栏
页眉可加1或2个按钮，如果只有一个按钮，且想放在右边，需要.ui-btn-right
页脚可加多个按钮，但不会居中，如果想居中，需要.ui-btn
定位方式
inline：默认 fixed：页面和页脚会留在页面顶部和底部 fullscreen：在fixed基础上，点击屏幕，会隐藏页眉页脚 <div data-role="header" data-position="fixed" data-fullscreen="true"></div> <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
导航栏：不需要加data-role=‘button‘, 用data-role=‘navbar‘来定义
<div data-role=‘navbar‘> <ul>
//默认显示选中外观 <li><a href="#" class=‘ui-btn-active‘>首页</a></li> <li><a href="#">页面二</a></li> <li><a href="#">搜索</a></li> <li><a href="#">首页</a></li> <li><a href="#">页面二</a></li> <li><a href="#">搜索</a></li> </ul> </div>
对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：不太理解。
可折叠
<div data-role=‘collapsible‘ data-collapsed=‘false‘> <h1>点击折叠</h1> <p>折叠内容</p> </div>
//手风琴
<div data-role="collapsible-set"> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是被展开的内容。</p> </div> <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是被展开的内容。</p> </div> </div>
//嵌套折叠 <div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是被展开的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </div>
标签：
原文地址：http://www.cnblogs.com/wang-jing/p/4684657.html
