Wizard con jquery tools standalone

kimmy · #1 (**permalink**) 30/05/2011, 13:42

Hola amigos:

Estoy haciendo un Wizard con jquery tools pero no se que pasa porque intento pasar a la siguiente pestaña y no puedo. Ya he revisado el código de distintas maneras y no se que mas hacer. Este es mi código:

Código HTML:

Ver original<html>
<head>
<script src="js/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/standalone.css">   
<link rel="stylesheet" type="text/css" href="css/tabs.css">
<style>
    
/* tab pane styling */
.panes div {
    display:none;       
    padding:15px 10px;
    border:1px solid #999;
    border-top:0;
    height:400px;
    font-size:14px;
    background-color:#fff;
}
 
    
    div.panes div {
        background:#fff url(images/h300.png) repeat-x 0 5px;
        -background:#fff;
        height:400px;
    }
    
    div.panes label {
        margin-bottom:15px;
        display:block;
    }
    
    label.error {
        color:red;
    }
 
/* tablas */
 
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}
 
th {
    background: #3e83c9;
    color: #fff;
    font-weight: bold;
    padding: 2px 11px;
    border-right: 1px solid #fff;
    line-height: 1.2;
}
 
td {
    padding: 2px 11px;
    vertical-align: top;
    text-align:justify;
}
 
tr.alt td {
    background: #ecf6fc;
}
 
tr.over td, tr:hover td {
    background: #bcd4ec;
}
    </style>
 
 
</head>
<body>
 
<div id="wrapper">
 
<!--Content Centro -->
<div id="content">
<div id="promotions_productos">
<div id="wizard">
 
<!-- tabs -->
    <ul class="tabs">
 
        <li><a href="#" class="w2 current">Evento</a></li>
        <li><a href="#" class="w2">Atracciones</a></li>
        <li><a href="#" class="w2">Alimentos/Bebidas</a></li>
        <li><a href="#" class="w2">Serv. Festejos</a></li>
        <li><a href="#" class="w2">Entretenimiento</a></li>
        <li><a href="#" class="w2">Decoración</a></li>
        
    </ul>
 
<!-- panes -->
<div class="panes">
 
 <div>
        <table width='614'>
  <p></p>  <p></p>
  <form action="" method="get">
   <label><tr>
   <td>Fecha del Evento:</td>
   <td><input name="fecha_evento" type="text"></td>
   <td>Tipo de Evento:</td>
   <td><input name="tipo_evento" type="text"></td>
   </tr></label>
   <label><tr>
   <td>Dirección del Evento:</td>
   <td><input name="dir_evento" type="text"></td>
   <td>Características del Lugar:</td>
   <td><input name="carac_lugar" type="text"></td>
   </tr></label>
   <label><tr>
   <td>Hora Inicio:</td>
   <td><input name="hora_ini" type="text"></td>
   <td>Ctdad Invitados Niños:</td>
   <td><input name="ctdad_niños" type="text"></td>
   </tr></label>
   <label><tr>
   <td>Ctdad Invitados Adultos:</td>
   <td><input name="ctdad_adult" type="text"></td>
   <td>Requiere Generadora Energia:</td>
   <td>
       <label>
         <input type="radio" name="energia" value="si" id="energia_0">
         si
         <input type="radio" name="energia" value="no" id="energia_1">
         no</label>
     </td>
     </tr></label>
     <label><tr>
     <td colspan="4"><input id="terms" type="checkbox">I accept <a href="#">these</a> terms</td>
     </tr></label>  
     <label><tr>        
        <td colspan="4"><button class="next">Next »</button></td>
      </tr></label>
</form>
   </table>
  </div>
  
  <div>
            <h2>1...</h2>
 
            <p>
                <button class="prev">« Prev</button>
 
                <button class="next">Next »</button>
            </p>
        </div>
 
  <div>
            <h2>2...</h2>
 
            <p>
                <button class="prev">« Prev</button>
 
            </p>
 
        </div>
 
   <div>
            <h2>3...</h2>
 
            <p>
                <button class="prev">« Prev</button>
 
            </p>
 
        </div>
 
    <div>
            <h2>4...</h2>
 
            <p>
                <button class="prev">« Prev</button>
 
            </p>
 
        </div>
 
    </div>
 
</div>
 
<script>
$(function() {
    // get container for the wizard and initialize its exposing
    var wizard = $("#wizard");
 
    // enable exposing on the wizard
    
// enable exposing on the wizard
    wizard.click(function() {
        $(this).load();
    });
    
 
    // enable tabs that are contained within the wizard
    $("ul.tabs", wizard).tabs("div.panes > div", function(event, index) {
 
        /* now we are inside the onBeforeClick event */
 
        // ensure that the "terms" checkbox is checked.
        var terms = $("#terms");
        if (index > 0 && !terms.get(0).checked)  {
            terms.parent().addClass("error");
 
            // when false is returned, the user cannot advance to the next tab
            return false;
        }
 
        // everything is ok. remove possible red highlight from the terms
        terms.parent().removeClass("error");
    });
 
    
 
    // get handle to the tabs API
    var api = $("ul.tabs", wizard).data("tabs");
 
    // "next tab" button
    $("button.next", wizard).click(function() {
        api.next();
    });
 
    // "previous tab" button
    $("button.prev", wizard).click(function() {
        api.prev();
    });
 
});
</script>
</div><!--Fin Promotion -->
</div><!--Fin Content -->
</div><!--Fin Wrapper -->
</div>
</body>
</html>

Me imagino que es en esta parte de la función:

Código Javascript:

Ver original// get handle to the tabs API
    var api = $("ul.tabs", wizard).data("tabs");
 
    // "next tab" button
    $("button.next", wizard).click(function() {
        api.next();
    });
 
    // "previous tab" button
    $("button.prev", wizard).click(function() {
        api.prev();
    });

pero no logro ver el porque. Por favor sugieranme que puede hacer.

Gracias ;)