mootools系列：打造属于你自己的Popup（弹出框）——基本结构篇

      你是否早已厌倦了alert、confirm、window.open等等呆板丑陋的web弹出形式？如果你也和我一样对此耿耿于怀，那就跟随我一起来打造专属于我们自己的Popup吧！

      自定义弹出框目前在网络上的应用越来越广泛，各种版本的实现代码也是铺天盖地。其基本思路无外乎是在html Dom中创建一弹出框结构，并将其置于其他Dom对象之上。

      本文应用mootools框架，将从功能、外观和应用三个层面阐述弹出框实现及使用的基本脉络。大家可以在此基础之上对其进行改造、拓展，烙上专属你自己的个性烙印。

      先看一下最终效果图。

      弹出框构造结构

      我将弹出框构造为一9格table。四周格为装饰边框，中间的一格为主体，包括Title、Content和Footer三部分。

     其对应的代码结构为：

 1 <table class ="popupTable">

 2     <tr>

 3        <td id ="topLeft"></td> 

 4        <td id ="topCenter"></td>

 5        <td id ="topRight"></td>

 6     </tr>

 7     <tr>

 8         <td id ="middleLeft"></td>

 9         <td id ="middleCenter">

             <h3 id ="title">

                 <div id ="closeBtn">×</div>

                 <div>Title</div>

             </h3>

             <div id ="content" style ="width:280px; height :150px">Msg Box</div>

             <div id ="footer">Footer</div>

         </td>

         <td id ="middleRight"></td>

     </tr>

     <tr>

        <td id ="bottomLeft"></td> 

        <td id ="bottomCenter"></td>

        <td id ="bottomRight"></td>

     </tr>

 </table>

     代码中编程实现弹出框，即为依次创建上述结构的过程，在此就不一一罗列了，感兴趣的朋友可以下载示例代码。

     mootools中class的构造机理

     在mootools框架中，类class的结构如下所示：

 var myClass = new Class({

     … …

     initialize:function([para[, para[, …]]]){

         … …

     },

     … …

 });

     initialize为mootools中类的构造函数（constructor），是代码执行的入口。

     mootools中名为Options的工具类为我们提供了很好的组织类一级变量的机制。在这种机制下，我们将类一级变量定义在options对象中，然后通过在类中实现（implement）此工具类，可以便捷的设置定义在options对象中的变量。以下代码示意了添加options对象后的类结构：

 1 var myClass = new Class({

 2     … …

 3     implements:Options,

 4     options:{

 5         width:220px,

 6         height:140px

 7     },

 8     initialize:function(option){

 9         this.setOptions(option); //setOptions为Options工具类中的方法，已被当前类实现

                
                                    
//用传递来的option为options对象中的相应变量赋值

         … …

     },

     … …

 });

 

     附示例代码：iSunPopup.rar

 

     相关文章：

     mootools系列：打造属于你自己的Popup（弹出框）——扩展功能篇

     mootools系列：打造属于你自己的Popup（弹出框）——外观及应用篇