Вкладки Javascript: вызов события по клику

Question

У меня есть код, который мне нужно изменить. это построено другими, и не очень опрятно ...

Существует javascript tabcontrol, содержащий 4 вкладки, которые содержат виды сетки. Все 4 вида сетки создаются при загрузке страницы, но я хочу, чтобы они загружались при активации вкладок (так как можно смотреть сбоку, пока вам не нужны конкретные виды сетки для просмотра)

Итак, мой вопрос: как вызвать событие (которое загружает сетку) с вкладки javascript?

как генерируются вкладки: (сгенерированный код, я знаю, ужасно)

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();</p>

<p>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;
}</p>

<p>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]);</p>

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

} onload = boTabs;

Answer 1

Если вы хотите JS-решение, вам нужно создать таблицу gridview самостоятельно, используя код JS ... Если вы хотите, чтобы сервер выполнял свою работу, вам нужен UpdatePanel и используйте клиентский метод _doPostBack. Если вам нравится этот подход, контейнер вкладок Ajax Control Toolkit может быть настроен для отправки обратно на сервер при каждом изменении вкладки, что позволяет обернуть этот элемент управления панелью обновления, и похоже, что все делается с помощью кода JS. В качестве альтернативы, вы также можете использовать веб-сервис, который связывает вид сетки и возвращает HTML тоже ... еще не пробовал, но видел, что сделано.

HTH, если вы дадите мне знать, какой вариант вы предпочитаете, я мог бы обновить соответственно.

Answer 2

Теперь я получил tabcontrol, созданный JQuery и CSS. в этот момент все 4 вида сетки связаны с Page_Load, но, поскольку для запуска 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;
    });
});

Answer 3

Я бы изменил его полностью, чтобы использовать JQuery Tabs и JQuery AJAX для загрузки сеток