基础篇
1、jquery mobile 只会从加载的文档中取出第一个页面(第一个带role="page"的div),其他内容都将被忽略。即所有目标文档的head元素中的信息以及其他在首个页面元素之外的内容都被忽略。
解决:预读并缓存页面,为a标签的链接加上一个布尔属性data-prefetch, eg:<a href="XXX.html" data-prefetch></a>
2、为避免DOM占用过多内存,当外部加载页面变得不可见时(再后退或前进到一个新页面后),jquery mobile 会自动从dom中删除它
强制缓存方法:在元素上加data-dom-cache="true"
3、连接到非jquery mobile 内容的站点或文档
解决:在a标签添加data-rel="external",<a data-rel="external" href="http://www.xxx.com">我的博客</a>
4、a链接加上了target属性或者连接中使用data-ajax=false,会被当做绝对外部链接
5、连接上加data-direction=“reverse”来强制(后退行为)使用反转过渡效果
6、对话框主题色用data-overlay-theme来指定
7、页面比例默认是可自动改变,在meta标签中加user-scalable=no属性可以改变窗口比例。
组件篇
1、工具栏(页头、页尾):在data-role="page"的div标签里加上data-fullscreen="true"全屏显示工具栏透明效果。
2、强制指定按钮的位置,用class="ui-btn-right"或者class="ui-btn-left"
3、可折叠组件:可折叠组件地中没有hx元素时,内容出于打开状态且不能收缩;当有多个hx时,第一个当作标题,其他的当作内容处理。
4、手风琴组件:默认情况下展开最后一个面板,如果想默认展开别的面板,只需在想展开的元素加data-collapaed="false",并且在所有其他面板上加上data-collapsed=“true”
5、列组件:在移动设备上最好放一些小元素,如:按钮、链接或小项目,元素最多可以排列为5个等宽列。创建网格只需使用div,ui-grid-a表示2列,ui-grid-b表示3列....每个单元格应带有ui-block-<letter>的块容器,其中<letter>的值为a-e,分别表示第一至第五列。
6、创建按钮的方式:①使用button元素 ②使用会被渲染为按钮的input元素,包括type=“button”、type=“submit” 、type=“reset”、type=“image”等 ③任何带有data-role=“button”的元素
7、创建内联按钮:默认情况下按钮会独占一行,在元素上应用data-inline=“true”来创建内联按钮,这种按钮不会占满屏幕的宽度,可以通过布局网格来使至多5个按钮占一行。
8、控件组、分组按钮:一个带有data-role=“controlgroup”的div元素就是一个控件组,在控件组的基础上加data-type=“horizontal”来创建水平布局分组按钮。
eg:垂直分配组:
<div data-role=“controlgroup”>
<a href="#" data-role=“button”>btn1</a>
<a href="#" data-role=“button”>btn2</a>
<a href="#" data-role=“button”>btn3</a>
</div>
eg:水平分配组:
<div data-role=“controlgroup” data-type=“horizontal”>
<a href="#" data-role=“button” data-inline=“true”>btn1</a>
<a href="#" data-role=“button” data-inline=“true”>btn2</a>
<a href="#" data-role=“button” data-inline=“true”>btn3</a>
</div>
9、按钮效果:通过data-shadow="false" data-corners="false"使按钮不带阴影和圆角。
10、自定义图标:①在data-icon属性中定义一个不重复的名字,推荐命名机制为<应用名>-<图标名>,eg:myapp-tweet
②创建一个名为ui-icon-<name>的css类,eg: .ui-icon-myapp-tweet{background-image:url(icons/tweet.png);}
12、控制列表行的重要程度:想要突出显示某行时,可将对应的标题包含在hx中(如h1),这样行高会增加些;想要某些行显得不那么重要,可将对应行的标题包含在p标签中,行高会减少些。
13、行图标:位于行标题左侧的16*16像素的图片(常用于各种操作列表如删除、编辑等),由ui-li-icon类定义,如
<li>
<img src="/icons/email.png" class="ul-li-icon"/>Twitter
</li>
14、缩略图:位于行文本左侧的80*80像素的图片,不需特殊类处理,如下:
<li>
<img src="/thumb/email.png"/>Twitter
</li>
15、附加内容:在行的次级列中显示的补充信息,用带有ui-li-aside类的span或者div元素来实现。
16、搜索过滤数据组件:在列表的ul或ol上加data-filter=“true”属性,列表头会自动出现起作用的搜索框,该搜索框左侧带有搜索图标、一个水印提示文本,圆角,右侧还有清晰的清除图标。可以使用data-filter-placeholder改变搜素框内的文字。