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" >
10               < h3  id  ="title" >
11                   < div  id  ="closeBtn" > × </ div >
12                   < div > Title </ div >
13               </ h3 >
14               < div  id  ="content"  style  ="width:280px; height :150px" > Msg Box </ div >
15               < div  id  ="footer" > Footer </ div >
16           </ td >
17           < td  id  ="middleRight" ></ td >
18       </ tr >
19       < tr >
20          < td  id  ="bottomLeft" ></ td >  
21          < td  id  ="bottomCenter" ></ td >
22          < td  id  ="bottomRight" ></ td >
23       </ tr >
24  </ table >

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

     mootools中class的构造机理

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

1  var myClass = new Class({
2     … …
3     initialize:function([para[, para[, …]]]){
4         … …
5     },
6     … …
7 });

     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工具类中的方法，已被当前类实现
10                                                      //用传递来的option为options对象中的相应变量赋值
11         … …
12     },
13     … …
14 });

 

     附示例代码：iSunPopup.rar

 

     相关文章：

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

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

转载于:https://www.cnblogs.com/isun/archive/2011/05/17/2048296.html