mootools系列:打造属于你自己的Popup(弹出框)——扩展功能篇
为弹出框(Popup)添加“关闭(×)”按钮
如弹出框结构代码所示,关闭按钮标示“×”是放置在一div中的。使其具有关闭整个弹出框的功能,只要在创建该div时,为其附加具有close功能的单击事件即可。
2 'id': 'closeBtn',
3 html: '×',
4 events: {
5 click: function () {
6 this.close();
7 } .bind(this)
8 }
9 }).inject(this.popupTitle);
在这里需要着重说明的是mootools中的bind()函数。该函数作用于目标Function,使其内的this指针指向传递进的参数对象。如下所示示例代码:
2 <head>
3 <title>bind test</title>
4 <script type ="text/javascript" src ="js/mootools.js"></script>
5 <script language ="javascript" type ="text/javascript">
6 function originalFunction() {
7 alert(this);
8 }
9 function pointDiv() {
10 var boundFunction = originalFunction.bind($('sample'));
11 boundFunction();
12 }
13 </script>
14 </head>
15 <body>
16 <div id ="sample">这是一个div</div>
17 <input type ="button" id ="btnA" value ="bind test 1" onclick ="javascript:originalFunction()" />
18 <input type ="button" id ="btnB" value ="bind test 2" onclick ="javascript:pointDiv()" />
19 </body>
20 </html>
分别点击“bind test 1”和“bind test 2”,两次alert的结果如下图所示:
再回到创建“关闭div”的代码中,
2 this.close();
3 }.bind(this)
此处的bind(this)便每次把当前的“弹出框实例”绑定到click Function中的this指针上。
使弹出框(Popup)具有添加自定义按钮功能
从弹出框结构图可以看出,其主体主要包括Title、Content和Footer三部分。其中Footer部分,我们可以在其上放置一些功能按钮。而这些按钮的显示名称和作用由用户自定义。
用户对于按钮的描述是作为参数的一部分被传递到构造函数(constructor)initialize中去的。基本形式如下:
2 text: '按钮名称',
3 clickHandler: function () {
4 //按钮功能定义
5 }
6 }]
在代码中,根据用户的定义来创建相应的按钮。
2 new Element('input', {
3 type: 'button',
4 value: btnValue,
5 events: {
6 click: (btnClickEvent || this.close).bind(this)
7 }
8 }).inject(this.Footer);
9
10 return this;
11 }
让你的弹出框(Popup)可拖动
无须多说,可拖动(draggable)似乎是改善你的弹出框用户体验的必不可少的功能。mootools的扩展库为我们提供了专门用来处理对象拖动的类:Drag。其构造函数语法为:
el:拖动对象
options:可选参数,控制拖动细节
在这里需着重说明,也是代码中用到的optional参数为handler。其作用是设置拖动的处理者,即拖动的鼠标操纵对象,默认值为拖动对象本身。
在代码中,我们将Title部分作为拖动的控制位置。
附示例代码:iSunPopup.rar
相关文章:
mootools系列:打造属于你自己的Popup(弹出框)——基本结构篇
mootools系列:打造属于你自己的Popup(弹出框)——外观及应用篇
转载于:https://www.cnblogs.com/isun/archive/2011/05/17/2049040.html
mootools系列:打造属于你自己的Popup(弹出框)——扩展功能篇相关推荐
- popup弹出html页面,Popup弹出框绑定添加数据事件(步奏详解)
这次给大家带来Popup弹出框绑定添加数据事件(步奏详解),Popup弹出框绑定添加数据事件的注意事项有哪些,下面就是实战案例,一起来看一下. 逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按 ...
- OpenLayers基础教程——popup弹出框
1.前言 在OpenLayers中,一般使用ol.Overlay实现popup弹出框,弹出框一般用于显示地图上兴趣点的一些属性信息,如下图所示.下面开始介绍实现方法. 2.准备测试数据 在SqlSer ...
- WPF---->自定义控件添加Popup弹出框
自定义控件,当点击自定义控件时弹出提示框 文章目录 重要属性 普通使用 自定义控件使用Popup 参考文档 重要属性 属性 名称 解释 使用方法 PlacementTarget 安置目标 Popup附 ...
- 简单实现Popup弹出框添加数据
逻辑 窗口P1中显示一组数据,并提供一个添加按钮 点击按钮,弹出新的浏览器窗口P2,在其中添加一条数据并提交后,窗口P2自动关闭 新添加数据动态添加到窗口P1中并被选中 所需知识:JS BOM 窗口对 ...
- mootools系列:打造属于你自己的Popup(弹出框)——外观及应用篇
半透明化弹出框(Popup)边框 半透明化的边框很眩吧.其实实现起来很简单,只需设置一css属性:opacity.opacity指"不透明度",取值在0和1之间,0表示全透明,1表 ...
- JQUERY打造隐藏在左侧的弹性弹出菜单
代码简介: 隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JAvaScript缓冲动画的典型教程.本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内 ...
- FM实现F4帮助系列三:弹出框多筛选…
FM实现F4帮助系列三:弹出框多筛选条件的搜索帮助(根据搜索帮助筛选字段) 函数:F4IF_GET_SHLP_DESCR F4IF_START_VALUE_REQUEST 效果图: 本例子代码: 找 ...
- 小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题
小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢,在Bootstrap模态框内部多次点击才能触发的问题 参考文章: (1)小解系列-解决WebUploader在谷歌浏览器下弹出框打开慢, ...
- uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别!
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
最新文章
- 信纳比(SINAD)介绍
- Exim4的简易部署
- 双层for循环时间复杂度_2 常见的时间复杂度实例
- [九度][何海涛] 跳台阶
- HTML试题及答案(总结)
- Visual Studio最常用、最高效的快捷键
- 架构师必读!以图文的方式解锁 HTTPS原理,10分钟还原HTTPS真像!
- android sdk无法启动不了,无法启动Android SDK管理器
- 跨平台 webapp 开发技术之 Hybrid App
- 模块d3d12.dll加载失败_语音控制模块
- 【优化求解】基于狼群算法WPA求解最优目标matlab代码
- Spring 整体结构
- 怎么批量查询银行卡号是哪个银行?
- Pyramidal Convolution Rethinking Convolutional Neural Networks for Visual Recognition
- WordPress XMLRPC安全漏洞
- ajax获取jsp数据,如何使用ajax调用从servlet到jsp获取arraylist数据
- StringBuffer的常用方法
- pomelo源码解析--新建项目(cli工具: pomelo)
- CentOS 6.8 时间同步
- 设计师必看的一些资源网站[转]
热门文章
- 高级UI之Paint(滤镜,颜色通道,矩阵运算)
- 剑网三缘起不赚钱也要为玩家送福利!这就是为了老玩家的情怀吧
- Oracle 外连接和 (+)号的用法
- js 浏览器复制功能
- [c/c++] programming之路(7)、数据类型转换、偷钱小程序、进制转换
- 纯css3实现美化复选框和手风琴效果(详细)
- 向数据库中导入AWR数据
- ubuntu18.04安装QQ-for-Linux
- android 动态矩形条,android – 从相机中动态检测不同形状(圆形,方形和矩形)?
- ue4集合类型_3D游戏开发之UE4中的集合:TSet容器