Jquery mobile 使用之基础篇

最新推荐文章于 2022-02-05 19:45:08 发布

原创最新推荐文章于 2022-02-05 19:45:08 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#对话框 #网格 #标签 #mobile #search

jquery mobile 专栏收录该内容

1 篇文章

订阅专栏

本文是jQuery Mobile的基础教程，涵盖了按钮、伸缩框、搜索过滤框、索引、列表视图、弹窗、选项卡、图标、网格布局和滑动效果等关键组件的使用方法。详细讲解了各组件的属性和示例代码，帮助开发者快速入门jQuery Mobile，创建响应式移动应用。

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

首先声明：jquery mobile 版本不同，代码差距比较大，建议使用最新版本---1.4.5;

官网主页：http://jquerymobile.com/

注:复制官网上的代码时，需要注意空格删除！否则页面样式可能出现空行或者错位；

教程主页：http://www.w3school.com.cn/jquerymobile/（有时候自学也是一种选择！有图，有真相！）

1.引入js、css注意顺序；

1）自定义主题：

官网上http://themeroller.jquerymobile.com/进行更改后右上角download，下载即可使用！

---默认主题；

2.页面布局：(可以进多个模块的嵌套)

</div><!--footer>

</div>

3.模块分类：

@yinjj_bj 我开发用到的模块分类；

1)button（按钮）

<a href="#" class="ui-btn">Anchor</a>

<a href="#" data-role=”button”>Anchor</a>

<button class="ui-btn">Button</button>

属性：

Data 属性	值	描述
data-corners	true \| false	规定按钮是否有圆角。
data-icon	Icons Reference	规定按钮的图标。默认是没有图标。
data-iconpos	left \| right \| top \| bottom \| notext	规定图标的位置。
data-iconshadow	true \| false	规定按钮图标是否有阴影。
data-inline	true \| false	规定按钮是否是行内的。
data-mini	true \| false	规定按钮是小型的还是常规尺寸的。
data-shadow	true \| false	规定按钮是否有阴影。
data-theme	letter (a-z)	规定按钮的主题颜色。

2)伸缩框（Collapsible）

可以在该div中嵌入其他模块！经常使用的比如filter和listview

</div>

3)Filterable（搜索过滤框）

在其他的模块中使用包括：listview的ul、table、controlgroup、collapsible等等；

两种使用方式：

1）直接在上述标签内添加data-filter=“true” ，一般用于listview（ul--li）中和折叠框

2）<form> <input id="from-input-id" data-type="search"/></form>

注：data-filter-placeholder 在第一种方法中失效！

第二种方法在input 中增加placeholder=""属性即可

data-filtertext="Animals" 过滤的内容，默认是过虑当前标签的显示的html（），也可以设置；可用于汉语和英语搜索；类似于首字母搜索的功能！

4)索引：

需要引入css和js

效果图（右侧索引栏）：

5)listview（列表）：

<li>Acura</li>

<li>Cadillac</li>

<li>Ferrari</li>

</ul>

如果是<ol>标签，效果是列表前面包含序号；

属性：

带有 data-role="listview" 属性的 <ol> 或 <ul>。

Data 属性	值	描述
data-autodividers	true \| false	规定是否自动分隔列表项。
data-count-theme	letter (a-z)	规定计数泡沫的主题颜色。默认是 "c"。
data-divider-theme	letter (a-z)	规定列表分隔符的主题颜色。默认是 "b"。
data-filter	true \| false	规定是否在列表中添加搜索框。
data-filter-placeholder	sometext	规定搜索框中的文本。默认是 "Filter items..."。
data-filter-theme	letter (a-z)	规定搜索过滤程序的主题颜色。默认是 "c"。
data-icon	Icons Reference	规定列表的图标。
data-inset	true \| false	规定是否为列表添加圆角和外边距样式。
data-split-icon	Icons Reference	规定划分按钮的图标。默认是 "arrow-r"。
data-split-theme	letter (a-z)	规定划分按钮的主题颜色。默认是 "b"。
data-theme	letter (a-z)	规定列表的主题颜色。

带有 data-role="listview" 属性的 <ol> 或 <ul> 中的 <li>。

Data 属性	值	描述
data-filtertext	sometext	规定在过滤元素时搜索的文本。该文本而不是实际的列表项文本将会被搜索。
data-icon	Icons Reference	规定列表项的图标。
data-role	list-divider	规定列表项的分隔符。
data-theme	letter (a-z)	规定列表项的主题颜色。

注释：data-icon 属性仅适用于含有链接的列表项。

6)弹窗（对话框）（popup）：

属性：

带有 data-role="popup" 属性的容器。

Data 属性	值	描述
data-corners	true \| false	规定弹出框是否有圆角。
data-overlay-theme	letter (a-z)	规定弹出框的叠加（背景）色。默认是透明背景（none）。
data-shadow	true \| false	规定弹出框是否有阴影。
data-theme	letter (a-z)	规定弹出框的主题颜色。默认是继承，"none" 设置为透明。
data-tolerance	30, 15, 30, 15	规定距离窗口边缘 (top, right, bottom, left) 的距离。

带有 data-rel="popup" 属性的锚：

Data 属性	值	描述
data-position-to	origin \| jQuery selector \| window	规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。
data-rel	popup	用于打开的弹出框。
data-transition	fade \| flip \| flow \| pop \| slide \| slidedown \| slidefade \| slideup \| turn \| none	规定如何从一页过渡到下一页。参加 jQuery Mobile 过渡。