Question

我可以用什么方法“打乱” JQuery UI Tabs Header 的 JQuery UI Tabs Header 吗? 请让我解释一下:我有一个标签,可能需要两个或两个以上的字才能使标题不言自明。例如:

“未开发的PDP”

我的问题是,在添加一连串标签时,我的空间快用光了。所以,不要把标签写成

PDP Undeveloped

我想把它显示为

    PDP
Undeveloped

如果做不到的话,是否有其他办法解决这一问题?

提前感谢。

布哈拉特

Answer 1

我建议使用标签。因为您只希望当您空闲时它们生效, 我建议使用媒体查询打开多行显示。

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc <br />tincidunt</a></li>
        <li><a href="#tabs-2">Proin <br />dolor</a></li>
        <li><a href="#tabs-3">Aenean <br />lacinia</a></li>
    </ul>
    <div id="tabs-1">Tab 1</div>
    <div id="tabs-2">Tab 2</div>
    <div id="tabs-3">Tab 3</div>
</div>

<style>
    br { display: none; }

    /* Replace 700px with whatever width you want the multi line display to start */
    @media screen and (max-width: 700px) {
        .ui-tabs li { height: 4em; }    
        br { display: inline; }
    }
</style>

<强力>实况示例 : http://jsfiddle.net/vvpeF/

友情链接