Iniciar sesión

~~matyimpacto~~ · 15-10-2013, 07:00 PM

[Imagen: IDTabs-jquery-videos-online-reproductores.jpg]

Paso 1 - JavaScript

lo principal para que nuestro tabs funcionen es el jquery, si ya tienen una version instalada en sus webs pueden omitir este paso, los que no lo tienen aun agreguen este codigo arriba de "</head>"

Código PHP:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
y listo, ahora necesitaremos agregaremos el codigo para hacer funcionar el tooltip de cada opcion, al igual que el jquery solo agreguen este codigo arriba de "</head>"
<script type="text/javascript" src="http://encript-s.googlecode.com/svn/trunk/jquery.tipsy.js"></script>
ya para terminar con el codigo JS copiaremos todo el siguiente codigo y lo agregaremos nuevamente arriba de "</head>":
<script type="text/javascript">
  $(function() {
    $("#Zk-gb a[title]").tipsy({gravity: 's'});
  });
</script>
<script>
$(document).ready(function() {
    $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
    $("#Zk-tabs li:first").attr("id","active"); // Activamos el primer li
    $("#cuerpo-tabs div.box-vd:first").fadeIn(); //Activamos el primer tab
    
    $('#Zk-tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "active"){ //Detectamos el tab ejecutado
         return       
        }
        else{             
        $("#cuerpo-tabs div.box-vd").hide(); //Ocultamos todos los tabs
        $("#Zk-tabs li").attr("id",""); //Borramos los id's
        $(this).parent().attr("id","active"); //Si esta activo agregamos el id
        $('#' + $(this).attr('name')).fadeIn(); //Mostramos solo el tab que este activo
        }
    });
});
</script> 

Paso 2 - CSS

Ahora procederemos a instalar el CSS lo cual acomodara todo en su sitio y le dara un bune aspecto, para hcerlo simplemente copien todo el codigo siguiente y agreguenlo a su sitio web o blog, en el caso de blogger lo agregaremos arriba de "]]></b:skin>"

Código PHP:
#Zk-gb {
    height: 454px;
    margin: 40px 0 10px 20px;
    position: relative;
    width: 720px;
}

#Zk-tabs {
    background: #262626;
    background-image: linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -o-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -moz-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -webkit-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -ms-linear-gradient(bottom, #262626 0%, #505050 100%);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #262626),color-stop(1, #505050));
    border-color: #111;
    border-radius: 5px 5px 0 0;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
    height: 30px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#Zk-tabs li {
    float: left;
    border-right: 1px solid #242424;
}
#Zk-tabs li > a {
    color: #DDDDDD;
    display: block;
    font-family: arial;
    font-size: 10px;
    font-weight: bold;
    height: 14px !important;
    line-height: 14px !important;
    padding: 8px 25px;
    text-decoration: none !important;
    text-shadow: 0 -1px 1px #000000;
    text-transform: uppercase;
}
#Zk-tabs li#active {
    background: rgba(255, 255, 255, 0.1);
    position: relative;
}
#Zk-tabs li#active > a {
    border-bottom: 2px solid #006CC0;
}
.box-video {
    background: #000;
    height: 400px;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 700px;
}

.tipsy { 
    padding: 5px;
    font-size: 10px;
    font-family:Arial, Helvetica, sans-serif;
    opacity: 0.8;
    filter: alpha(opacity=80);
    background-repeat: no-repeat; 
    background-image: url("https://lh6.googleusercontent.com/-GDf46JEhnMo/UdC3mahwcFI/AAAAAAAAFtg/Gd6E4GOPaOM/s1600/tipsy.gif");
}

.tipsy-inner { 
    padding: 5px 8px 4px 8px;
    background-color: black;
    color: white;
    max-width: 200px;
    text-align: center;
}
.tipsy-inner {border-radius:3px;}
.tipsy-north {background-position: top center;}
.tipsy-south {background-position: bottom center;}
.tipsy-east {background-position: right center;}
.tipsy-west {background-position: left center;}

.copy {
    display: block;
    position: absolute;
    right: 10px;
    top: 4px;
}

.copy > a {
    background: url("https://lh5.googleusercontent.com/-p7OeB6eyOo8/UdDALnuqPAI/AAAAAAAAFtw/6JJW8xOwjYE/s1600/zk-ico.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 25px;
    width: 36px;
} 

Paso 3 - HTML

Por ultimo ya solo nos queda formar la estructura html la cual la ubicaremos en donde deseemos usar el idTabs, copiaremos todo el siguiente codigo html y pegaremos en donde queramos usar

Código PHP:
<div id="Zk-gb">
<ul id="Zk-tabs">
    <li><a title="Vkontakte" href="#" name="tab1">OPCION 1</a></li>
    <li><a title="NowVideo" href="#" name="tab2">OPCION 2</a></li>
    <li><a title="Rutube" href="#" name="tab3">OPCION 3</a></li>
    <li><a title="Putlocker" href="#" name="tab4">OPCION 4</a></li>
    <li><a title="Novamov" href="#" name="tab5">OPCION 5</a></li>
    <li><a title="Videoweed" href="#" name="tab6">OPCION 6</a></li>
    
</ul>
<span class="copy"><a title="Z+Kreations" href="http://css.zanime-mf.com/" target="_blank"></a></span>
<div id="cuerpo-tabs"> 

<!-- Vkontakte -->
    <div class="box-vd" id="tab1">
    <div class="box-video">
    <iframe src="http://vk.com/video_ext.php?ID del video" width="700" height="400" frameborder="0"></iframe>
    </div>
    </div>

<!-- NowVideo --> 
    <div class="box-vd" id="tab2">
    <div class="box-video">
    <iframe width="700" scrolling="no" height="400" frameborder="0" src="http://embed.nowvideo.eu/embed.php?v=ID del video&width=700&height=400"></iframe>
    </div>
    </div>

<!-- Rutube --> 
    <div class="box-vd" id="tab3">
    <div class="box-video">
    <embed width="700" height="400" allownetworking="internal" allowfullscreen="true" wmode="transparent" autoplay="false" type="application/x-shockwave-flash" src="http://video.rutube.ru/ID del video"></embed>
    </div>
    </div>

<!-- Putlocker --> 
    <div class="box-vd" id="tab4">
    <div class="box-video">
    <iframe width="700" scrolling="no" height="400" frameborder="0" src="http://www.putlocker.com/embed/ID del video"></iframe>
    </div>
    </div>

<!-- Novamov --> 
    <div class="box-vd" id="tab5">  
    <div class="box-video">  
    <iframe style='overflow: hidden; border: 0; width: 700px; height: 400px' src='http://embed.novamov.com/embed.php?width=700&height=400&v=ID del video&px=1' scrolling='no'></iframe>
    </div>
    </div>

<!-- Videoweed --> 
    <div class="box-vd" id="tab6">
    <div class="box-video">
    <iframe width="700" height="400" frameborder="0" src="http://embed.videoweed.es/embed.php?v=ID del video&width=700&height=400" scrolling="no"></iframe>
    </div>
    </div>
     
</div>
</div> 

Creditos a su creador
http://css.zanime-mf.com/2013/06/idtabs-...query.html

Wolves · 26-10-2013, 01:55 PM

0

Excelenteee !

Posibles temas similares…
Tema		Autor	Respuestas	Vistas	Último mensaje
	Tutorial Programas útiles y gratuitos para desarrollo web	Kevin Alfonso	2	3,481	30-04-2016, 11:00 PM Último mensaje: piinbook
	Tutorial 18 Tutoriales Dreamweaver para diseñadores web	Kevin Alfonso	0	2,994	01-03-2016, 11:27 PM Último mensaje: Kevin Alfonso
	35 Plantillas Dreamweaver gratis para Descargar	Kevin Alfonso	0	30,012	01-03-2016, 11:14 PM Último mensaje: Kevin Alfonso
	Plantillas gratuitas para blogger	Ihering	0	3,065	10-04-2015, 08:23 PM Último mensaje: Ihering
	Software gratuito para gestion de bibliotecas	asanbus	12	9,825	09-04-2015, 01:32 PM Último mensaje: Ihering