标签溢出时可滚动的Kendo Tabstrip

时间:2014-06-17 16:05:53

标签: kendo-ui scrollable kendo-tabstrip

当有标签溢出时,有没有人能够让Kendo标签滚动?

我目前可以使用制表符控件在底部显示滚动条,但这不是所需的行为,因为它也会移动内容。

我们只是希望能够在标签溢出时在标签之间滚动。

有没有人完成这个?如果是这样,你是怎么做到的?

2 个答案:

答案 0 :(得分:6)

在这里找到答案:http://jsfiddle.net/dimodi/6Z62d/

HTML:

<p>Tabs become scrollable</p>

<div id="tabStrip1">
    <ul>
        <li class="k-state-active">tab item 1</li>
        <li>tab item 2</li>
        <li>tab item 3</li>
        <li>tab item 4</li>
        <li>tab item 5</li>
        <li>tab item 2</li>
        <li>tab item 3</li>
        <li>tab item 4</li>
        <li>tab item 5</li>
    </ul>
    <div>content 1</div>
    <div>content 2</div>
    <div>content 3</div>
    <div>content 4</div>
    <div>content 5</div>
</div>

使用Javascript:

#tabStrip1 > .k-tabstrip-items
{
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

这对我有用

答案 1 :(得分:0)

查看可滚动标签上的文档:

Kendo UI Scrollable Tabs