jQuery-Mobile 学习笔记

Posted 2021-07-23 wyy_persist

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery-Mobile 学习笔记相关的知识，希望对你有一定的参考价值。

移动web开发学习笔记（1）

日期：2021/5/25 下午15：18开始

重点：

jQuery-mobile开发学习：

在使用之前需要在<head>标签中引入：

引入：

分别是.css文件 min.css文件 jQuery.js文件 jQuery-mobile.js文件

引入jQuery-mobile.js是依靠jQuery.js的，所以需要引入。

1.div中的属性设置

data-role=”page”表示显示在浏览器中的页面

data-role="header" 创建页面上方的工具栏（常用于标题和搜索按钮）

data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

data-role="footer" 创建页面底部的工具栏

在jQuery-mobile中在单一的html页面中创建多个页面。

通过唯一的id来分配页面，并使用href属性来连接彼此。

2.过渡效果的实现

过渡效果可应用于任意链接或通过使用data-transition属性进行表单提交

<a href="#anylink" data-transition="slide">滑动到页面二</a>

在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。

其中设置的：<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑动</a>

其中的reverse表示按照原来的方向反向滑动。

3.按钮组件

创建按钮

使用 <button> 元素

使用 <input> 元素

使用 data-role="button" 的 <a> 元素

推荐使用<a data-role=button来实现页面的链接，使用button和input实现表单的提交

导航按钮

<a href="#pagetwo" data-role="button">转到页面二</a>

行内按钮

使用data-inline=true来设置行内多个按钮并排显示

使用组合按钮

将data-role=cnotrolgroup和属性data-type=”horizontal|vertical”一起使用，来规定水平或垂直地使用按钮：

实例：

</div>

默认情况下，组合按钮是垂直分组的，彼此间没有外边距和空白。并且只有第一个和最后一个按钮拥有圆角，在组合后就创造出了漂亮的外观。

后退按钮

其他的更多的data-*属性：

Data-corners：规定按钮是否有圆角

Data-mini：规定是否是小型按钮

Data-shadow：规定按钮是否有阴影

4.jQuery图标

使用data-icon属性给按钮添加图标：

当然也可以在button或input中使用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设置为notext

5.jQuery-mobile工具栏

标题栏：

代码实例：

<h1>欢迎来到我的主页</h1>

</div>

向页眉标题的左侧添加一个按钮：

<h1>欢迎来到我的主页</h1>

</div>

如果想在h1之后放按钮，需要规定类名为ui-btn-right：

在<a>标签中设置class类名即可。

页眉可以包含一个或两个按钮，但页脚没有限制。

页脚栏：

与页眉相比，页脚更具有伸缩性，更加实用多变，可以包含更多的所需数量的按钮。

<a href="#" data-role="button">转播到新浪微博</a>

<a href="#" data-role="button">转播到腾讯微博</a>

</div>

注意：页脚与页眉的样式不同（会减少一些内边距和空白，并且不会居中）。如果要解决该问题需要设置类名：“ui-btn”

定位页眉和页脚

使用data-position属性来定位页眉和页脚

放置页眉和页脚的方式有三种：

Inline - 默认。页眉和页脚与页面内容位于行内。
Fixed - 页面和页脚会留在页面顶部和底部。
Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through

使用fullscreen对于处理照片和视频的显示非常理想

对fixed和fullscreen定位，触摸屁股时候将隐藏和显示页眉及页脚

6.jQuery-Mobile导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

请使用 data-role="navbar" 属性来定义导航栏

需要注意的是：

按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

活动按钮

当导航栏中的链接被敲击时，会得到选取外观（按下）。

如需要不敲击链接时实现此外观，请使用class=“ui-btn-active”

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：

实例代码：

拓展：

内容中添加导航栏代码实例：

<div data-role="content">
    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="plus">更多</a></li>
            <li><a href="#" data-icon="minus">更少</a></li>
            <li><a href="#" data-icon="delete">删除</a></li>
            <li><a href="#" data-icon="check">喜爱</a></li>
            <li><a href="#" data-icon="info">信息</a></li>
        </ul>
    </div>
    <p>该例演示内容中的导航栏。</p>
</div>

演示多个按钮（超过5个按钮的实现）：

可折叠

可折叠的内容块：对于存储部分信息十分有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记。

默认的改内容是关闭的，如果需要设置加载时扩展开来，那么设置data-collapsed=false即可。

嵌套的可折叠块：

代码实例；

<h1>点击我 - 我可以折叠！</h1>

<p>我是被展开的内容。</p>

<h1>点击我 - 我是嵌套的可折叠块！</h1>

<p>我是嵌套的可折叠块中被展开的内容。</p>

</div>

可折叠内容块可以被嵌套您希望的任意次数。

可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块

代码实例：

<h1>点击我 - 我可以折叠！</h1>

<p>我是被展开的内容。</p>

</div>

<h1>点击我 - 我可以折叠！</h1>

<p>我是被展开的内容。</p>

</div>

更小的collapse块：

<div data-role="content">
    <div data-role="collapsible" data-mini="true">
        <h1>点击我 - 我是可折叠的！</h1>
        <p>我是可折叠的内容。</p>
    </div>
</div>

使用data-collapsed-icon属性更改图标：

<h1>data-collapsed-icon 规定按钮的图标。</h1>

<p>data-expanded-icon 规定内容被展开时按钮的图标。</p>

</div>

上述代码的效果是将其中的+号改为了：向上或向下的箭头。

jQuery-Mobile网格

jQuery-Mobile提供了一套基于CSS布局方案。但是一般不推荐在移动设备上使用列布局。这是由于移动设备的屏幕宽度所限。

但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。

可使用的网格布局

在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。

实例 1: 对于 ui-grid-a 类（两列布局），您必须规定两个子元素 ui-block-a 和 ui-block-b。

实例 2: 对于 ui-grid-b 类（三列布局），请添加三个子元素 ui-block-a、ui-block-b 和 ui-block-c。

定制网格

可以通过使用CSS来定制列块，实例代码如下：

<style>

.ui-block-a,

.ui-block-b,

.ui-block-c

{

background-color: lightgray;

border: 1px solid black;

height: 100px;

font-weight: bold;

text-align: center;

padding: 30px;

}

</style>

同时你也可以使用行内样式来定制块：

多行

在列中包含多个行也是可能的。

ui-block-a-class 将始终创建新行

</div>

jQuery-Mobile列表视图

jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (<ol>) 和无序列表 (<ul>)。

如需创建列表，请向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使这些项目可点击，请在每个列表项（<li>）中规定链接：

实例代码：

</ol>

</ul>

如需为列表添加圆角和外边距，请使用 data-inset="true" 属性

默认地，列表中的列表项会自动转换为按钮（无需 data-role="button"）

列表分隔符

列表分隔符（List Dividers）用于把项目组织和组合为分类/节。

如需规定列表分隔符，请向 <li> 元素添加 data-role="list-divider" 属性：

代码实例：

</ul>

当列表项目是字母开头的时候，jQuery-Mobile会自动添加列表分隔符，通过在ol 或ul中设置data-autodividers=”true”属性即可。

实例代码：

<li><a href="#">Angela</a></li>

<li><a href="#">Calvin</a></li>

...

</ul>

注意：data-autodividers="true" 属性通过对列表项文本的首字母进行大写来创建分隔符。

搜索过滤器

如需在列表中添加搜索框，请使用 data-filter="true" 属性。

实例代码：

默认地，搜索框中的文本是 "Filter items..."。

如需修改默认文本，请使用 data-filter-placeholder 属性。

实例代码：

扩展：

只读列表（没有链接的列表，不可点击）

</ol>

</ul>

</div>

jQuery-Mobile列表内容

jQuery-Mobile列表缩略图

对于16 * 16px的图像，在连接中添加<img>元素。

jQuery-Mobile将自动将图像调整至80 * 80px；

使用html在列表缩略图中扩展显示对应的图片的解释。

<li>

<h2>Google Chrome</h2>

<p>Google Chrome 免费的开源 web 浏览器。发布于 2008 年。</p>

</a>

</li>

</ul>

测试展示实例：

jQuery-Mobile列表图标

如需向您的列表添加 16x16px 的图标，请向 <img> 元素添加 class="ui-li-icon" 属性

拆分按钮

如需创建带有垂直分隔栏的拆分列表，请在 <li> 元素内放置两个链接。

jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。

实例代码：

<li>

</li>

</ul>

还可以通过页面和对话框，可使链接的功能更强。

实例代码：

<ul data-role="listview">
    <li>
        <a href="#"><img src="../img/icons/chrome.jpg"></a>
        <a href="#download" data-rel="dialog">下载浏览器</a>
    </li>
</ul>

计数泡沫

用于显示列表项中的对应的数量。

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

实例代码：

<li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>

<li><a href="#">Trash<span class="ui-li-count">7</span></a></li>

</ul>

如需在计数泡泡中显示正确的数字，就必须进行程序化更新。我们将在下一章种讲解。

扩展：

使用data-icon实现对于列表中默认图标的更改。

可折叠列表实例代码：

</div>

<p><b>To Peter Griffin</b></p>

<p>Well, Mr. Griffin, I've looked into physical results.</p>

<p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>

<p>But now, onto the cancer</p>

<p>You are a Cancer, right? You were born in July? Now onto these test results.</p>

<p class="ui-li-aside">Re: Appointment</p></a>

</li>

<h2>Glen Quagmire</h2>

<p>Remember me this weekend!</p>

<br>

<p>- giggity giggity goo</p>

<p class="ui-li-aside">Re: Camping</p></a>

</li>

<h2>Louis</h2>

<p><b>Happy Girl!</b></p>

<p>Thank you so much!!</p>

<p class="ui-li-aside">Re: Christmas Gifts</p></a>

</li>

</ul>

</div>

jQuery-Mobile表单

jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。

表单结构：

jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。

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

文本框

搜索框

单选框

复选框

选择菜单

滑动条

翻转切换开关

当您与 jQuery Mobile 表单打交道时，应该了解以下信息：

<form> 元素必须设置 method 和 action 属性

每个表单元素必须设置唯一的 "id" 属性。该 id 在站点的页面中必须是唯一的。这是因为 jQuery Mobile 的单页面导航模型允许许多不同的“页面”同时呈现。

每个表单元素必须有一个标记（label）。请设置 label 的 for 属性来匹配元素的 id。

实例代码：

<label for="fname">First name:</label>

</form>

如需隐藏 label，请使用类 ui-hidden-accessible。这很常用，当您需要元素的 placeholder 属性充当 label 时。

域容器

如果需要 label 和表单元素在宽屏幕上显示正常，请用带有 data-role="fieldcontain" 属性的 <div> 或 <fieldset> 元素来包装 label 或表单元素。

代码如下：

<label for="fname">First name:</label>

</div>

</form>

提示：fieldcontain 属性基于页面宽度来设置 label 和表单控件的样式。当页面宽度大于 480px 时，它会自动将 label 与表单控件放置于同一行。当小于 480px 时，label 会被放置于表单元素之上。

提示：

如需避免 jQuery Mobile 自动为可点击元素设置样式，请使用 data-role="none" 属性。

实例代码：

<label for="fname">First name:</label>

在jQuery-Mobile中提交表单：

会自动通过AJAX表单进行提交，并会尝试将服务器响应整合入应用程序的DOM中。

jQuery-Mobile表单输入元素

jQuery-Mobile文本输入：

输入字段是通过标准的 HTML 元素编写的，jQuery Mobile 会为它们设置专门针对移动设备的美观易用的样式。您还可以使用新的 HTML5 <input> 类型

实例代码：

</div>

</form>

文本框

使用textarea实现多行文本的输入。

文本框会自动扩大，来适应输入的文本。

<label for="info">Additional Information:</label>

</div>

</form>

搜索框

输入类型 type="search" 是 HTML5 中的新类型，用于定义供输入搜索词的文本字段

实例代码：

<label for="search">Search:</label>

</div>

</form>

单选按钮

当用户选择有限数量的选项中的一个时，会用到单选按钮。

如需创建一套单选按钮，请添加 type="radio" 的 input 元素以及相应的 label。在 <fieldset> 元素中包装单选按钮。您也可以增加一个 <legend> 元素来定义 <fieldset> 的标题。

请用 data-role="controlgroup" 属性来组合这些按钮

实例代码：

<legend>Choose your gender:</legend>

<label for="female">Female</label>

</fieldset>

</form>

复选框

当用户选择的时候是有限数量选项中的一个或多个选项时，会用到复选框。

<legend>Choose as many favorite colors as you'd like:</legend>

<label for="green">Green</label>

</fieldset>

</form>

更多实例

如需对单选框或复选框进行水平分组，请使用 data-type="horizontal" 属性

您也可以使用域容器来包装 <fieldset>

<legend>Choose your gender:</legend>

</fieldset></div>

如果您希望“预选”其中一个按钮，请使用 HTML <input> 标签的 checked 属性。

jQuery-Mobile表单选择菜单

iPhone 上的选择菜单：

android 设备上的选择菜单：

<select> 元素创建带有若干选项的下拉菜单。

<select> 元素中的 <option> 元素定义列表中的可用选项：

代码实例：

</select>

</fieldset>

</form>

如果列表中包含了一长列相关的选项，请在 <select> 中使用 <optgroup> 元素。

实例：

<option value="mon">Monday</option>

<option value="tue">Tuesday</option>

<option value="wed">Wednesday</option>

</optgroup>

<option value="sat">Saturday</option>

<option value="sun">Sunday</option>

</optgroup>

</select>

自定义选择菜单

本页上方的图片，展示了移动平台显示选择菜单的独特方式。

如果您希望在所有移动设备上显示一致外观的选择菜单，请使用 jQuery 的自定义选择菜单，data-native-menu="false" 属性

代码实例：

Multiple Selections

如需在选择菜单中选取多个选项，请在 <select> 元素中使用 multiple 属性。

扩展：

组合一个或多个选择菜单

实例代码：

</div>

<option value="mon">Monday</option>

<option value="tue">Tuesday</option>

<option value="wed">Wednesday</option>

<option value="thu">Thursday</option>

<option value="fri">Friday</option>

<option value="sat">Saturday</option>

<option value="sun">Sunday</option>

</select>

</select>

</fieldset>

</div>

</form>

</div>

在对应的option中设置selected属性实现预选。

可折叠表单的实现：

只需要设置，fieldset中的属性data-role=”collapsible”即可实现。

//截止到2021.5.25 晚上19：21学习笔记

仅复习使用。

感谢：https://www.w3school.com.cn/jquery/index.asp W3school提供的优质课程讲解

以上是关于jQuery-Mobile 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章