jquerymobile基础属性总结

因为公司项目需要用jquerymobile做，开始学习，有一点html、js的基础，感觉还好，先总结下jquerymobile的基础属性。

data-role

data-role="page" 是显示在浏览器中的页面
data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）
data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等
data-role="footer" 创建页面底部的工具栏
data-role="collapsible" 可折叠的
data-role="collapsible-set" 可折叠集合，被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
data-role="none" 避免 jQuery Mobile 自动为可点击元素设置样式
data-role="button" 的 <a> 元素 按钮
data-role="controlgroup" 一组，组合
data-role="navbar" div被该属性修饰后即为导航栏。
data-role="listview" 向 <ol> 或 <ul> 元素添加 data-role="listview"，即可创建列表。
data-role="list-divider" 如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性
data-role="fieldcontain" fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。


data-transition
过渡效果
fade 默认。淡入淡出到下一页。
flip 从后向前翻动到下一页。
flow 抛出当前页面，引入下一页。
pop 像弹出窗口那样转到下一页。
slide 从右向左滑动到下一页。
slidefade 从右向左滑动并淡入到下一页。
slideup 从下到上滑动到下一页。
slidedown 从上到下滑动到下一页。
turn 转向下一页。
none 无过渡效果。


按钮的三种方式
使用 <button> 元素
使用 <input> 元素
使用 data-role="button" 的 <a> 元素
data-inline="true" 变为行内按钮
data-rel="back" 为后退按钮
data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮
data-corners true | false规定按钮是否有圆角。
data-mini true | false规定是否是小型按钮。
data-shadow true | false规定按钮是否有阴影。


按钮图标
data-icon 添加按钮图标
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" 网格



按钮图标的位置
data-iconpos 
data-iconpos="top" 图标在上
data-iconpos="right" 图标在右
data-iconpos="bottom" 图标在下
data-iconpos="left" 图标在左

data-iconpos 设置为 "notext"后，只显示图标，不显示文字。



页眉和页脚
工具栏
class="ui-btn-right" 页眉添加该类名后，按钮将显示在页眉的右侧。
class="ui-btn" 页脚添加该类名后，该div下的按钮将居中。


data-position 属性来定位页眉和页脚
放置页眉和页脚的方式有三种：
Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。对于 fixed 和 fullscreen 定位，触摸屏幕将隐藏和显示页眉及页脚。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，data-fullscreen="true"


导航栏
data-role="navbar" div被该属性修饰后即为导航栏。
<div data-role="navbar">
<ul>
<li></li>
</ul>
</div>
默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。（按钮在5个以内）


可折叠
data-role="collapsible" 可折叠的
data-collapsed="false" 默认展开
data-role="collapsible-set" 可折叠集合，被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。
data-inset="false" 可去掉圆角。
data-mini="true" 最小化 collapsibles
data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u"改变 collapsibles 的图标（默认是 + 和 -）。


网格
网格类 列 列宽度对应
ui-grid-a 2 50% / 50% ui-block-a|b
ui-grid-b 3 33% / 33% / 33% ui-block-a|b|c
ui-grid-c 4 25% / 25% / 25% / 25% ui-block-a|b|c|d
ui-grid-d 5 20% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e




列表视图
data-role="listview" 向 <ol> 或 <ul> 元素添加 data-role="listview"，即可创建列表。
data-role="list-divider" 如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性
data-autodividers="true" 自动添加恰当的分隔符，仅限于字母数字开头才可以自动分割。
列表搜索过滤器
data-filter="true" 需在列表中添加搜索框，请使用 data-filter="true" ，如需修改默认文本，请使用 data-filter-placeholder 属性


列表图标
class="ui-li-icon" 如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性
拆分按钮
创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接，会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。
列表对话框
data-rel="dialog"
计数泡沫
<span class="ui-li-count">335</span>