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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
Nov 08 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
如何提高javascript加载速度
Dec 26 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
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 ADODB使用方法集锦
2008/03/25 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python2.x与Python3.x的区别
2016/01/14 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python高级property属性用法实例分析
2019/11/19 Python
比驿:全球酒店比价网
2018/06/20 全球购物
资料员岗位职责
2013/11/17 职场文书
外企求职信范文分享
2013/12/31 职场文书
标准化管理实施方案
2014/02/25 职场文书
高中教师评语大全
2014/04/25 职场文书
旅游活动总结
2014/08/27 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
银行给客户的感谢信
2015/01/23 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书