jQuery Mobileb 入门学习（1）

来源：互联网发布：c语言杨辉三角六种编辑：程序博客网时间：2024/04/30 12:53

自己学习的笔记。移动互联网开发这里使用hbuider开发工具。移动端各类框架如MUI框架很方便。直接创建移动app项目。

1、jQuery Mobile简介

jQuery Mobile 是一个用于创建移动端web应用的前端框架。jQuery Mobile 是一种 web 框架，用于创建移动web 应用程序。jQuery Mobile将“写得更少、做得更多”这一理念提升到了新的层次：它会自动为网页设计交互的易用外观，并在所有移动设计上保持一致。
jQuery Mobile
不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。此框架简单易用。页面开发主要使用标记，无需或仅 JavaScript。此框架还提供一个主题系统，允许您提供自己的应用程序样式。
jQuery Mobile为开发移动应用程序提供了非常简单的用户接口，添补了在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，通过使用jQuery Mobile 可以 “写更少的代码，做更多的事情” : 它可以通过一个灵活及简单的方式来布局网页，且兼容所有移动设备。

2、jQuery Mobile开发环境

jQuery Mobile的使用Opera Mobile Emulator，它是一款PC电脑上模拟移动设备的浏览器，实际上就是 Mobile 的“模拟器”。简单来说，它能在你的电脑上模拟各种手机、平板等设备去访问网站。用来模拟手机版本的opera mobile做开发测试使用。程序可直接拖到模拟器里面运行。
官网：http://jquerymobile.com/
在页面中添加 jQuery Mobile可以通过以下2种方式
1.从内容分发网络CDN 中加载 jQuery Mobile (推荐)
2.从jQuerymobile.com 下载 jQuery Mobile库
在页面中添加 jQuery Mobile CDN(百度)：
//meta使用viewport以确保页面可自由缩放，让界面可以自适应屏幕
<meta name="viewport" content="width=device-width, initial-scale=1">
//引入 jQuery Mobile 样式

<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

//引入 jQuery 库

<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

//引入 jQuery Mobile 库

<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

如果你想将 jQuery Mobile 放于你的主机中,你可以从 jQuerymobile.com下载该文件。将下载的文件放置于与网页同一目录下。

<head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="jquery.mobile-1.4.5.css"><script src="jquery.js"></script><script src="jquery.mobile-1.4.5.js"></script></head>

HTML5 data-* 属性用于通过 jQuery Mobile 为移动设备创建“对触控友好的”交互外观。

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

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

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

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

使用 jQuery Mobile, 你可以在单个 HTML 文件中创建多个不同的页面。你可以使用不同的href属性来区分使用同一个唯一id的页面。

jQuery Mobile语法基础

data-role=”main” 定义了页面的内容，比如文本，图片，表单，按钮等。
“ui-content” 类用于在页面添加内边距和外边距。
使用 data-role=”navbar” 属性来定义导航栏。
data-role=”panel” 属性来创建面板。
如需创建一个可折叠的内容块，需要为容器添加 data-role=”collapsible” 属性。
默认情况下，按钮占满整个屏幕宽度。如果你想要一个仅是与内容一样宽的按钮，或者如果您想要并排显示两个或多个按钮，请添加 data-inline=”true”。
- 如需添加图标到您的按钮，请使用 data-icon 属性。您也可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。请使用 data-iconpos 属性来指定位置。默认情况下，所有的按钮图标被放置到左侧。如果只想显示图标，请设置 data-iconpos 为 “notext”。

如：<a href="#link" data-role="button" data-icon="search" data-iconpos="top">顶部</a>

要添加一个按钮到头部标题的右侧，请指定 class 为 “ui-btn-right”。
使用 data-role=”navbar” 属性来定义导航栏。默认情况下，按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度：1 个按钮占 100% 宽度，2 个按钮则各占 50% 的宽度，3 个按钮则每个占 33,3% 的宽度，依此类推。然而，如果您在导航栏中指定了超过 5 个按钮，将会拆成多行(建议导航栏不要超过5个按钮选项)。
导航栏图标。jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

   <a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>

在其他方式的按钮上，如列表或表单中的按钮需要使用 data-icon 属性。可以规定图标定位在按钮的什么部位：顶部（top）、右侧（right）、底部（bottom）、左侧（left）。请使用 ui-btn-icon 属性来指定位置：

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">顶部</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">右侧</a>

这里写图片描述

如需创建一个可折叠的内容块，需要为容器添加 data-role=”collapsible” 属性。默认情况下，内容是被折叠起来的。如需在页面加载时展开内容，请使用 data-collapsed=”false”。
可折叠集合是将可折叠块组合在一起（就像手风琴一样）。当一个新的块被展开时，所有其他的块都会被折叠起来。创建若干个可折叠的内容块，然后把可折叠内容块用带有 data-role=”collapsible-set” 的新容器包围起来。
jQuery Mobile 布局网格:
jQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移动设备上，由于考虑手机的屏幕宽度狭窄，一般不建议使用分栏分列布局。
但有时您想要将较小的元素（如按钮或导航标签）并排地排列在一起，就像是在一个表格中一样。这种情况下，推荐使用分列布局。
在容器使用 ui-responsive 类来创建响应式网格。
Jquery Mobile 提供有下面几个预设的布局：
一列（使用ui-grid-solo类）
两列（使用ui-grid-a类）
三列（使用ui-grid-b类）
四列（使用ui-grid-c类）
五列（使用ui-grid-d类）

网格中的列是等宽的（合计是 100%），没有边框、背景、margin 或 padding。
这里有四种布局网格可供使用：
网格类列列宽对应
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”属性。在每个项目(

)中添加链接，用户可以点击它。列表样式的圆角和边缘，使用 data-inset=”true” 属性设置。
内置列表：
（1）data-inset=”true”不占据整个屏幕，在一个圆角区域内，四周就会自动增加外边距。
（2）data-role=”list-divider”一组列表条目的页眉；data-divider-theme=”a”主题样式。指定列表分割，给列表项

元素添加 data-role=”list-divider” 属性即可。如果你有一个字母顺序排列的列表，（例如一个电话簿）通过 <ol> 或者<ul> 元素的 data-autodividers="true"属性设置可以配置为自动生成的项目的分隔。默认情况下，创建的分隔文本是列表项文本的第一个大写字母。
（3）默认文本显示时是左对齐，使用一个包含class=”ui-li-aside”类的元素进行包装右对齐，显示到右上角。

jquery Mobile提供一个非常简单的方法，实现客户端搜索功能，筛选列表的选项。只需添加 data-filter=”true” 属性即可。data-filter-placeholder 属性，可以设置搜索输入框的默认字符。
在列表元素使用 class=”ui-li-icon” 添加 16x16px 图标。
当使用 jQuery Mobile 表单时，您应当知道：
• 元素必须有一个 method 和一个 action 属性
•每个表单元素必须有一个唯一的 “id” 属性。id 必须是整个站点所有页面上唯一的。这是因为 jQuery Mobile 的单页导航机制使得多个不同页面在同一时间被呈现
•每个表单元素必须有一个标签。设置标签的 for 属性来匹配元素的 id。
如需让标签和表单元素看起来更适应宽屏，请用带有 data-role=”fieldcontain” 属性的
或元素包围 label/form 元素，或者使用class=”ui-field-contain”。
响应式表格让页面内容在移动端和桌面设备上能够很好的适配。响应式表格有两种类型： reflow(回流) 与列切换。
回流表格: 回流模型表格在屏幕尺寸足够大时是水平显示，而在屏幕尺寸达到足够小时，所有的数据会变成垂直显示。创建表格，在
元素上添加 data-role=”table” 和 “ui-responsive” 类:

再添加一个class=”table-stroke”,就会自动增加下划线。
对于响应式表格，你必须包含和元素。
不要使用 rowspan 或 colspan 属性; 响应式表格中是不支持这两个属性的。
列切换的表格创建方式如下：
列切换模型会在宽度不够时隐藏数据。列切换的表格创建方式如下：

<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th><th data-priority="3">我是重要的列 - 我可能被隐藏</th><th data-priority="5">我是不怎么重要的列 - 我最先被隐藏</th>

默认情况下，jQuery Mobile 会先隐藏表格右侧的列。但是，你可以在表格头部()通过添加 data-priority 属性指定隐藏列的顺序，data-priority 的值可以是 1 (最高优先级) 到 6 (最低优先级):<th data-priority="1">我是非常重要的列 - 我不会被隐藏</th>
jQuery Mobile 提供了5种不同的主题样式, 从 “a” 到 “e” - 每一种主题的按钮，工具条，内容块等等颜色都不一致，每个主题的视觉效果也不一样。
通过设置元素的data-theme属性可以自定义应用的外观:

<div data-role="page" data-theme="a|b|c|d|e">

页面切换效果可被应用于任何使用 data-transition 属性的链接或表单提交。
滑动效果：data-transition=”slide”
在页眉和页脚中使用data-position=”fixed”,导航栏就会固定在上部和下部，不随滚动滚动。

jQuery Mobile主题定制

jQuery Mobile 提供了 2 种不同的主题样式, 从 “a” 到 “b” - 每一种主题的按钮，工具条，内容块等颜色都不一致，每个主题的视觉效果也不一样。通过设置元素的data-theme属性可以自定义应用的外观:

<div data-role="header" data-theme="b"></div><div data-role="footer" data-theme="b"></div><a href="#" class="ui-btn ui-btn-b">黑色按钮</a>

a值：为灰色背景黑色文字，激活的按钮和链接为白色文本蓝色背景。
b值：为黑色背景白色文字，激活的按钮和链接为白色文本蓝色背景。
jQuery Mobile 本身提供的样式并不能满足所有人的要求，而自己去定制 jQuery Mobile 的样式所牵扯的 CSS 样式又非常复杂，为此 jQuery Mobile 专门推出了一个在线工具 ThemeRoller 来帮你生成这些样式。地址为 http://themeroller.jquerymobile.com/
用户可以根据自己的喜好，对所有的按钮，文字，超链接进行样式的自定义，十分方便，在定义好后，可以使用其download的功能，把样式导出下载，可以生成一个 zip 压缩包。解压缩后，您将看到一个名为 themes 的文件夹。该文件夹包括了主题所需的 CSS 和图像。

jQuery Mobile 事件

页面过渡涉及两个页面：一张”来”的页面和一张”去”的页面 - 这些过渡使当前活动页面（”来的”页面）到新页面（”去的”页面的改变过程变得更加动感。
pagebeforeshow 在”去的”页面触发，在过渡动画开始前。
pageshow 在”去的”页面触发，在过渡动画完成后。
pagebeforehide 在”来的”页面触发，在过渡动画开始前。
pagehide 在”来的”页面触发，在过渡动画完成后。
在 jQuery Mobile 中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时，您可以触发任何自定义java script 作为对五种不同的事件的响应tap、taphold、swipe、swipeleft 和 swiperight。
tap(轻击)：一次快速完整的轻击后触发。
taphold（轻击不放）：轻击并不放（大约一秒）后触发。
swipeleft（左划）：划动事件为向左的方向时触发。
swiperight（右划）：划动事件为向右的方向时触发。
jQuery Mobile实现了上下左右滑动，淡出，弹出，反转等动画。通过“data-transition”实现动画定义。
data-transition=”fade” 默认，淡入到下一页
data-transition=”flip” 从后向前翻转到下一页
data-transition=”flow” 抛出当前页，进入下一页
data-transition=”pop” 像弹出窗口一样进入下一页
data-transition=”slide”从右到左滑动到下一页
data-transition=”slidefade” 从右到左滑动并淡入到下一页
data-transition=”slideup” 从下到上滑动到下一页
data-transition=”slidedown” 从上到下滑动到下一页
data-transition=”turn” 翻到下一页
data-transition=”none” 没有切换效果，无过渡效果

阅读全文

0 0