Javascript選項卡：致電事件onclick

Question

我得到了一些我需要更改的代碼。它是由別人建立，並不是很整齊...

有一個javascript tabcontrol，包含4個選項卡，其中包含gridviews。 所有4個gridview都是在頁面加載過程中生成的，但是我希望它們加載，當您激活選項卡時（因爲可以看到一側，而不需要特定的網格視圖）

所以，我的問題是：如何從javascript選項卡調用事件（加載gridview）？

如何突片產生：（生成的代碼，我知道，可怕的）

 
var obj = 0; 
var oid = 0; 
var otb = 0; 
var myTabs = new Array(); 
var myTabitems = new Array(); 
var myTabitem = new Array(); 
var myTabContent = new Array(); 
var myLists = new Array();
 

function showTabContent(tab) 
{ 
    tb = tab.obj; 
    id = tab.nr; 
    if (myTabs[tb].oid != -1) 
    { 
     myTabs[tb].myTabContent[myTabs[tb].oid].style.display = 'none'; 
     myTabs[tb].myTabitem[myTabs[tb].oid].className -= " active"; 
    } 
    myTabs[tb].myTabContent[id].style.display = 'block'; 
    myTabs[tb].myTabitem[id].className += " active"; 
    myTabs[tb].oid = id; 
}
 

function boTabs() 
{ 
    var myBlocks = new Array(); 
    myBlocks = document.getElementsByTagName("div"); 
    var stopit = myBlocks.length; 
    for (var g = 0; g < stopit; g++) 
    { 
     if (myBlocks[g].className == "tabs") 
     { 
      myTabs.push(myBlocks[g]); 
     } 
    } 
    var stopit2 = myTabs.length; 
    for (var i = 0; i < stopit2; i++) 
    { 
     myTabs[i].myLists = myTabs[i].getElementsByTagName("ul"); 
     if (myTabs[i].myLists[0].className == "tabs") 
     { 
      myTabs[i].myTabitems = myTabs[i].myLists[0].getElementsByTagName("li"); 
     } 
     var stopit3 = myTabs[i].myTabitems.length; 
     myTabs[i].obj = i; 
     myTabs[i].myTabitem = new Array(); 
     myTabs[i].myTabContent = new Array(); 
     for (var j = 0; j < stopit3; j++) 
     { 
      myTabs[i].myTabitem.push(myTabs[i].myTabitems[j]); 
      myTabs[i].myTabitem[j].nr = j; myTabs[i].myTabitem[j].obj = i; 
      myTabs[i].myTabitem[j].onclick = function() { showTabContent(this); }; 
     } 
     var myTabDivs = myTabs[i].getElementsByTagName("div"); 
     for (var j = 0; j < myTabDivs.length; j++) 
     { 
      if (myTabDivs[j].className == "tabcontent") 
      { 
       myTabs[i].myTabContent.push(myTabDivs[j]);
 

 } 
    } 
    myTabs[i].myTabitem[0].className += " active"; 
    myTabs[i].myTabContent[0].style.display = 'block'; 
    myTabs[i].oid = 0; 
    myTabDivs = null; 
} 
myBlocks = null; 

} 的onload = boTabs;

Answer 1

我將完全改變其使用JQuery Tabs和JQuery AJAX加載電網

Answer 2

如果你想要一個JS的解決方案，你必須建立自己使用JS代碼GridView的表...如果你希望服務器做這項工作，你需要一個UpdatePanel，並使用客戶端_doPostBack方法。如果你喜歡這種方法，Ajax Control Toolkit選項卡容器可以配置爲在選項卡發生變化時回發給服務器，你可以用更新面板來包裝這個控件，而且看起來好像所有事情都是用JS代碼完成的。另外，你也可以使用綁定GridView並返回HTML的Web服務......還沒有嘗試過，但看到它完成。

HTH，如果你讓我知道你喜歡什麼選項，我可以相應地更新。

Answer 3

我現在得到了jQuery和CSS製作的tabcontrol。 此時所有4個gridviews都綁定在Page_Load上，但是，由於花費時間在gridview後面運行te sproc，所以需要幾秒鐘的時間。因此，我想加載它們tabclick ......在UpdatePanel似乎是最好的辦法......

JQuery的：

$(document).ready(function() 
{ 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() 
    { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 
});