Jquery Mobile学习教程之对话框

最新推荐文章于 2022-02-03 21:58:09 发布

在奋斗的大道

最新推荐文章于 2022-02-03 21:58:09 发布

阅读量1.1k

点赞数

分类专栏： Jqury mobile学习教程

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18842009

版权

Jqury mobile学习教程专栏收录该内容

6 篇文章 1 订阅

订阅专栏

对话框

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');

在奋斗的大道

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery Mobile学习教程之对话框

对话框 jQuery Mobile中创建对话框的方式十分方便，只需要在指向页面的链接元素中添加一个“data-rel”属性，并将该属性值设置为“dialog”。单击该链接时，打开的页面将以一个对话框的形式展示在浏览器中。单击对话框中的任意链接时，打开的对话框将自动关闭，并以“回退”的形式切换至上一页。此外，还可以在对话框中创建一个“取消”按钮，通过设置元素属性或编写Java
复制链接

扫一扫

专栏目录