Jquery Mobile学习教程之对话框
来源:互联网 发布:java线程 第四版 pdf 编辑:程序博客网 时间:2024/05/16 13:04
对话框
jQuery Mobile中创建对话框的方式十分方便,只需要在指向页面的链接元素中添加一个“data-rel”属性,并将该属性值设置为“dialog”。单击该链接时,打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中的任意链接时,打开的对话框将自动关闭,并以“回退”的形式切换至上一页。此外,还可以在对话框中创建一个“取消”按钮,通过设置元素属性或编写JavaScript代码的方式关闭当前打开的对话框。
创建简单对话框
将链接元素的“data-rel”属性值设置为“true”,打开的对话框实际上是一个标准的“page”容器。因此,在打开时,也可以通过设置“data-transition”属性值,选择打开对话框时切换页面的动画效果。下面通过一个简单的实例来说明如何创建一个简单对话框。
jQuery Mobile中创建对话框
1. 功能说明
新建一个HTML页面,在页面中添加一个<a>元素,并将该元素的“data-rel”属性值设置为“dialog”,表示以对话框的形式打开链接元素指定的目标URL地址。
2. 实现代码
<!DOCTYPE html> <html> <head> <title>jQuery Mobile 打开对话框</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" /> <script src="Js/jquery-1.6.4.js" type="text/javascript"></script> <script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="e1"> <div data-role="header"><h1>对话框</h1></div> <div data-role="content"> <p> <a href="dialog.htm" data-rel="dialog" data-transition="pop">打开对话框 </a> </p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>另外,创建一个对话框页面dialog.htm,加入代码如下所示:<!DOCTYPE html> <html> <head> <title>简单的对话框</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div data-role="page"> <div data-role="header"><h1>主题</h1></div> <div data-role="content"> <p>这是一个简单的对话框!</p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>
页面效果:
源码分析:
本实例设置链接的“data-rel”属性值为“dialog”,通过该链接打开的页面将以对话框的形式展示在当前页面中。该对话框以模式的方式浮在当前页的上面,背景添加深色,四周是圆角的效果,左上角自带一个“×”关闭按钮,单击该按钮,对话框将关闭。
关闭对话框
在打开的对话框中,可以使用自带的“×”关闭按钮关闭打开的对话框,此外,在对话框内添加其他链接按钮,将该链接的“data-rel”属性值设置为“back”,单击该链接也可以实现关闭对话框的功能。下面通过一个简单的实例来说明如何创建一个可关闭的对话框。
jQuery Mobile中关闭对话框
1. 功能说明
新建一个HTML页面,并添加一个<a>元素的链接,单击该链接时,将以对话框的形式弹出一个指定的页面,单击对话框中的“关闭”按钮,可以直接关闭打开的对话框。
2. 实现代码
<!DOCTYPE html> <html> <head> <title>jQuery Mobile 关闭对话框</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="Css/jquery.mobile-1.0.1.min.css" rel="Stylesheet" type="text/css" /> <script src="Js/jquery-1.6.4.js" type="text/javascript"></script> <script src="Js/jquery.mobile-1.0.1.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="e1"> <div data-role="header"><h1>对话框</h1></div> <div data-role="content"> <p> <a href="close.htm" data-rel="dialog" data-transition="pop">关闭 </a> </p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>另外,创建一个HTML页面close.htm,用于系统提示。加入代码如下所示:<!DOCTYPE html> <html> <head> <title>系统提示</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <div data-role="page"> <div data-role="header"><h1>提示</h1></div> <div data-role="content"> <p>真的要关闭弹出的对话框吗?</p> <p> <a href="#" data-role="button" data-rel="back" data-theme="a">关闭 </a> </p> </div> <div data-role="footer"><h4>2012 rttop.cn studio</h4></div> </div> </body> </html>
效果截图:
源码分析
本实例在对话框中将链接元素的“data-rel”属性设置为“back”,单击该链接将关闭当前打开的对话框。这种方法在不支持JavaScript代码的浏览器中,同样可以实现对应的功能;另外,编写JavaScript代码也可以实现关闭对话框的功能。代码如下所示:
$('.ui-dialog').dialog('close');
- Jquery Mobile学习教程之对话框
- jquery mobile学习教程之初识Jquery mobile 一
- Jquery mobile学习教程之Jquery mobile 二 页面结构
- Jquery Mobile 学习教程之页面脚本
- Jquery Mobile学习教程之预加载与页面缓存
- Jquery Mobile学习教程之四 页面过渡
- jQuery Mobile学习教程系列文章推荐
- jquery mobile 弹出对话框 popup
- jQuery Mobile 教程
- jQuery Mobile教程
- jquery mobile 基本教程
- JQuery Mobile 教程
- Jquery Mobile UI之列表的学习
- jQuery Mobile教程:jQuery Mobile基本事件
- jQuery Mobile学习二:jQuery Mobile简介
- 【jQuery Mobile学习】jQuery Mobile简介
- 【jQuery Mobile学习】jQuery Mobile页面(一)
- 【jQuery Mobile学习】jQuery Mobile页面(二)
- android中生成keystore
- windows系统下,双网卡电脑更改默认路由的命令
- Spring AOP + AspectJ Annotation Example
- Camshift算法原理及其Opencv实现
- 解析中移动WLAN“无感知”策略 加速NGH商用落地
- Jquery Mobile学习教程之对话框
- 美国社交礼仪
- 导入导出Excel工具类ExcelUtil
- 802.11ah已进入草案制订阶段
- VC Showmodal
- mysql的加锁与死锁问题
- 机房收费——状态图
- 黑马程序员—面向对象的概念
- oracle 查看表空间大小