jQuery Mobile弹出窗、弹出层知识汇总


Posted in Javascript onJanuary 05, 2016

先创建一个窗体

<div data-role="popup" id="popupView" class="ui-content" data-overlay-theme="b" data-position-to="window" data-dismissible="false">
<a href='javascript:void(0)' data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

<div>弹出窗内容<div>
</div>

1)点击后弹出

<a href="#popupView" data-rel="popup" data-transition="flip" class="ui-btn ui-corner-all">按钮</a>

2)页面加载后弹出

//页面延时加载<script>
setTimeout(function () {
$("#popupView").popup('open');
}, 1000);//1秒</script>

关键字说明:

data-overlay-theme: 背景色透明灰 data-position-to: 弹窗在窗口居中显示 data-dismissible: 是否允许单击窗口外任一位置关闭窗口(默认true为允许) data-transition: 弹出方式

下面通过代码实例详解jquery mobile 弹出层使用

引入文件

<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>

弹出层基础

创建一个弹出层,要在div标签中添加一个 data-role="popup" 属性,然后在添加一个a标签,并在a标签href属性中设置弹出div层的id,在a标签中添加属性

data-rel="popup"
To create a popup, add the data-role="popup" attribute to a div with the popup contents. Then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. A popup div has to be nested inside the same page as the link.
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Basic Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>

简单实例

<!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">
<a href="#popupBasic" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">点击我弹出层</a>
<div data-role="popup" id="popupBasic">
<p>弹出层测试</p>
</div>
</div> 
</body>
</html>

工具提示可以通过添加一个主题创建样本基本通过ui-content弹出并添加填充

A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class. 
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>

提示信息实例

<!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">
<p>A paragraph with a tooltip. <a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
</div>
</div> 
</body>
</html>

弹出图片

<!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">
<a href="#popupParis" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/paris.jpg" alt="Paris, France" style="width:30%"></a>
<a href="#popupSydney" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/sydney.jpg" alt="Sydney, Australia" style="width:30%"></a>
<a href="#popupNYC" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/newyork.jpg" alt="New York, USA" style="width:30%"></a>
<div data-role="popup" id="popupParis" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/paris.jpg" style="max-height:512px;" alt="Paris, France">
</div>
<div data-role="popup" id="popupSydney" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/sydney.jpg" style="max-height:512px;" alt="Sydney, Australia">
</div>
<div data-role="popup" id="popupNYC" data-overlay-theme="b" data-theme="b" data-corners="false">
<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img class="popphoto" src="http://demos.jquerymobile.com/1.4.3/_assets/img/newyork.jpg" style="max-height:512px;" alt="New York, USA">
</div>
</div> 
</body>
</html>
Javascript 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
Apr 28 Javascript
js中for in的用法示例解析
Dec 25 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 #Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 #Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 #Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 #Javascript
jQuery实现二级下拉菜单效果
Jan 05 #Javascript
基于JavaScript实现简单的随机抽奖小程序
Jan 05 #Javascript
jquery中ajax处理跨域的三大方式
Jan 05 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
基于Laravel-admin 后台的自定义页面用法详解
2019/09/30 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
JavaScript实现答题评分功能页面
2020/06/24 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python中的urllib模块使用详解
2015/07/07 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
python requests更换代理适用于IP频率限制的方法
2019/08/21 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
python和php哪个更适合写爬虫
2020/06/22 Python
python3 中使用urllib问题以及urllib详解
2020/08/03 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
办理居住证介绍信
2014/01/15 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
奥运会口号
2014/06/13 职场文书
付款承诺函范文
2015/01/21 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL