嵌套的 jQuery 选项卡 [英] Nested jQuery tabs
问题描述
我是 jQuery 新手(几周).我正在尝试嵌套 jQueryUI选项卡控件.在嵌套选项卡位于外部之前，它工作正常文件然后我在 jQuery 源代码中抛出异常.这似乎在一定程度上是一个时间问题，因为如果我发出警报它工作的嵌套选项卡的 .ready 函数中的框.任何人都可以帮助?我敢肯定这个问题之前一定被问过，但在之后几个小时的搜索我似乎无法找到解决方案.
I'm new to jQuery (a couple of weeks). I'm trying to nest the jQueryUI tab control. It works fine until the nested tabs are in an external file then I get an exception thrown in the jQuery source. This seems to be a timing issue to a certain extent, because if I place alert boxes in the .ready function of the nested tabs it works. Can anyone help? I'm sure this question must have been asked before, but after hours of searching I can't seem to find a solution.
这是我非常简单的例子...
Here's my very simple example...
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
});
</script>
</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="innerTab1.aspx" title="InnerTab1"><span>InnerTab1</
span></a></li>
<li><a href="innerTab2.aspx" title="InnerTab2"><span>InnerTab2</
span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
</body>
</html>
InnerTab1.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1"></div>
<div id="tabA2"></div>
</div>
</body>
</html>
InnerTab2.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" href="css/jquery-ui-1.7.2.custom.css"
rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/
jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/
ui.tabs.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1"></div>
<div id="tabB2"></div>
</div>
</body>
</html>
提前致谢！
阿德里安
推荐答案
您的重复的Tabs"ID 属性肯定会遇到一些问题.以下示例应该可以实现您的目标:
主文件(外部选项卡)
You are definitely running into a little bit of trouble with your duplicated 'Tabs' ID attribute. The following example should achieve what you're looking for:
Main File (Outer Tab)
<html>
<head id="Head1" runat="server">
<title></title>
<link type="text/css" href="http://static.jquery.com/ui/themes/base/ui.base.css"
rel="stylesheet" />
<link type='text/css' href='http://static.jquery.com/ui/themes/base/ui.tabs.css'
rel='stylesheet'>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
</head>
<body>
<div id="OuterTab">
<ul>
<li><a href="#InnerTab1" title="InnerTab1"><span>InnerTab1</span></a></li>
<li><a href="#InnerTab2" title="InnerTab2"><span>InnerTab2</span></a></li>
</ul>
<div id="InnerTab1">
</div>
<div id="InnerTab2">
</div>
</div>
<script type="text/javascript">
$(function() {
$("#OuterTab").tabs();
$('#InnerTab1').load('tab1.html', function() {
$('#tabs').tabs();
});
$('#InnerTab2').load('tab2.html', function() {
$('#tabs2').tabs();
});
});
</script>
</body>
</html>
标签 1 (tab1.html)
<div id="tabs">
<ul>
<li><a href="#tabB1"><span>InnerTabB1</span></a></li>
<li><a href="#tabB2"><span>InnerTabB2</span></a></li>
</ul>
<div id="tabB1">
This is tab b1 content
</div>
<div id="tabB2">
This is tab b2 content
</div>
</div>
选项卡 2 (tab2.html)
<div id="tabs2">
<ul>
<li><a href="#tabA1"><span>InnerTabA1</span></a></li>
<li><a href="#tabA2"><span>InnerTabA2</span></a></li>
</ul>
<div id="tabA1">
This is tab A1 content
</div>
<div id="tabA2">
This is tab A2 content
</div>
</div>
这样，当你运行你的主文件时，两个选项卡文件会通过 jQuery 请求并加载到适当的 div 中.然后我定义了一个回调来激活刚刚加载的选项卡.
This way, when you run your main file, the two tab files are requested via jQuery and loaded into the appropriate divs. Then I have defined a callback to activate the tabs that were just loaded.
如果您需要更多详细信息，请在评论中跟进.
If you need more details just follow up with a comment.
这篇关于嵌套的 jQuery 选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
