網頁

▼

2010年6月2日星期三

JQuery UI Tabs size問題

今天用jQueryUI的Tabs出現一個問題，就是Tabs size非常大。

最奇怪的是，我引用官方的Demo code都出現這情況，難道連官方的都出錯?

查明後，原因是Tabs的font size是由.ui-helper-reset去控制，而.ui-helper-reset的font-size是100%，所以如果你的Tabs並沒有放置在其他已Define font-size的Container (例如Div)，那就會出現這個問題。
所以解決方法是把Tabs的<div id="tabs">...</div>放在一個container中，問題就得以解決。

正確HTML Code如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/redmond/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
<title></title>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="container" style="font-size:12px">  <!-- important -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">
Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
bibendum.</div>
<div id="tabs-3">
Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
ullamcorper augue.</div>
</div>
</div>
</body>
</html>
at

1 則留言: