嵌套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>
提前谢谢！
阿德里安
推荐答案
对于您重复的标签" 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屋！
