Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje19-04-2009, 13:37 (UTC)    
Título del mensaje: [Código Javascript] Tablas Con scroll Siguiente y Previa

Fuente: www.hotscripts.com
Autor: Chris Coyier

Vista Previa:

Texto Por Encima de La Pagina

Código:
<link rel="stylesheet" href="http://img44.xooimage.com/files/6/3/7/tabs-da4cff.css" type="text/css" media="screen, projection"/>

   <script type="text/javascript" src="http://img21.xooimage.com/files/b/b/3/jquery-1.3.2.min-b8f180.js"></script>
   <script type="text/javascript" src="http://img26.xooimage.com/files/9/f/0/jquery-ui-1.7.custom.min-da4d0c.js"></script>
    <script type="text/javascript">
      $(function() {

         var $tabs = $('#tabs').tabs();
   
         $(".ui-tabs-panel").each(function(i){
   
           var totalSize = $(".ui-tabs-panel").size() - 1;
   
           if (i != totalSize) {
               next = i + 2;
                 $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Siguiente Tabla »</a>");
           }
    
           if (i != 0) {
               prev = i;
                 $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>« Tabla Previa</a>");
           }
         
         });
   
         $('.next-tab, .prev-tab').click(function() {
                 $tabs.tabs('select', $(this).attr("rel"));
                 return false;
             });
       

      });
    </script>


Codigo Donde Quieran Poner Las Tablas

Código:
<div id="page-wrap">
      
      <div id="tabs">
      
          <ul>
              <li><a href="#fragment-1">1</a></li>
              <li><a href="#fragment-2">2</a></li>
              <li><a href="#fragment-3">3</a></li>
              <li><a href="#fragment-4">4</a></li>
              <li><a href="#fragment-5">5</a></li>
              <li><a href="#fragment-6">6</a></li>
              <li><a href="#fragment-7">7</a></li>
              <li><a href="#fragment-8">8</a></li>
              <li><a href="#fragment-9">9</a></li>
              <li><a href="#fragment-10">10</a></li>
              <li><a href="#fragment-11">11</a></li>
              <li><a href="#fragment-12">12</a></li>
              <li><a href="#fragment-13">13</a></li>
              <li><a href="#fragment-14">14</a></li>
              <li><a href="#fragment-15">15</a></li>
            <li><a href="#fragment-16">16</a></li>
          </ul>
   
           <div id="fragment-1" class="ui-tabs-panel">
                  <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
                   <p>Fuente by: Chris Coyier</p> 
</div>
           
           <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
                  <p>Fuente by: Chris Coyier</p> 
               </div>
       
           <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide">
                     <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide">
                      <p>Fuente by: Chris Coyier</p> 
           </div>
                       
           <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide">
                       <p>Fuente by: Chris Coyier</p> 
           </div>
                    
           <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-9" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-10" class="ui-tabs-panel ui-tabs-hide">
<p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-11" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-12" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-13" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
           
           <div id="fragment-14" class="ui-tabs-panel ui-tabs-hide">
        <p>Fuente by: Chris Coyier</p> 
           </div>
<div id="fragment-15" class="ui-tabs-panel ui-tabs-hide">
        <p>TAS</p> 
           </div>           
           <div id="fragment-16" class="ui-tabs-panel ui-tabs-hide">
              <p>TAS</p>
           </div>

        </div>
      
   </div>


Explicacion:

Si Quieren Agregar Otra Tabla Inserten una linea Como Esta

<li><a href="#fragment-16">16</a></li>

Cambiando el numero en #fragment-numero y al lado le dan numero o nombre..

Quedando algo asi:
Cita:
<li><a href="#fragment-17">Nombre o Numero</a></li>

______________________________________________________--

Para Editar El Contenido de la tabla Insertan esto:
Cita:
<div id="fragment-16" class="ui-tabs-panel ui-tabs-hide">
<p>TAS</p>
</div>


<div id="fragment-16" class="ui-tabs-panel ui-tabs-hide"> esto lo cambian por el numero del fragment.

ejemplo <div id="fragment-17" class="ui-tabs-panel ui-tabs-hide">

y dentro colocan su contenfido Nos Quedaria algo asi


Cita:
<div id="fragment-17" class="ui-tabs-panel ui-tabs-hide">
<p>Aqui EL Contenido</p>
</div


Espero Les Sirva!! Explicación By: LifexD
______________


Ultima edición por codeslife el Dom May 03, 2009 4:05 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group