Динамическое добавление файлов HTML в виде вкладок в Kendo TabStrip

Question

Я пытаюсь создать веб-часть, которая в основном является вкладкой Kendo.он имеет простой ul и связывает внешние html-файлы с каждым родственником, используя код javascript.пока работает нормальноно теперь я хочу иметь возможность вызывать функции для добавления или удаления любого файла, который я выбрал для моей вкладки, и пока он не работает.

Я искал и нашел некоторые функции для работы, но эта ближек тому, что я имел в виду.когда я использую кнопку «Добавить», вкладка создается, но контекстная ссылка не работает, и это просто пустая вкладка.

<------------------------ web-part ------------------------>
<div class="row">
        <input type='text' id='tabname' name='tabname'>
        <input type='text' id='tabLink' name='tabLink'>
        <input type="button" value="Add Tab" onclick="AddTab()" />
        <input type="button" value="Remove Tab" onclick="closeTab()" />
     </div>   
<div id="tabstrip">
                <ul id="tabStripUL">
                    <li class="k-state-active">tab1</li>
                    <li>tab2</li>
                    <li>tab3</li>
                </ul>

<------------------------ Javascript ------------------------>
$(document).ready(function () {
    InitLoadTabstrip();

});

function InitLoadTabstrip() {
    var ts = $("#tabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn" } },

        select: function(element){selecttab(element)},
        contentUrls: [

                    'Page1.html',
                    'Page2.html',
                    'Page3.html',                    

        ]
    }).data('kendoTabStrip');

}

function selecttab(element) {
    var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
    var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
    itemIdx = item.index();   
    $("#tabstrip").data("kendoTabStrip").select(itemIdx);                
}

function AddTab() {
    var title = jQuery("#tabname").val();
    var Address = jQuery("#tabLink").val();
    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    tabStrip.append({
        text: title,
        contentUrl: Address
    });
    tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}
function closeTab() {
    var tabStrip = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
    tabStrip.remove(tabStrip.select());
    tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}

Она должна получить имя и адрес и добавить эту вкладку ввкладку или удалите его на основе кнопки.Буду очень признателен, если кто-нибудь сможет помочь.

<---------------------------- Быстрое обновление ----------------------------->

Я пытался удалить кнопки и просто добавить один параметр в addTabфункция для добавления каждой страницы, которая вызывается.как-то так:

function addTab(tabName) {

    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
    if (tabName == "name1") {
        tabStrip.append({
            text: "title1",
            contentUrl: 'page1.html',
        });
    }
    else if (tabName == "name2") {
        tabStrip.append({
            text: "title2",
            contentUrl: 'page2.html',
        });
    }
    tabStrip.select((tabStrip.tabGroup.children("li").length - 1));
}

и назовите их так:

$(document).ready(function () {
    InitLoadTabstrip();

});

function InitLoadTabstrip() {
    var ts = $("#tabstrip").kendoTabStrip({
        animation: { open: { effects: "fadeIn" } },

        select: function(element){selecttab(element)},
        contentUrls: [

        ]
    }).data('kendoTabStrip');

    addTab("name1");
    addTab("name2");

}

сейчас проблема в том, когда я пытаюсь добавить более одной вкладки, одну за другой (например,код), tabstrip устанавливает оба элемента списка как активные, и это ломает tabstrip.Я думаю, что это, вероятно, из-за 'tabstrip.select', но я не совсем понимаю, что пошло не так.

Answer 1

Так что мне удалось исправить это самостоятельно, подумав, что это может помочь кому-то еще позже.проблема заключалась в том, что после добавления у меня было несколько элементов списка с классом «k-state-active», которые сломали мою вкладку.Я использовал jquery, чтобы вручную удалить активные классы, где бы они ни были, и добавить их в первый li.Кроме того, я использовал для создания новой переменной каждый раз, когда я вызывал addTab (), вместо того, чтобы работать с той же самой переменной, которая делала все это намного медленнее и не имела анимации и выбора.поэтому я сделал ts общедоступным для использования во всех функциях.итоговый код выглядит так:

<---------------HTML------------------>
<div id="tabstrip" style="width: 100%">
                <ul id="tabStripUL">

                </ul>
            </div>

<----------------Script--------------->
var ts;
$(document).ready(function () {
    InitLoadTabstrip();
});

function InitLoadTabstrip() {
    ts = $("#tabstrip").kendoTabStrip({
        animation: { open: { duration: 150, effects:"fadeIn" }
        },

        select: function(element){selecttab(element)},
        contentUrls: [

        ]
    }).data('kendoTabStrip');

    addTab("tab1");
    addTab("tab2");

}

//ts couldn't work on selecttab because of call limited size (don't really know what it is)
function selecttab(element) {
    var tabStrip1 = $('#tabstrip').kendoTabStrip().data("kendoTabStrip");
    var item = tabStrip1.element.find("li:contains("+$(element.item).text()+")"),
    itemIdx = item.index();   
    $("#tabstrip").data("kendoTabStrip").select(itemIdx);                
}

function addTab(tabSelect) {

    if (tabSelect == "tab1") {
        ts.append({
            text: "title1",
            contentUrl: 'page1.html',
        });
        //sets an id to each tab
        ts.tabGroup.children().last().attr("id", "tab1");
    }
    else if (tabSelect == "tab2") {
        ts.append({
            text: "title2",
            contentUrl: 'page2',
        });
        ts.tabGroup.children().last().attr("id", "tab2");
    }
    ts.select((ts.tabGroup.children("li").length - 1));

    $("#tabstrip li").find(".k-state-active").removeClass("k-state-active k-tab-on-top");
    $("#tabstrip li:first").addClass("k-state-active k-tab-on-top");
}

// ClearTS: clears all the tabs and contents
function clearTS() {
    $("#tabstrip li").remove();
    $("#tabstrip .k-content").remove();

Надеюсь, это поможет!