JqueryMobile学习之二---对话框

对话框

通过在链接中添加data-rel=”dialog”的属性，可以使链接页面的显示方式变为对话框。给显示的对话框加入切换的效果也是一个不错的选择

例如我们将about的链接变成一个对话框并加入相应的切换效果。代码如下

<p><a href="#about" data-rel="dialog" data-transition="slideup">About this app</a></p>

注意：目前的测试版本存在问题，当在一个页面中写多个”page”时在以dialog的方式打开一个页面时，不会出现对话框效果

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <link href="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css" />
 6     <script src="Scripts/jquery-1.6.4.js" type="text/javascript"></script>
 7     <script src="Scripts/jquery.mobile-1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10
11  <div data-role="page" id="home">
12
13    <div data-role="header">
14      <h1>Home</h1>
15    </div>
16
17    <div data-role="content">
18      <p><a href="#about"  data-rel="dialog" data-transition="slideup">About this APP</a></p>
19    </div>
20
21  </div>
22
23  <div data-role="page" id="about">
24
25    <div data-role="header">
26      <h1>About This App</h1>
27    </div>
28
29    <div data-role="content">
30      <p>This app rocks! <a href="#home">Go home</a></p>
31    </div>
32
33  </div>
34 </body>
35 </html>

转载于:https://www.cnblogs.com/caishuhua226/archive/2012/04/25/2469962.html

JqueryMobile学习之二---对话框相关推荐

Membership学习（二）membership入门
Membership学习(二)membership入门 --不写一行代码在asp.net中实现用户验证管理系统这篇文章我们将实现一个简单的网站,在网站中实现用户的身份验证,创建用户,修改密码还有限 ...
Membership学习（二）membership入门[xgluxv]
Membership学习(二)membership入门 --不写一行代码在asp.net中实现用户验证管理系统这篇文章我们将实现一个简单的网站,在网站中实现用户的身份验证,创建用户,修改密码还有限 ...
JavaScript 学习手册二
JavaScript 学习手册二:JS 数据类型第1关:JavaScript 数据类型介绍任务描述本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...
HFSS入门学习（二）
HFSS入门学习(二) 本文是在前一篇文章:HFSS入门学习(一)链接:https://blog.csdn.net/and_future/article/details/108930315 的基础之上 ...
wxpython应用程序对象与顶级窗口_wxPython学习笔记(二)
如何创建和使用一个应用程序对象? 任何wxPython应用程序都需要一个应用程序对象.这个应用程序对象必须是类wx.App或其定制的子类的一个实例.应用程序对象的主要目的是管理幕后的主事件循环. 父类 ...
语义分割：基于openCV和深度学习（二）
语义分割:基于openCV和深度学习(二) Semantic segmentation in images with OpenCV 开始吧-打开segment.py归档并插入以下代码: Semanti ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
Mybatis底层原理学习（二）：从源码角度分析一次查询操作过程
在阅读这篇文章之前,建议先阅读一下我之前写的两篇文章,对理解这篇文章很有帮助,特别是Mybatis新手: 写给mybatis小白的入门指南 mybatis底层原理学习(一):SqlSessionFac ...
[转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...

JqueryMobile学习之二---对话框

对话框

JqueryMobile学习之二---对话框相关推荐

最新文章

热门文章