Advertisement
Javier-3VS

Tabs without jQuery UI

Dec 6th, 2012
71
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.38 KB | None | 0 0
  1. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  2.            
  3.     <section class="content">
  4.         <div class="ui-tabs">
  5.             <div id='proy-menu' class='tabs'>
  6.                 <ul class="tabs-nav">
  7.                     <li ><a href="#descripcion" id="descripcionlink">Descripción</a></li>
  8.                     <li ><a href="#ubicacion" id="ubicacionlink">Ubicación</a></li>
  9.                 </ul>
  10.             </div>
  11.  
  12.             <div id='proy-cont' class='tabs-contentido'>
  13.                
  14.                 <div id='descripcion' class='contenido'>
  15.                     <?php echo '<div class="descr">'.get('descripcion_info').'</div>'; ?>
  16.                 </div>
  17.  
  18.                 <div id='ubicacion' class='contenido'>
  19.            
  20.                     <?php
  21.                         flexmap_show_map(array(
  22.                             'center' => get('ubicacion_latitud').','.get('ubicacion_longitud'),
  23.                             'width' => 580,
  24.                             'height' => 400,
  25.                             'zoom' => 16,
  26.                             'title' => get('descripcion_nombre'),
  27.                             'description' => get('descripcion_ubicacion'),
  28.                             'directions' => 'false',
  29.                             'hidepanning' => 'false',
  30.                             'hidescale' => 'false',
  31.                             'maptype' => 'roadmap',
  32.                         ));
  33.                     ?>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </section>
  38.            
  39.     <script src="http://code.jquery.com/jquery-latest.js"></script>
  40.     <script>
  41.         //Tabs General
  42.         $(document).ready(function() {
  43.             //add active class to the first li
  44.             $('.tabs-nav li:first').addClass('active');
  45.             //hide all content classes.
  46.             $('.contenido').hide();
  47.             //show only first div content
  48.             $('.contenido:first').show();
  49.             //add the click function
  50.             $('.tabs-nav li').click(function(){
  51.                 //remove active class from previous li
  52.                 $('.tabs-nav li').removeClass('active');
  53.                 //add active class to the active li.
  54.                 $(this).addClass('active');
  55.                 //hide all content classes
  56.                 $(".contenido").hide();
  57.                 //find the href attribute of the active tab
  58.                 var activeTab = $(this).find("a").attr("href");
  59.                 //fade in the content of active tab
  60.                 $(activeTab).fadeIn(700);
  61.                 return false;
  62.             });
  63.         });
  64.     </script>
  65.  
  66.     <script>
  67.  
  68.         jQuery(function($) {
  69.             $('div.ui-tabs').bind('click', function(event, ui) {
  70.                 $("div.flxmap-container").each(function() {
  71.                     var flxmap = window[this.getAttribute("data-flxmap")],
  72.                     flxmap.redrawOnce();
  73.                 });
  74.             });
  75.         });
  76.  
  77.     </script>
  78.  
  79. </article>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement