Guias aninhadas do jQuery

Question

Nov 02, 2009, 04:28 PM

Guias aninhadas do jQuery

Eu sou novo no jQuery (algumas semanas). Estou tentando aninhar o controle da guia jQueryUI. Ele funciona bem até que as guias aninhadas estejam em um arquivo externo, então recebo uma exceção na origem do jQuery. Este parece ser um problema de temporização até certo ponto, porque se eu colocar caixas de alerta na função .ready das abas aninhadas, ele funciona. Alguém pode ajudar? Tenho certeza de que essa pergunta deve ter sido feita antes, mas depois de horas de pesquisa não consigo encontrar uma solução.

Aqui está o meu exemplo muito simples ...

Aba Externa

    <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>

Desde já, obrigado!

Adrian