jquery mobile 中常见的问题

最新推荐文章于 2025-07-04 23:17:55 发布

零点起航

最新推荐文章于 2025-07-04 23:17:55 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：移动开发

本文链接：https://blog.youkuaiyun.com/csyuyaoxiadn/article/details/18359561

移动开发专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了jQuery Mobile 的使用技巧与组件功能，包括页面加载优化、组件配置、链接处理、页面比例调整等，旨在帮助开发者高效地利用jQuery Mobile进行移动网页开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基础篇

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);}

11、分隔按钮列表：在列表的li元素内写两个a标签会将行分为两部分（只能分为两部分），效果如下图：

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改变搜素框内的文字。