使用 jQuery UI 选项卡和 jQuery UI 选择菜单
Using jQuery UI tabs and jQuery UI selectmenu
我有两个选项卡,每个选项卡中我都想有一些表格。我正在添加 select 菜单,以及每个选项卡中的 jQuery UI。问题是第二个选项卡上的 select 菜单不会显示。我相信这与选项卡的加载方式有关,但我不太确定如何解决它。
这是 html 代码和 fiddle http://jsfiddle.net/us8xbyyo/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tabs</title>
<link rel="stylesheet" href="./jQuery/jquery-ui.css">
<script src="./jQuery/external/jquery/jquery.js"></script>
<script src="./jQuery/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( ".mySelect" ).selectmenu();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Company</a></li>
<li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-2">
<label for="company">Company </label>
<select class="mySelect" id ="company">
<option value="-1">Chose a company</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
</select>
</div>
<div id="tabs-1">
<label for="depto">Depto</label>
<select class="mySelect" id="depto" name="depto">
<option value="-1">Chose a dpto</option>
<option value="1">Dpto 1 </option>
<option value="2">Dpto 2</option>
<option value="3">Dpto 3</option>
</select>
</div>
</div>
</body>
</html>
非常感谢
您似乎可以通过检查每个下拉列表的 ID 名称来解决此问题 div。
您的第一个 div 的 id="tabs-2" 应该是 id="tabs-1"。
您的第二个 div 的 id="tabs-1" 应该是 id="tabs-2".
这样您的 link 就会 link 到正确的 div。
其次,我相信既然您在 HTML 中已经有了标签,它会自动呈现为下拉菜单,并根据标签之间的内容标记您的选项。因此,不需要 .selectmenu 的 jQuery 以及 class 名称。
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Company</a></li>
<li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-1">
<label for="company">Company </label>
<select id="company">
<option value="-1">Chose a company</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
</select>
</div>
<div id="tabs-2">
<label for="depto">Depto</label>
<select id="depto">
<option value="-1">Chose a depto</option>
<option value="1">Dpto 1 </option>
<option value="2">Dpto 2</option>
<option value="3">Dpto 3</option>
</select>
</div>
$(function() {
$( "#tabs" ).tabs();
});
此代码似乎有效。
所以我听从了@dcook 的建议,并查看了文档并决定使用特定宽度初始化 selectmenu()
。使用 Chrome 的工具,我能够验证第二个选项卡上的 selectmenu()
已应用,但宽度设置为 0,这很奇怪,因为宽度应根据长度自动设置select.
里面最大的字符串
干杯。
我有两个选项卡,每个选项卡中我都想有一些表格。我正在添加 select 菜单,以及每个选项卡中的 jQuery UI。问题是第二个选项卡上的 select 菜单不会显示。我相信这与选项卡的加载方式有关,但我不太确定如何解决它。
这是 html 代码和 fiddle http://jsfiddle.net/us8xbyyo/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI tabs</title>
<link rel="stylesheet" href="./jQuery/jquery-ui.css">
<script src="./jQuery/external/jquery/jquery.js"></script>
<script src="./jQuery/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
$( ".mySelect" ).selectmenu();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Company</a></li>
<li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-2">
<label for="company">Company </label>
<select class="mySelect" id ="company">
<option value="-1">Chose a company</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
</select>
</div>
<div id="tabs-1">
<label for="depto">Depto</label>
<select class="mySelect" id="depto" name="depto">
<option value="-1">Chose a dpto</option>
<option value="1">Dpto 1 </option>
<option value="2">Dpto 2</option>
<option value="3">Dpto 3</option>
</select>
</div>
</div>
</body>
</html>
非常感谢
您似乎可以通过检查每个下拉列表的 ID 名称来解决此问题 div。
您的第一个 div 的 id="tabs-2" 应该是 id="tabs-1"。 您的第二个 div 的 id="tabs-1" 应该是 id="tabs-2".
这样您的 link 就会 link 到正确的 div。
其次,我相信既然您在 HTML 中已经有了标签,它会自动呈现为下拉菜单,并根据标签之间的内容标记您的选项。因此,不需要 .selectmenu 的 jQuery 以及 class 名称。
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Company</a></li>
<li><a href="#tabs-2">Depto</a></li>
</ul>
<div id="tabs-1">
<label for="company">Company </label>
<select id="company">
<option value="-1">Chose a company</option>
<option value="1">Company 1</option>
<option value="2">Company 2</option>
<option value="3">Company 3</option>
</select>
</div>
<div id="tabs-2">
<label for="depto">Depto</label>
<select id="depto">
<option value="-1">Chose a depto</option>
<option value="1">Dpto 1 </option>
<option value="2">Dpto 2</option>
<option value="3">Dpto 3</option>
</select>
</div>
$(function() {
$( "#tabs" ).tabs();
});
此代码似乎有效。
所以我听从了@dcook 的建议,并查看了文档并决定使用特定宽度初始化 selectmenu()
。使用 Chrome 的工具,我能够验证第二个选项卡上的 selectmenu()
已应用,但宽度设置为 0,这很奇怪,因为宽度应根据长度自动设置select.
干杯。