您的位置：首页 > Web前端 > JQuery

jQuery Mobile

2016-09-23 16:16 316 查看

简介

概念

jQuery Mobile 是一种 web 框架，用于创建移动 web 应用程序。

jQuery Mobile 是一个为触控优化的框架，用于创建移动 web 应用程序。

jQuery 适用于所有流行的智能手机和平板电脑：

jQuery Mobile 构建于 jQuery 库之上，这使其更易学习，如果您通晓 jQuery 的话。

它使用 HTML5、CSS3、JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局。

由于是使用HTML5和CSS3的，所以在调试的时候必须使用能支持HTML5和CSS3的浏览器，最好使用最新的谷歌（Google Chrome）浏览器来进行开发调试。

官网

http://jquerymobile.com


下载地址

http://jquerymobile.com/download


1.4.5版本下载地址

http://jquerymobile.com/resources/download/jquery.mobile-1.4.5.zip


安装

都是在页面中使用的所以直接引入就可以了


使用CND引入

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


下载解压后引入

<link rel="stylesheet" href="./mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


注意： jQuery Mobile是基于jQuery库的，所以文件顺序不要错 jQuery库应该放在jQuery Mobile上面

注意：CND引入方式，虽然不用下载了，但是离线情况下就懵逼了。。。

jQuery Mobile 基本组件

页面

页面使用例子

<body>
<div data-role="page">
<div data-role="header">
<h1>欢迎访问我的主页 </h1>
</div>
<div data-role="content">
<p>我是一名移动开发者！</p>
</div>
<div data-role="footer">
<h1> 页脚文本</h1>
</div>
</div>
</body>


例子解释

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

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

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

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

多页面 和 页面跳转

例子

<div data-role="page" id="pageone">
<div data-role="content">
<a href="#pagetwo">转到页面二</a>
</div>
</div>

<div data-role="page" id="pagetwo">
<div data-role="content">
<a href="#pageone">转到页面一</a>
<a href="externalfile.html">转到外部页面</a>
<a href="#pageone" data-rel="dialog">以弹窗的形式打开页面一</a>
</div>
</div>


例子解释

通过ID可以区分不同页面

在链接使用 #页面名 可以跳转到不同页面

如果需要跳转到外部页面的话 需要指定页面地址

使用 data-rel=”dialog” 参数可以 以弹框的形式打开新页面

页面过渡效果

浏览器支持

Internet Explorer 10 支持 3D 转换（更早的版本不支持）

Opera 仍然不支持 3D 转换

主要是通过 data-transition属性来实现的

例子

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎来到我的主页</h1>
</div>
<div data-role="content">
<p>点击链接来查看滑动效果（从右向左滑动到下一页） </p>
<a href="#pagetwo" data-transition="slide">滑动到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎来到我的主页 </h1>
</div>
<div data-role="content">
<p>点击链接来查看反向的滑动效果（从左向右滑动到前一页）</p>
<a href="#pageone" data-transition="slide" data-direction="reverse">滑动到页面一（反向）</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
</body>
</html>


例子解释

- data-transition="slide" 设置页面切换效果， 从右向左滑动到下一页。
- data-direction="reverse" 通过设置 reverse 可以进行反方向切换。
- 页面默认是淡入淡出到下一页， 即 fade；


### data-transition 可使用的值



按钮

jQuery Mobile 中的按钮可通过三种方法创建：

使用 <button> 元素
<button>按钮</button>

使用 <input> 元素
<input type="button" value="按钮">

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


注意：

在 jQuery Mobile 中，按钮会自动样式化，让它们在移动设备上更具吸引力和可用性。我们推荐您使用带有 data-role="button" 的 < a> 元素在页面间进行链接，使用 <input> 或 <button> 元素进行表单提交。


导航按钮

如需通过按钮来链接页面，请使用 data-role=”button” 的 < a > 元素

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


行内按钮

默认情况下，按钮会占据屏幕的全部宽度。如果您需要按钮适应其内容，或者如果您需要两个或多个按钮并排显示，请添加 data-inline="true"


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


组合按钮

jQuery Mobile 提供了对按钮进行组合的简单方法。
请将 data-role="controlgroup" 属性与 data-type="horizontal|vertical" 一同使用，以规定水平或垂直地组合按钮


<div data-role="controlgroup" data-type="horizontal">
<a href="#anylink" data-role="button">按钮 1</a>
<a href="#anylink" data-role="button">按钮 2</a>
<a href="#anylink" data-role="button">按钮 3</a>
</div>


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


后退按钮

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


<a href="#" data-role="button" data-rel="back" >返回</a>


按钮实例

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
</script>
</head>

<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>
这里是导航按钮
</h1>
</div>
<div data-role="content">
<a href="#pagetwo" data-role="button" data-transition="slide">
转到页面二
</a>
</div>
<div data-role="footer">
<h1>
这里是导航按钮END
</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>
这里是行内按钮
</h1>
</div>
<div data-role="content">
<p>
再见！
</p>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
<a href="#pagethree" data-role="button" data-inline="true">
转到页面三
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagethree">
<div data-role="header">
<h1>
分组按钮
</h1>
</div>
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
<p>
水平分组：
</p>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
</div>
<br>
<div data-role="controlgroup" data-type="vertical">
<p>
垂直分组（默认）：
</p>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
<a href="#pagefour" data-role="button">
转到页面四
</a>
</div>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagefour">
<div data-role="header">
<h1>
后退按钮实例
</h1>
</div>
<div data-role="content">
<a href="#" data-role="button" data-rel="back">
后退
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
</body>

</html>


用于按钮的 data-*常用属性



jQuery Mobile Data 属性

http://www.w3school.com.cn/jquerymobile/jquerymobile_ref_data.asp


按钮图标

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

语法

<a href="#anylink" data-role="button" data-icon="search">搜索</a>
<button data-icon="search">test</button>
<input type='button' data-icon="search" value='test' />


例子

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>
带有图标的按钮
</h1>
</div>
<div data-role="content">
<a href="#home" data-role="button" data-inline="true" data-rel="dialog"  data-icon="home">
首页
</a>
<a href="#options" data-role="button" data-inline="true" data-rel="dialog" data-icon="grid">
选项
</a>
<a href="#search" data-role="button" data-inline="true" data-rel="dialog" data-icon="search">
搜索
</a>
<a href="#pagetwo" data-role="button" data-icon="arrow-r" data-iconpos="right">
下一页
</a>
<a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
信息
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>
带有图标的按钮
</h1>
</div>
<div data-role="content">
<a href="#pageone" data-role="button" data-icon="back" data-inline="true">
返回
</a>
<a href="#pageone" data-role="button" data-icon="arrow-l">
上一页
</a>
<a href="#info" data-role="button" data-rel="dialog" data-icon="info" data-iconpos="top">
信息
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="home">
<div data-role="header">
<h1>
首页
</h1>
</div>
<div data-role="content">
<p>
家是心之所在！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext">只显示图标</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="options">
<div data-role="header">
<h1>
选项
</h1>
</div>
<div data-role="content">
<p>
您刚敲击了选项按钮！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header">
<h1>
搜索
</h1>
</div>
<div data-role="content">
<p>
没有搜索结果！
</p>
<a href="#pageone" data-role="button" data-inline="true" data-icon="back">
返回
</a>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
<div data-role="page" id="info">
<div data-role="header">
<h1>
信息
</h1>
</div>
<div data-role="content">
<p>
jQuery Mobile 很有趣！
</p>
</div>
<div data-role="footer">
<h1>
页脚文本
</h1>
</div>
</div>
</body>
</html>


例子解析

data-icon=”back” 用来指定图标类型

data-iconpos=”top” 用来指定图标被放置的位置（top， right，bottom，left ）

data-iconpos=”notext” 可以让按钮只显示图标不显示文字

图标参考手册

http://www.runoob.com/jquerymobile/jquerymobile-ref-icons.html


未完待续……………………
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航