jMobile。。。

最新推荐文章于 2024-05-30 11:31:19 发布

huang0zhuang

最新推荐文章于 2024-05-30 11:31:19 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/huang0zhuang/article/details/37884143

本文详细介绍jQuery Mobile框架的使用方法，包括安装配置、页面切换、按钮制作、表单控件等核心功能。同时介绍了如何利用jQuery Mobile进行响应式布局设计及事件绑定。

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

安装：

需要在你的网页中加载以下层叠样式 (.css) 和 JavaScript 库 (.js) 就能够使用 jQuery Mobile。

可以使用不同的href属性来区分使用同一个唯一id的页面。

链接中添加data-rel="dialog"让用户点击链接时弹出对话框:

页面切换：

data-transition="..."；来选择切换方式。

data-direction="reverse"

按钮：

在 jQuery Mobile 中，按钮可通过三种方式创建：

使用 <button> 元素
使用 <input> 元素
使用带有 data-role="button" 的 <a> 元素。<a href="#" data-role="button">按钮</a>。

默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline="true"。

Query Mobile 提供了一个简单的方法来将按钮组合在一起。请把 data-role="controlgroup" 属性和 data-type="horizontal|vertical" 一起使用来规定是否水平或垂直组合按钮。

如需创建后退按钮，请使用 data-rel="back" 属性（这会忽略锚的 href 值）：

按钮图片：

如需添加图标到您的按钮，请使用 data-icon 属性：

<a href="#anylink" data-role="button" data-icon="search">Search</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"	网格

请使用 data-iconpos 属性来指定位置：可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。只想要图标的话就设置：data-iconpos="notext"

把按钮链接放置在 <h1> 元素之后，将无法显示右侧的文本。要添加一个按钮到头部标题的右侧，请指定 class 为 "ui-btn- right"：<a href="#" data-role="button" class="ui-btn-right">搜索</a>。

头部和尾部可以通过三种方式进行定位

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。全屏定位适用于照片、图像和视频。

导航懒：

默认情况下，导航栏中的链接将自动变成按钮（不需要 data-role="button"）。使用 data-role="navbar" 属性来定义导航栏：

可折叠快：

如需创建一个可折叠的内容块，需要为容器添加 data-role="collapsible" 属性。默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed="false"：

通过 data-mini 属性迷你化可折叠块，还可以通过data-collpased-icon和data-expended-icon。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

表格：

网格 class	列	列宽	对应于
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

列表视图：

列表视图是jQuery Mobile中功能强大的一个特性。它会使标准的无序或有序列表应用更广泛。应用方法就是在ul或ol标签中添加data-role="listview"属性。在每个项目(<li>)中添加链接，用户可以点击它。

列表样式的圆角和边缘，使用 data-inset="true" 属性设置:

指定列表分割，给列表项<li>元素添加 data-role="list-divider" 属性即可：

如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true" 属性设置可以配置为自动生成的项目的分隔:

jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter="true" 属性即可:

设置搜索输入框的默认字符data-filter-placeholder="搜索姓名"

列表内容：

在列表 <img> 元素使用 class="ui-li-icon" 添加 16x16px 图标：

jQuery Mobile 会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在图标时显示:

气泡数字：如需添加气泡数字，请使用行内元素，比如 <span>，设置 class "ui-li-count" 属性并添加数字：

表单：

在 jQuery Mobile 中，您可以使用下列表单控件：

文本输入框
搜索输入框
单选按钮
复选框
选择菜单
滑动条
翻转拨动开关

使用 jQuery Mobile 表单时，您应当知道：

<form> 元素必须有一个 method 和一个 action 属性
每个表单元素必须有一个唯一的 "id" 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现
每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id
为了防止 jQuery Mobile 为可点击元素自动添加样式，请使用 data-role="none" 属性：

表单输入：

对于多行文本输入可使用 <textarea> 。

单选按钮：

为了创建一系列单选按钮，请添加带有 type="radio" 的 input 以及相应的 label。把单选按钮包围在 <fieldset> 元素内。您也可以添加一个 <legend> 元素来定义 <fieldset> 的标题。

提示：请使用 data-role="controlgroup" 来把按钮组合在一起。

选择表单：

在选择表单的选项条里面添加标签的方式是：<optgroup label="...">各种option后</optgroup>

<select name="day" id="day" data-native-menu="false">让选择菜单在所有的移动设备上都显示相同，就使用 jQuery 自带的自定义选择菜单，data-native-menu="false" 属性：

<select name="day" id="day" multiple data-native-menu="false">如需在选择菜单中选择多个选项，请在 <select> 元素中使用 multiple 属性

滑动条：

如需创建滑动条，请使用 <input type="range">。

拨动开关：