【问题标题】:Load Kendo TabStrip with available content使用可用内容加载 Kendo TabStrip
【发布时间】:2015-09-02 10:40:07
【问题描述】:

我有三个标签,我想用页面上已经存在的部分内容填充这些标签:

<section class="rbs-section" id="rbi_S_12466479" name="world1">
<p>Hello World1</p>
</section>

<section class="rbs-section" id="rbi_S_12466477" name="world2">
<p>Hello World2</p>
</section>

<section class="rbs-section" id="rbi_S_12466478" name="world3">
<p>Hello World3</p>
</section>

我的标签条:

<div id="tabstrip">
                            <ul>
                                <li class="k-state-active">
                                    World1
                                </li>
                                <li>
                                    World2                                    </li>
                                <li>
                                    Wordl3
                                </li>
                            </ul>
                        </div>

Javascript:

$(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });

如何使用 Kendo TabStrip 代码在这些选项卡中使用我的自定义部分?请告诉我。

干杯。

【问题讨论】:

    标签: jquery dynamic kendo-ui kendo-tabstrip


    【解决方案1】:

    这是一个带有工作示例的道场。 Tab strip with sections.

    你会注意到我所做的只是用一个 div 包裹你 sections

    标签条希望在内容集合中看到 div 作为子元素,即内容。

    希望这能回答您的问题。如果您需要更多详细信息,请告诉我。

    更新

    我更新了道场。这不是最优雅的方式,但它可以在你不改变你的 DOM 的情况下工作。

    updated dojo

    更新 2 updated dojo 2

    【讨论】:

    • 您的 dojo 并没有真正正常工作,因为它没有包装的 div。我的部分已经在页面上可用。我没有自己创建这些部分的选项。我可以移动这些部分,我想将它们移动到无序列表下的 div 中。关于如何做到这一点的任何建议?
    • 我确实理解包含在 div 中的部分需要放在无序列表的下方,但是因为它们已经在其他地方可用,所以我想将它们用作选项卡的内容。更新了你的道场以解释 DOM 的外观以及我想要它的方式:dojo.telerik.com/iwEki/2
    • 您希望此内容显示在选项卡下还是仅显示在 DOM 中的位置?
    • 用新的道场更新了答案。希望这对你有用dojo.telerik.com/iwEki/5
    • 它部分工作,但我之前有类似的工作。我尝试进行这项工作的主要原因是因为某些动画 div 由于某种原因没有被克隆。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多