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 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
connect中间件session、cookie的使用方法分享
Jun 17 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
js表头排序实现方法
Jan 16 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
JavaScript之cookie技术详解
Nov 18 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
优化Vue中date format的性能详解
Jan 13 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版
2012/04/20 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php数组中删除元素之重新索引的方法
2014/09/16 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
jquery创建div 实现代码
2009/04/27 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
python2.7到3.x迁移指南
2018/02/01 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
百思买美国官网:Best Buy
2016/07/28 全球购物
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
自我鉴定思想方面
2013/10/07 职场文书
自我鉴定200字
2013/10/28 职场文书
自荐信怎么写好
2013/11/11 职场文书
协议书模板
2014/04/23 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年工程部工作总结
2014/11/25 职场文书
横店影视城导游词
2015/02/06 职场文书
趣味运动会标语口号
2015/12/26 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python