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 相关文章推荐
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
Vue组件中slot的用法
Jan 30 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
JS前端广告拦截实现原理解析
Feb 17 Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
TS 类型收窄教程示例详解
Sep 23 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
php+ajax实现文章自动保存的方法
2014/12/30 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
浅谈Node模块系统及其模式
2017/11/17 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python通过poll实现异步IO的方法
2015/06/04 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
消防标语大全
2014/06/07 职场文书
2015大学生求职信范文
2015/03/20 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL