popmenu2.01發布和JavaScript代碼的封裝

popmenu2.01的效果示範如下：

http://www.oceanstudio.net/oceanstudy/learn/js/popmenu2.01/example.htm

popmenu2.01的功能並不太強大，但是封裝的結構非常好。一般而言，封裝可以採用htc，也可以直接用js。怎麼樣來直接用js呢？在js裡面實際上也有對象的概念。function有一種特殊的用法。就是相當於C#的class，可以定義一個類。比如popmenu中是這樣定義的。

function popMenu(menuName,called,menuItem) {

           this.menuName = menuName; //菜單名

           this.called = called;  //呼叫函數

           this.menu = null;   //菜單的指標

           this.menuItem = new Array(); //功能表項目

           if (menuItem != null)

                      this.menuItem = menuItem;

                     this.parentObj = null;   //所依賴的對象

                    //樣式屬性  

                     this.backgroundColor = "#f1f1f1";

             ..................

}

在使用的時候怎麼用呢？直接new就可以了。

var pop = new popMenu(...);

這樣是不是很像一個類呢？

那麼這個類的方法怎麼寫呢？這個需要用到prototype屬性，比如要增加一個setItem方法，如下：

//設定功能表項目

popMenu.prototype.setItem = function (menuItem) {

       if (menuItem != null)

                this.menuItem = menuItem;

 

               var html = "";

               for (var i = 0;i<this.menuItem.length;i++) {

                html += '<div onclick="' + this.menuName + '.doClick(this)" onmouseover="' + this.menuName + '.doMouseOver(this)"                      onmouseout="' + this.menuName + '.doMouseOut(this)" style="border:1px solid                             '+this.backgroundColor+';height:'+this.height+';padding:3px">';

                html += this.menuItem[i] + "</div>";

        }

        this.menu.innerHTML = html;

}

調用的時候就直接：

var pop = new popMenu(...);

pop.setItem(...);

嘿嘿，大家看看這個例子就可以知道裡面的奧妙。這個popmenu寫了應該有2年多時間了。以前在dev-club公布過popmenu1.0的源碼。但是1.0中有一個顯著bug導致實用性不太好。這次公布的時popmenu2.01源碼。

還有更多精彩可以到

http://sps.oceanstudio.net

下載