有什么方法可以“堆叠”jQuery UI Tabs Header?请允许我解释一下:我的标签可能需要两个或多个单词才能使标题不言自明。例如:
“PDP 未开发”
我的问题是添加一堆标签时空间不足。所以不要把标签写成
PDP Undeveloped
我希望它显示为
PDP
Undeveloped
那可能吗?如果没有,那么是否有解决此问题的替代方法?
提前致谢。
巴拉特
有什么方法可以“堆叠”jQuery UI Tabs Header?请允许我解释一下:我的标签可能需要两个或多个单词才能使标题不言自明。例如:
“PDP 未开发”
我的问题是添加一堆标签时空间不足。所以不要把标签写成
PDP Undeveloped
我希望它显示为
PDP
Undeveloped
那可能吗?如果没有,那么是否有解决此问题的替代方法?
提前致谢。
巴拉特
我建议使用<br />
标签。由于您只希望它们在空间不足时生效,我建议使用媒体查询来打开多行显示。
<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/