mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇
????? 為彈出框（Popup）添加“關閉（×）”按鈕
????? 如彈出框結構代碼所示，關閉按鈕標示“×”是放置在一div中的。使其具有關閉整個彈出框的功能，只要在創建該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()函數。該函數作用于目標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()?{
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”的代碼中，
1?click:?function?()?{2?????this.close();
3?}.bind(this)
?????此處的bind(this)便每次把當前的“彈出框實例”綁定到click Function中的this指針上。
????? 使彈出框（Popup）具有添加自定義按鈕功能
?????從彈出框結構圖可以看出，其主體主要包括Title、Content和Footer三部分。其中Footer部分，我們可以在其上放置一些功能按鈕。而這些按鈕的顯示名稱和作用由用戶自定義。
?????用戶對于按鈕的描述是作為參數的一部分被傳遞到構造函數（constructor）initialize中去的。基本形式如下：
1buttons:?[{2?????text:?'按鈕名稱',
3?????clickHandler:?function?()?{
4?????????//按鈕功能定義
5?????}
6?}]
?????在代碼中，根據用戶的定義來創建相應的按鈕。
?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。其構造函數語法為：
1new?Drag(el[,?options]);el：拖動對象
options：可選參數，控制拖動細節
????? 在這里需著重說明，也是代碼中用到的optional參數為handler。其作用是設置拖動的處理者，即拖動的鼠標操縱對象，默認值為拖動對象本身。
????? 在代碼中，我們將Title部分作為拖動的控制位置。
1new?Drag(this.popupTable,?{?handle:?this.popupTitle?});?????附示例代碼：iSunPopup.rar
?
????? 相關文章：
?????mootools系列：打造屬于你自己的Popup（彈出框）——基本結構篇
?????mootools系列：打造屬于你自己的Popup（彈出框）——外觀及應用篇
轉載于:https://www.cnblogs.com/isun/archive/2011/05/17/2049040.html
總結
以上是生活随笔為你收集整理的mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 100%测试覆盖率真的有用吗？
- 下一篇： 解决Flex/Flash跨域访问出现的安