0

我有一个小控制台，在我的网站上显示某些操作的输出，需要另一个控制台来显示不同类型的输出，这让我想在 Kendo UI TabStrip 中结合两个控制台，问题是显示的信息控制台上的 AJAX 没有收到，所以当我像以前一样开始插入 HTML 元素时，选项卡没有更新。

这就是我初始化选项卡的方式：

    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects:'fadeIn'
            }
        }
    });

这是我的 HTML 的外观：

<div id="tabConsole">
      <ul>
           <li class="k-state-active">Salida</li>
           <li id="notificacionTab">Notificaciones</li>
      </ul>
      <div id="userConsole"></div>
      <div id="notificationConsole"></div>
</div>

这就是我尝试更新它的方式：

function appendToConsole(content, type, optional) {
//code to append to console
    var actualDate = new Date();
    var prevContent = $('#userConsole').html();
    if (typeof prevContent === 'undefined') {
        prevContent = '';
    }
    var strType = '';
    var iconType = '';
    var moreOutput = '';
    if (type == 1) {
        strType = 'infoConsole';
        iconType = 'infoIcon.png';
    } else if (type == 2) {
        strType = 'warningConsole';
        iconType = 'warningIcon.png';
        moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">';
    } else if (type == 3) {
        strType = 'errorConsole';
        iconType = 'errorIcon.png';
    }
    var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">';
    var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>';
    var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>';
    $('#userConsole').html(consoleOutput.toString());
    var height = $('#userConsole')[0].scrollHeight;
    $('#userConsole').scrollTop(height);
//my try to update the tab
    var tabStrip = $('#tabConsole'),
        selectedIndex = tabStrip.data('kendoTabStrip').select().index(),
        clone = original.clone(true);
    clone.children('ul')
    .children('li')
    .eq(selectedIndex)
    .addClass('k-state-active')
    .end();
    tabStrip.replaceWith(clone);
    $('#tabConsole').kendoTabStrip({
        animation: {
            open: {
                effects: 'fadeIn'
            }
        }
    });
}

如何更新 TabStrip 内的 DIV 内容？

编辑

似乎 Kendo UI 将代表选项卡的 DIV 的 id 重命名为 tabConsole-1 和 tabConsole-2，解释了为什么更新不起作用，仍然有很多奇怪的行为，我必须为每个 DIV 指定高度，所以溢出属性会起作用，当设置为绝对位置时，具有 id viewDetails和类moreConsole的图像也会在代表选项卡的 DIV 之外呈现，但是如果我将位置属性更改为相对，图像会留在 DIV 内但不显示像我想要的那样在 DIV 的末尾，但相对于它们之前的 DIV 的大小。

我真的很困惑如何设置样式以便正确显示内容。

4

1 回答 1

1

tabStrip可以使用以下方法向 a 添加内容：

$(tabConsole.contentElement(idx)).append(newContent)

在哪里：

  • idx是标签索引，
  • newContent是您要添加到现有内容的内容，并且
  • tabConsole是设置为 的变量$("#...").kendoTabStrip(...).data("kendoTabStrip");。

您不需要创建新的 tabStrip（此外，您不应该重新创建 KendoUI 元素，因为这是一项非常昂贵的操作）。

关于使用相同的多个标签id......你不应该使用它，class而是使用它。ids 应该是唯一的。

我仍在尝试了解您的样式问题。

于 2013-04-09T20:45:39.600 回答