Zagnieżdżone karty jQuery

Question

Nov 02, 2009, 04:28 PM

Zagnieżdżone karty jQuery

Jestem nowy w jQuery (kilka tygodni). Próbuję zagnieździć formant karty jQueryUI. Działa dobrze, dopóki zagnieżdżone karty nie znajdują się w pliku zewnętrznym, a następnie otrzymuję wyjątek w źródle jQuery. Wydaje się, że jest to problem do pewnego stopnia, ponieważ jeśli umieszczę pola alertów w funkcji .ready zagnieżdżonych kart, to działa. Czy ktoś może pomóc? Jestem pewien, że to pytanie musiało zostać zadane wcześniej, ale po wielu godzinach poszukiwań nie mogę znaleźć rozwiązania.

Oto mój bardzo prosty przykład ...

Zakładka zewnętrzna

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

Z góry dziękuję!

Adrian