mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇
2011-05-17 17:41
387 查看
为弹出框（Popup）添加“关闭（×）”按钮
如弹出框结构代码所示，关闭按钮标示“×”是放置在一div中的。使其具有关闭整个弹出框的功能，只要在创建该div时，为其附加具有close功能的单击事件即可。
new Element('div', {
'id': 'closeBtn',
html: '×',
events: {
click: function () {
this.close();
} .bind(this)
}
}).inject(this.popupTitle);
在这里需要着重说明的是mootools中的bind()函数。该函数作用于目标Function，使其内的this指针指向传递进的参数对象。如下所示示例代码：
1 <html xmlns="http://www.w3.org/1999/xhtml">
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() {
var boundFunction = originalFunction.bind($('sample'));
boundFunction();
}
</script>
</head>
<body>
<div id ="sample">这是一个div</div>
<input type ="button" id ="btnA" value ="bind test 1" onclick ="javascript:originalFunction()" />
<input type ="button" id ="btnB" value ="bind test 2" onclick ="javascript:pointDiv()" />
</body>
</html>
分别点击“bind test 1”和“bind test 2”，两次alert的结果如下图所示：
再回到创建“关闭div”的代码中，
click: function () {
this.close();
}.bind(this)
此处的bind(this)便每次把当前的“弹出框实例”绑定到click Function中的this指针上。
使弹出框（Popup）具有添加自定义按钮功能
从弹出框结构图可以看出，其主体主要包括Title、Content和Footer三部分。其中Footer部分，我们可以在其上放置一些功能按钮。而这些按钮的显示名称和作用由用户自定义。
用户对于按钮的描述是作为参数的一部分被传递到构造函数（constructor）initialize中去的。基本形式如下：
1 buttons: [{
text: '按钮名称',
clickHandler: function () {
//按钮功能定义
}
}]
在代码中，根据用户的定义来创建相应的按钮。
1 _injectButton: function (btnValue, btnClickEvent) {
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
return this;
}
让你的弹出框（Popup）可拖动
无须多说，可拖动（draggable）似乎是改善你的弹出框用户体验的必不可少的功能。mootools的扩展库为我们提供了专门用来处理对象拖动的类：Drag。其构造函数语法为：
1 new Drag(el[, options]);
el：拖动对象
options：可选参数，控制拖动细节
在这里需着重说明，也是代码中用到的optional参数为handler。其作用是设置拖动的处理者，即拖动的鼠标操纵对象，默认值为拖动对象本身。
在代码中，我们将Title部分作为拖动的控制位置。
1 new Drag(this.popupTable, { handle: this.popupTitle });
附示例代码：iSunPopup.rar
相关文章：
mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇
mootools系列：打造属于你自己的Popup（弹出框）——外观及应用篇
如弹出框结构代码所示，关闭按钮标示“×”是放置在一div中的。使其具有关闭整个弹出框的功能，只要在创建该div时，为其附加具有close功能的单击事件即可。
new Element('div', {
'id': 'closeBtn',
html: '×',
events: {
click: function () {
this.close();
} .bind(this)
}
}).inject(this.popupTitle);
在这里需要着重说明的是mootools中的bind()函数。该函数作用于目标Function，使其内的this指针指向传递进的参数对象。如下所示示例代码：
1 <html xmlns="http://www.w3.org/1999/xhtml">
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() {
var boundFunction = originalFunction.bind($('sample'));
boundFunction();
}
</script>
</head>
<body>
<div id ="sample">这是一个div</div>
<input type ="button" id ="btnA" value ="bind test 1" onclick ="javascript:originalFunction()" />
<input type ="button" id ="btnB" value ="bind test 2" onclick ="javascript:pointDiv()" />
</body>
</html>
分别点击“bind test 1”和“bind test 2”，两次alert的结果如下图所示：
再回到创建“关闭div”的代码中，
click: function () {
this.close();
}.bind(this)
此处的bind(this)便每次把当前的“弹出框实例”绑定到click Function中的this指针上。
使弹出框（Popup）具有添加自定义按钮功能
从弹出框结构图可以看出，其主体主要包括Title、Content和Footer三部分。其中Footer部分，我们可以在其上放置一些功能按钮。而这些按钮的显示名称和作用由用户自定义。
用户对于按钮的描述是作为参数的一部分被传递到构造函数（constructor）initialize中去的。基本形式如下：
1 buttons: [{
text: '按钮名称',
clickHandler: function () {
//按钮功能定义
}
}]
在代码中，根据用户的定义来创建相应的按钮。
1 _injectButton: function (btnValue, btnClickEvent) {
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
return this;
}
让你的弹出框（Popup）可拖动
无须多说，可拖动（draggable）似乎是改善你的弹出框用户体验的必不可少的功能。mootools的扩展库为我们提供了专门用来处理对象拖动的类：Drag。其构造函数语法为：
1 new Drag(el[, options]);
el：拖动对象
options：可选参数，控制拖动细节
在这里需着重说明，也是代码中用到的optional参数为handler。其作用是设置拖动的处理者，即拖动的鼠标操纵对象，默认值为拖动对象本身。
在代码中，我们将Title部分作为拖动的控制位置。
1 new Drag(this.popupTable, { handle: this.popupTitle });
附示例代码：iSunPopup.rar
相关文章：
mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇
mootools系列：打造属于你自己的Popup（弹出框）——外观及应用篇
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- mootools系列：打造属于你自己的Popup（弹出框）——外观及应用篇
- mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇
- JS组件系列——自己动手扩展BootstrapTable的treegrid功能
- EXTJS学习系列提高篇:第二十一篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--grid扩展行篇
- ext2.2打造全新功能grid系列--grid扩展篇
- JS组件系列——自己动手扩展BootstrapTable的 冻结列 功能：彻底解决高度问题
- 玩转Google开源C++单元测试框架Google Test系列(gtest)之八 - 打造自己的单元测试框架
- Linux下功能强大的防DDOS攻击SHELL脚本 可打造自己的DDOS防火墙
- ios开发学习-弹出视图（Popup View） 效果源码分享--系列教程1
- 【安卓自定义控件系列】自绘控件打造界面超炫功能超强的圆形进度条
- 详解运维监控利器Nagios 系列（五）-利用插件扩展Nagios的监控功能
- asp.net2.0：扩展ImageButton控件定制自己需要的功能
- ext2.2打造全新功能grid系列--确定删除篇
- EXTJS学习系列提高篇:第二十篇(转载)作者殷良胜,ext2.2打造全新功能grid系列--批量删除篇
- 打造自己的专业图像工具－Visual C++ 2005图像编程系列【二】
- 打造自己的专业图像工具－Visual C++ 2005图像编程系列【五】（上）
- 打造自己的专业图像工具－Visual C++ 2005图像编程系列【二】
- 打造自己的专业图像工具－Visual C++ 2005图像编程系列【四】
- [原创]ExtAspNet新春贺岁版 - 文件上传控件、复选框列表控件、完善布局管理、表格的行扩展列、完整的100多个中文示例、30多处BUG修正与功能增强、《ExtAspNet秘密花园》系列文章
- iOS开发系列--打造自己的“美图秀秀”