mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇
????? 為彈出框（Popup）添加“關(guān)閉（×）”按鈕
????? 如彈出框結(jié)構(gòu)代碼所示，關(guān)閉按鈕標(biāo)示“×”是放置在一div中的。使其具有關(guān)閉整個彈出框的功能，只要在創(chuàng)建該div時，為其附加具有close功能的單擊事件即可。
1?new?Element('div',?{2?????'id':?'closeBtn',
3?????html:?'×',
4?????events:?{
5?????????click:?function?()?{
6?????????????this.close();
7?????????}?.bind(this)
8?????}
9?}).inject(this.popupTitle);
????? 在這里需要著重說明的是mootools中的bind()函數(shù)。該函數(shù)作用于目標(biāo)Function，使其內(nèi)的this指針指向傳遞進(jìn)的參數(shù)對象。如下所示示例代碼：
?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()?{
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的結(jié)果如下圖所示：
?????再回到創(chuàng)建“關(guān)閉div”的代碼中，
1?click:?function?()?{2?????this.close();
3?}.bind(this)
?????此處的bind(this)便每次把當(dāng)前的“彈出框?qū)嵗苯壎ǖ絚lick Function中的this指針上。
????? 使彈出框（Popup）具有添加自定義按鈕功能
?????從彈出框結(jié)構(gòu)圖可以看出，其主體主要包括Title、Content和Footer三部分。其中Footer部分，我們可以在其上放置一些功能按鈕。而這些按鈕的顯示名稱和作用由用戶自定義。
?????用戶對于按鈕的描述是作為參數(shù)的一部分被傳遞到構(gòu)造函數(shù)（constructor）initialize中去的?；拘问饺缦?#xff1a;
1buttons:?[{2?????text:?'按鈕名稱',
3?????clickHandler:?function?()?{
4?????????//按鈕功能定義
5?????}
6?}]
?????在代碼中，根據(jù)用戶的定義來創(chuàng)建相應(yīng)的按鈕。
?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?
10?????return?this;
11?}
????? 讓你的彈出框（Popup）可拖動
????? 無須多說，可拖動（draggable）似乎是改善你的彈出框用戶體驗的必不可少的功能。mootools的擴展庫為我們提供了專門用來處理對象拖動的類：Drag。其構(gòu)造函數(shù)語法為：
1new?Drag(el[,?options]);el：拖動對象
options：可選參數(shù)，控制拖動細(xì)節(jié)
????? 在這里需著重說明，也是代碼中用到的optional參數(shù)為handler。其作用是設(shè)置拖動的處理者，即拖動的鼠標(biāo)操縱對象，默認(rèn)值為拖動對象本身。
????? 在代碼中，我們將Title部分作為拖動的控制位置。
1new?Drag(this.popupTable,?{?handle:?this.popupTitle?});?????附示例代碼：iSunPopup.rar
?
????? 相關(guān)文章：
?????mootools系列：打造屬于你自己的Popup（彈出框）——基本結(jié)構(gòu)篇
?????mootools系列：打造屬于你自己的Popup（彈出框）——外觀及應(yīng)用篇
轉(zhuǎn)載于:https://www.cnblogs.com/isun/archive/2011/05/17/2049040.html
總結(jié)
以上是生活随笔為你收集整理的mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 100%测试覆盖率真的有用吗？
- 下一篇： 解决Flex/Flash跨域访问出现的安