Javascript標簽：通話事件onclick

Question

我有一些代碼需要更改。 它是別人造的，不是很整齊...

有一個javascript tabcontrol，包含4個標簽，其中包含gridviews。 所有4個gridview都是在頁面加載期間構建的，但是我希望它們在激活選項卡時加載（因為可以觀看側面，而無需查看特定的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選項卡和JQuery AJAX加載網格

Answer 2

如果需要JS解決方案，則必須使用JS代碼自己構建gridview表。如果希望服務器完成工作，則需要UpdatePanel並使用客戶端_doPostBack方法。 如果您喜歡這種方法，則可以將Ajax控件工具包選項卡容器配置為每當選項卡發生更改時都回發到服務器，您可以使用更新面板包裝此控件，並且看起來一切都在用JS代碼完成。 另外，您也可以使用綁定網格視圖並返回HTML的Web服務...尚未嘗試過，但是已經看過了。

順便說一句，如果您讓我知道您喜歡哪種選擇，我可以進行相應的更新。

Answer 3

現在，我得到了JQuery和CSS制成的tabcontrol。 此時，所有4個Gridview都綁定在Page_Load上，但是，由於在Gridview后面運行te proc會花費一些時間，因此需要幾秒鍾。 因此，我想在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;
    });
});