单击按钮时如何将单独的 kendo window 内容加载到 html

Question

我正在尝试通过单击按钮将 kendo 标签条从单独的 html 加载到 kendo window 中。我已经能够获取按钮，单击时，将内容从单独的文件加载到 window 中，但我没有像我应该的那样获取选项卡，而是加载了所有内容。让选项卡工作的唯一方法是，如果我将所有代码都放在一个 index.html 中，但我需要将它们分开。这几天一直是个问题，我似乎找不到解决方案。请帮忙。

在我的 index.html 里面，我有：

<button class="submit-button" data-toggle="modal" data-target="modal" id="open-button" type="submit">Create New</button>

<div id="window"></div>

这是我的 modal.html：

<div class="tab k-content" id="tabstrip-left">
  <ul>
    <li class="k-state-active">General Details</li>
    <li>Coverage Details</li>
    <li>Header &amp; Video</li>
    <li>CTA Buttons</li>
    <li>Savings Grid</li>
    <li>Footer</li>
  </ul>
  <div class="container-fluid">General Content</div>
  <div class="container-fluid">Coverage Content</div>
  <div class="container-fluid">Header & Video Content</div>
  <div class="container-fluid">CTA Content</div>
  <div class="container-fluid">Savings Content</div>
  <div class="container-fluid">Footer Content</div>
  <fieldset class="form-group">
    <ul class="pager wizard">
        <li class="save button">Save</li> 
        <li><button class="close-button">Close</button></li>
        <li class="back button">Back</li> 
        <li class="next button">Next</li>
        <li class="finish button">Finish</li>
    </ul>
  </fieldset>
</div>

和我的script.js

$(document).ready(function() {

$("#window").load("create.html");

//populate grid with internal data
var grid = $("#grid").kendoGrid({
            scrollable: true,
            dataSource: clients
        });

//variables
var myWindow = $("#window"),
    openButton = $("#open-button"),
    tabstripLeft = $("#tabstrip-left");
    closeButton = $(".close-button");

//'create new' opens up modal
openButton.click(function() {
    myWindow.data("kendoWindow")
    .center()
    .open();
});

//modal window settings
myWindow.kendoWindow({
    width: "900",
    title: "Website Content",
    visible: false,
    modal: true,
    actions: ["Close"],
}).data("kendoWindow");

//remove keyboard navigation
myWindow.removeAttr("tabindex");

//modal tabs 
tabstripLeft.kendoTabStrip({
    tabPosition: "left",
    animation: false,
    navigatable: true
});

//close modal button inside window
closeButton.click(function() {
    myWindow.data("kendoWindow").close();
    });
});

Answer 1

当您尝试初始化小部件时，标签条 html 尚未呈现。尝试在 create.html html 中启动标签栏小部件。

单击按钮时如何将单独的 kendo window 内容加载到 html

how to load separate kendo window content into html when button is clicked

html

jquery

kendo-ui

kendo-window

kendo-tabstrip