jQuery Mobile
来源：互联网 发布：c语言大小写转化 编辑：程序博客网 时间：2024/05/16 08:05
简介
概念
- 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/download1.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未完待续……………………
0 0
- jQuery Mobile
- jQuery Mobile
- JQUERY MOBILE
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- JQuery Mobile
- jquery mobile
- jQuery Mobile
- jQuery Mobile
- jQuery Mobile
- jquery Mobile
- jQuery Mobile
- jQuery Mobile
- ODI环境搭建_06配置代理
- Spark SQL中实现Hive MapJoin
- android studio从svn上检出项目以及可能遇到的一些问题
- ios学习--IOS 3DES加密解密
- 常数e的含义
- jQuery Mobile
- ubuntu小技巧6——如何修复Ubuntu系统引导项
- POJ 2421 Constructing Roads
- iOS UIAlertController提示框控制器
- 完整的R语言预测建模实例-从数据清理到建模预测
- banner广告轮播的实现
- Informatica 初学日记全（转载）
- 简单的面向过程分页
- 父子进程对文件的操作
