利用JavaScrpt 對 AjaxControlToolkit 之 TabContainer 做頁籤收展

之前開發一支資料登錄系統，為了方便使用者依收到資訊階段順序來鍵錄資料，因此將各階段的欄位利用 TabContainer 元件予以群組，使用者點按頁籤就可以切換到各階段的登打畫面。

經使用者試用後，使用者要求在列印時可不可以不用分頁籤一頁一頁印，而是可以展開頁籤，一次列印所有資料。

由於個人學藝不精，不知 TabContainer 是否有提供控制籤頁收展的功能，所以就用 JavaScript  寫一個前端的控制收/展功能。

說明：
TabContainer 在輸出到 Browser 時，會自己生成一個 DIV 並用「ajax__tab_header」這一個 class 做為頁籤的容器，及對應頁籤生各個裝載欄位的DIV，並用「ajax__tab_panel」這個 class

JavaScript 就是利用上面提到的「ajax__tab_header」及「ajax__tab_panel」來對頁面做隱藏或顯示，以達到收/展的要求：

<script type="text/javascript">
        function getElementsByClassName(className, parentElement){
                      var elems = document.body.getElementsByTagName("*");
                      var result=[];
                      for (i=0; j=elems[i]; i++){
                            if ((" "+j.className+" ").indexOf(" "+className+" ")!=-1){
                                    result.push(j);
                            }
                       }
                      return result;
          }
                       
         function setTab(tag)
                        {
                            //debugger
                            var hTab=getElementsByClassName("ajax__tab_header");
                            var tTab=getElementsByClassName("ajax__tab_panel");
                            if(tag==0)
                            {
                                for(i=0;i<hTab.length;i++)
                                {
                                    hTab[i].style.display="none";
                                }
                                for(i=0;i<tTab.length;i++)
                                {
                                    if(tTab[i].className=="ajax__tab_panel") {
                                      if(tTab[i].style.visibility!="visible")
                                         tTab[i].style.visibility="";

                                      tTab[i].style.display="block";
                                    }
                                }
                                document.getElementById("Button1").style.display="none";
                                document.getElementById("Button2").style.display="inline";
                                                                   
                            } else {
                                for(i=0;i<tTab.length;i++)
                                {
                                    if(tTab[i].className=="ajax__tab_panel") {
                                       if(tTab[i].style.visibility!="visible") {
                                        tTab[i].style.display="none";
                                        tTab[i].style.visibility="hidden";
                                      }
                                    }
                                }

                                for(i=0;i<hTab.length;i++)
                                {
                                    hTab[i].style.display="block";
                                }
                               
                                document.getElementById("Button2").style.display="none";
                                document.getElementById("Button1").style.display="inline";
                            }
                        }
                    </script>

<input id="Button1" type="button" value="關閉頁籤" onclick="setTab(0);" style="display:inline"/>
<input id="Button2" type="button" value="啟用頁籤"  onclick="setTab(1);" style="display:none" />

由於控制收/展是在 Browser 端，所以原來後端的處理程式都不用修改，只要在 .ASPX 網頁適當位置插入上列程式碼即可!