[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Javascript

  • jquery Hover Sub Tag Cloud – Organizar nubes etiquetas agregando sub contenido dentro de ellas.

    tag-cloud.jpg

    Utilizar las nubes de etiquetas correctamente en nuestro sitio sin duda hará que nuestros visitantes logren visualizar fácilmente los principales temas de nuestro blog. Pero he visto en varios blog que las nube de etiquetas se han convertido en una sección con mas de 200 palabras claves, algo que a veces hace que una simple búsqueda de un tema específico se transforme en todo una travesía, es por ello que en estos casos, opto siempre por guiarme directamente por las categorías.
    Pero, si en el diseño de nuestro blog hemos optado por dejar de lado las categorías para trabajar de lleno con las nubes de etiquetas como referencia de navegación, pero algo que no hemos prevenido era obtener tantas palabras de referencia, una buena opción será organizar estas etiquetas utilizando en cada una de ellas sub-etiquetas. Diciéndolo de otro modo, utilizar en las nubes de etiquetas un tema central que contenga subtemas relacionados. Algo que a menudo solemos utilizar con las categorías agregando subcatgorias.
    Yendo al grano, jquery Hover Sub Tag Cloud será una buena forma de organizar estas etiquetas. Una librería que utilizando jquery nos permitira por un lado reducir o aumentar el tamaño de las palabras claves de la nube de etiquetas, y por otro lado añadir a estas etiquetas una especie de tooltips donde mostraremos los subtemas. Y como es de imaginar, un poco de CSS para personalizar el estilo que deseamos obtener. ver demo

    Instalacion:
    Descargamos el script jquery Hover Sub Tag Cloud, Y alojaremos los archivos que encontraremos dentro en nuestro servidor.
    Y lo segundo que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="jquery-1.js"></script>
    2.         <script type="text/javascript" src="hovertip.js"></script>
    3.         <script type="text/javascript">
    4.             // initialize tooltips in a seperate thread
    5.             $(document).ready(function() {
    6.               window.setTimeout(hovertipInit, 1);
    7.              });
    8.         </script>

    Junto con ello también agregaremos la llama a la hoja de estilo, con la cual personalizaremos colores, estilo y demás. Archivo que también encontramos dentro de la carpeta.

    1. <style type="text/css" media="all">@import "css.css";</style>

    Si le realizamos una pequeña mirada a la hoja d estilo veremos lo fácil que es personalizar los tamaños de nuestras fuentes, las cuales formaran parte de las etiquetas, como así también las imágenes utilizadas en nuestros tooltips.

    1. /* classes for tooltips */
    2.  
    3. .hovertip {
    4.     position: absolute;
    5.     display: none; /* in case javascript is disabled */
    6.     width: 270px;
    7.     height:350px;
    8.     background: url('sub-bg.png') no-repeat;
    9.     font-size: 12px;
    10.     z-index: 100;
    11.     margin-left: 5px;
    12.     margin-top: 10px;
    13.     }
    14. .hovertip_target {
    15.                  font-style: italic;
    16. }
    17.  .hovertip_target:hover {
    18.                         text-decoration: none;
    19.                       cursor:help;
    20. }
    21. .nav, .nav * {
    22.     margin:0;
    23.     padding:0;
    24. }
    25. #cloud{
    26.     float: left;
    27.     position:absolute;
    28.     line-height:1.0;
    29.     background: url('bg.gif') no-repeat;
    30.     width:380px;
    31.     height:333px;
    32.     padding:80px 40px 40px 40px;
    33. }
    34. .nav {
    35.     float: left;
    36.     position:absolute;
    37.     line-height:1.0;
    38.     width:310px;
    39.     height:333px;
    40.     padding:0px;
    41. }
    42. .nav ul {
    43.     width:160px;   
    44.     list-style:none;   
    45.     background:#fff; /*IE6 needs this*/
    46. }
    47. .nav li {
    48.     float: left;
    49.     list-style:none;   
    50.     position:relative;
    51. }
    52. .nav a {
    53.     color: #fff;
    54.     text-decoration:none;
    55.     display:block;
    56. }
    57. .nav li ul {
    58.     left:0;
    59.     top:-999em;
    60.     width: 180px;
    61.     padding-top:50px;
    62.     height:190px;
    63.     background: url('sub-bg.png') no-repeat;
    64.     position:absolute;
    65.     list-style:none;
    66.     z-index:100;
    67.     text-align: center;
    68.     }
    69.  
    70.  
    71. ul.hovertip li {
    72.     display:inline;
    73.     list-style:none;
    74. }
    75. ul.hovertip li a{ text-decoration:none; font-style:italic}
    76. ul.hovertip {width:200px; padding-top:30px; padding-left:10px; height:95px; padding-bottom:20px; display:block}
    77.  
    78. a.size1 {
    79.     font-size:25px;
    80.     padding: 10px;
    81.     color:#804D40;
    82. }
    83. a.size1:hover {
    84.     color:#E13728;
    85. }
    86. a.size2 {
    87.     padding: 7px;
    88.     font-size:20px;
    89.     color:#B9251A;
    90. }
    91. a.size2:hover {
    92.     color:#E13728;
    93. }
    94.  
    95.  
    96. a.size3 {
    97.     padding: 5px;
    98.     font-size:35px;
    99.     color:#C4876A;
    100. }
    101.  
    102. a.size3:hover {
    103.     color:#E13728;
    104. }
    105.  
    106. a.size4 {
    107.     padding: 5px;
    108.     font-size:15px;
    109.     color:#B46A47;
    110. }
    111.  
    112. a.size4:hover {
    113.     color:#E13728;
    114. }
    115.  
    116. a.size5 {
    117.     padding: 5px;
    118.     font-size:25px;
    119.     color:#E13728;
    120. }
    121. a.size5:hover {
    122.     color:#B46A47;
    123. }
    124. a.size6 {
    125.     padding: 0px;
    126.     font-size:12px;
    127.     color:#77625E
    128. }
    129. a.size6:hover {
    130.     color:#E13728;
    131. }
    132. a.size-sub1 {
    133.     padding: 20px;
    134.     font-size:12px;
    135.     color:#804D40;
    136. }
    137. a.size-sub1:hover {
    138.     color:#fff;
    139. }
    140. a.size-sub2 {
    141.     padding: 25px;
    142.     font-size:20px;
    143.     color:#E13728;
    144. }
    145. a.size-sub2:hover {
    146.     color:#fff;
    147. }
    148. a.size-sub3 {
    149.     padding: 10px;
    150.     font-size:18px;
    151.     color:#804D40;
    152. }
    153. a.size-sub3:hover {
    154.     color:#fff;
    155. }
    156. a.size-sub4 {
    157.     padding: 15px;
    158.     font-size:25px;
    159.     color:#fff;
    160. }
    161. a.size-sub4:hover {
    162.     color:#E13728;
    163. }

    Y por ultimo la estructura, aquí ya empezaremos a agregar el contenido. Nuestra etiqueta central y las sub-etiquetas dentro de ella. Para de esta forma organizar muy bien todo el contenido de nuestro sitio. Construir una etiqueta que contenga sub-etiquetas, seria algo así.

    1. <div id="cloud">
    2.             <ul class="nav">
    3.            
    4.                 <li>
    5.                     <a class="size1" href="#" id="j1">nombre etiqueta principal</a>
    6.                     <ul style="display: block;" class="hovertip" target="j1">
    7.                         <li><a class="size-sub1" href="#">etiqueta secundaria 1 </a></li>
    8.                         <li><a class="size-sub2" href="#">etiqueta secundaria 2</a></li>
    9.                         <li><a class="size-sub3" href="#">etiqueta secundaria 3</a></li>
    10. etc....
    11.                     </ul>
    12.                 </li>
    13.          
    14.             </ul>
    15.         </div>

    La clase class=”size1″, que puede ser size2, size3, size4, etc. nos permite dar a la etiqueta central un tamaño diferente, para que resalte del resto.

  • ImageFlow, Otra galería en JavaScript para crear tu Coverflow

    imageflow.jpg

    ImageFlow es otra bonita galería basada en JavaScript y la cual por su aspecto sin duda quedaría bien en cualquier proyecto online que tengamos en mente. ImageFlow es muy similar en varios aspectos con MooFlow aunque cuenta con algunas diferencias o algunos agregados. ImageFlow nos permite navegar entre las imágenes utilizando el scroll de nuestro ratón o bien utilizando un sistema de navegación integrado a la galería y el cual moveremos esta vez, de forma manual con nuestro ratón. Esto permite al usuario desplazarse bien entre cada una de las imágenes, yendo de un lado a otro. También se han hecho muchas mejoras con respecto al div contenedor de la galería, lo que garantiza que el desplazamiento producido por nuestro ratón, solo se produzca al estar sobre el div que contiene a la misma. Su utilización es sumamente fácil y los efectos que hacen a la galería muy agradables. ImageFlow y MooFlow son dos galerías que tranquilamente podríamos comparar por su similitud, y ver así, cual de las dos se asemeja mas, a lo que deseamos conseguir para nuestro proyecto online.

    Ver demoDescarga demo
    Instalacion:
    Descargamos el script ImageFlow
    y como es costumbre, lo primero que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="js/imageflow.js"></script>

    agregamos un poco de estilo

    1. <style type="text/css">
    2. img {
    3.     position:absolute;
    4.     top:0px;
    5.     border:none;
    6. }
    7. h1 {
    8.     text-align:center;
    9. }
    10. a{
    11.     color:#fff;
    12. }
    13. .none{
    14.     visibility:hidden;
    15. }
    16. .none div{
    17.     display:none;
    18. }
    19. .clear{
    20.     clear:both;
    21. }
    22. #images{
    23.     visibility:hidden;
    24. }
    25. #loading{
    26.     margin-top:50px;
    27.     text-align:center;
    28.     width:100%;
    29. }
    30. #loading img{
    31.     margin-top:10px;
    32.     position:relative;
    33. }
    34. #captions{
    35.     position:relative;
    36.     text-align:center;
    37.     z-index:10000;
    38. }
    39. #scrollbar{
    40.     visibility:hidden;
    41.     position:relative;
    42.     border-bottom:1px solid #b3b3b3;
    43.     z-index:10001;
    44. }
    45. #scrollbar_slider{
    46.     position:absolute;
    47.     margin-top:-7px;
    48.     margin-left:-7px;
    49.     z-index:10002;
    50.     background-image:url(slider.png);
    51.     background-repeat:no-repeat;
    52.     width:14px;
    53.     height:14px;   
    54. }
    55. #imageflow{
    56. background-color:#000;
    57.     margin-left:350px;
    58.     text-align:left;
    59.         color: #fff;
    60. }
    61. </style>

    Por ultimo la estructura de nuestra galeria

    1. <div id="imageflow">
    2.     <div id="loading">
    3.         <b>Loading images</b><br/>
    4.         <img src="loading.gif" width="208" height="13" alt="loading" />
    5.     </div>
    6.     <div id="images">
    7.         <img src="img/img001.png" alt="Image 1" />
    8.         <img src="img/img002.png" alt="Image 2" />
    9.         <img src="img/img003.png" alt="Image 3" />
    10.         <img src="img/img002.png" alt="Image 4" />
    11.         <img src="img/img003.png" alt="Image 5" />
    12.         <img src="img/img001.png" alt="Image 6" />
    13.         <img src="img/img002.png" alt="Image 7" />
    14.         <img src="img/img003.png" alt="Image 8" />
    15.         <img src="img/img002.png" alt="Image 9" />
    16.         <img src="img/img001.png" alt="Image 10" />
    17.     </div>
    18.     <div id="captions"></div>
    19.     <div id="scrollbar">
    20.         <div id="slider"></div>
    21.     </div>
    22. </div>
    23.  
    24. <div class="clear"></div>

  • Crossfader: Script que produce un efecto de desvanecimiento en un cuadro de texto rotando contenido

    crossfader.jpg

    Crossfader.js es una bonita libreria JavaScript que nos permitirá de forma dinámica ir mostrando en un lapso de tiempo determinado diferentes tipos de mensajes. Por ejemplo al estilo de gif animado, solo que aquí mediante Crossfader iremos agregando todo tipo de contenido de forma individual. Usando un poco la imaginación podrás utilizarlo para mostrar todo tipo de contenido que desees, artículos destacados, o publicidad que vaya cambiando cada cierta cantidad de segundos.

    Ver Demo

    Instalacion
    Descargamos el script Crossfader
    y como es costumbre, lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >

    1. <script type="text/javascript" src="js/bsn.Crossfader.js"></script>

    Nuestro css

    1. <style type="text/css">
    2.  
    3.     div.cf_wrapper
    4.     {
    5.         position: relative;
    6.     }
    7.    
    8.     div.cf_element
    9.     {
    10.         width: 400px;
    11.         height: 250px;
    12.         background-color: #eee;
    13.         border:  1px solid #ccc;
    14.     }
    15.    
    16.     div.cf_element div.content
    17.     {
    18.         padding: 10px;
    19.     }
    20.  
    21.     div.cf_element div.content h3
    22.     {
    23.         padding-top: 0;
    24.         margin-top: 0;
    25.     }
    26.  
    27. </style>

    Por ultimo la estructura con la cual comenzaremos a agregar todo tipo de contenido

    1. <div class="cf_wrapper">
    2.         <div class="cf_element" id="cf1">
    3.           <div class="content">
    4.                 <h3>Titulo 1</h3>
    5.               <p> aqui todo nuestro contenido correspondiente al titulo 1 </p>
    6.             </div>
    7.         </div>
    8.  
    9.  
    10.         <div class="cf_element" id="cf2">
    11.             <div class="content">
    12.                 <h3> Titulo 2</h3>
    13.              <p> Aqui todo nuestro contenido correspondiente al titulo 2 </p>
    14.             </div>
    15.         </div>
    16.        
    17.     </div>
    18.  
    19. <script type="text/javascript">
    20.     var cf = new Crossfader( new Array('cf1','cf2'), 500, 2000 );
    21. </script>

    Como vez cada elemento en el contenido posee un ID que lo identifica ej cf1 o cf2. También puedes ver que al final de la estructura mediante javascript especificamos que elementos deseamos mostrar y por supuesto dar el efecto fade.

    1. new Array('cf1','cf2')

    Pues esto es muy simple, a medida que agregamos mas contenido en la estructura EJ:

    1. <div class="cf_element" id="cf3">
    2.             <div class="content">
    3.                 <h3> Titulo 3</h3>
    4.              <p> Aqui todo nuestro contenido correspondiente al titulo 3 </p>
    5.             </div>
    6.         </div>

    Daremos otro numero al ID que lo identifica, y lo agregaremos en el array tambien

    1. var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

    Fuente freakgroup

  • MooFlow – Galeria basada en Javascript con aspecto a iTunes de Apple

    mooflow.jpg

    MooFlow. un extraordinario script desarrollado bajo MooTools que nos permitirá crear una galería de imágenes con un aspecto muy agradable. MooFlow posee varias características a favor, una de ellas lo ligero que es, pero lo mas agradable o mejor dicho lo que llamara muy rápido la atención de nuestros ojos, son los bonitos efectos de transición y la forma de visualizar cada una de las imágenes de nuestra galería, Similar en apariencia a iTunes de Apple o Finders CoverFlow. Es compatible con Safari, internet explorer 6 y 7, Firefox (and its mozilla friends), Opera y Camino. Coverflow sin duda es una buena opción para tus proyectos.

    Ver demoDescarga MooFlow Demo Oficial

    Instalacion:

    Descargamos los script: MooFlow.js y mootools.

    Los alojamos en nuestro servidor o en la carpeta deseada y realizamos la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < Head >

    1. <script type="text/javascript" src="mootools-beta-1.2b1.js"></script>
    2. <script type="text/javascript" src="MooFlow.js"></script>
    3. <script type="text/javascript">
    4. //<![CDATA[
    5. /* MooFlow */
    6. var mf;
    7. window.addEvent('load', function(){
    8.     mf = new MooFlow({
    9.         container: 'MooFlow',
    10.         imgContainer: 'images',
    11.         images: '#images img',
    12.         caption: 'captions'
    13.     });
    14. });
    15. //]]>
    16. </script>

    Contenido o estructura de nuestra galería

    1. <div id="MooFlow">
    2.   <div id="images">
    3.     <img src="foto1.jpg" alt="01" title="Esta es mi foto 1" />
    4.     <img src="foto2.jpg" alt="01" title="Esta es mi foto 2" />
    5.     <img src="foto3.jpg" alt="01" title="Esta es mi foto 3" />
    6.     ....etc
    7.   </div>
    8.   <div id="captions"></div>
    9. </div>

    Fuentes Anieto2k | freakgroup

  • jQuery Multimedia Portfolio – Galería con contenido múltiple

    jporfolio.jpg

    Por medio de Mauricio en infectedfx doy con jQuery Multimedia Portfolio un interesante plugin para jQuery que nos permitirá crear un porfolio utilizando una especia de carrusel con contenido múltiple. Para ser claros, en el no solo podremos introducir imágenes, sino que jQuery Multimedia Portfolio nos permitirá también optar por agregar videos en formato “flv” o audio en formato “mp3”. Esto es sin duda algo que hace a jQuery Multimedia Portfolio realmente interesante. Este plugin detectara automáticamente la extensión del archivo y le inserta el contenido o la funcionalidad correspondiente a cada uno de ellos. Por ejemplo, en el caso de videos, la opción de reproducción.

    Ver Demo

    Descargas:

    Podremos bajar los archivos desde infectedfx o de la web oficial de openstudio

    USO:

    Como de costumbre lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >.

    1. <link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />
    2. <script type="text/javascript" src="js/jquery.js"></script>
    3. <script type="text/javascript" src="js/jquery.dimensions.js"></script>
    4. <script type="text/javascript" src="js/ui.mouse.js"></script>
    5. <script type="text/javascript" src="js/ui.slider.js"></script>
    6. <script type="text/javascript" src="js/jquery.multimedia-portfolio.js"></script>
    7. <script type="text/javascript">
    8.     $(document).ready(function(){
    9.         $("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
    10.     });
    11. </script>

    y para insertar el contenido, la siguiente estructura

    1. <ul class="multimedia-portfolio">
    2. <li>
    3. ..................CONTENIDO......................
    4. </li>
    5.  
    6. </ul>

    Ejemplo: agregar imagenes de contenido

    1. <li>
    2. <a href="imagen.jpg" alt="agrandir"><img src="thumbnail.jpg" title="imagen" /></a>
    3. </li>

    Ejemplo: agregar video (flv format) de contenido

    1. <li>
    2. <a href="video.flv" alt="video"><img src="imagen.jpg" width="320" height="240" title="video" /></a>
    3. </li>

    Ejemplo: agregar audio record (mp3 format) de contenido

    1. <li>
    2. <a href="audio.mp3" alt="Audio"><img src="imagen.jpg" title="Audio" /></a>
    3. </li>

  • IdTabs – Tab simples, bonitos y fáciles de usar

    idtabs.jpg

    IdTabs es un plugin para jQuery. Que nos permite crear tab o añadir pestañas a nuestro sitio de una forma sumamente sencilla. Donde a su vez a estos tab podremos darle una apariencia o una funcionalidad completamente diferente, dependiendo donde pensamos utilizarlos. Básicamente jugar con los estilos y lograr por ejemplo cubos, a su vez jugando con imágenes, o bien los tab tradicionales, o tab interactuando con sitios externos mediante iframe, y otras opciones mas, igual de interesantes.

    Ver demo – Descarga Ejemplo – Leer mas en IdTabs

     

    Para utilizarlo necesitaremos de jquery , basta con descargar:

    y copiar y pegar el código siguiente en el < head >

    1. <script type="text/javascript" src="jquery.js"></script>

    Posteriormente nuestro script idTabs

    1. <script type="text/javascript">
    2.  
    3. (function($){
    4.   $.fn.idTabs = function(){
    5.     //Defaults
    6.     var s = { "start":null,
    7.               "return":false,
    8.               "click":null };
    9.  
    10.     //Loop Arguments matching options
    11.     for(var i=0; i<arguments.length; ++i) {
    12.       var n = {}, a=arguments[i];
    13.       switch(typeof a){
    14.         case "object": $.extend(n,a); break;
    15.         case "number":
    16.         case "string": n.start = a; break;
    17.         case "boolean": n["return"] = a; break;
    18.         case "function": n.click = a; break;
    19.       }; $.extend(s,n);
    20.     }
    21.      
    22.     //Setup Tabs
    23.     var self = this; //Save scope
    24.     var list = $("a[@href^='#']",this).click(function(){
    25.       if($("a.selected",self)[0]==this)
    26.         return s["return"]; //return if already selected
    27.       var id = "#"+this.href.split('#')[1];
    28.       var aList = []; //save tabs
    29.       var idList = []; //save possible elements
    30.       $("a",self).each(function(){
    31.         if(this.href.match(/#/)) {
    32.           aList[aList.length]=this;
    33.           idList[idList.length]="#"+this.href.split('#')[1];
    34.         }
    35.       });
    36.       if(s.click && !s.click(id,idList,self)) return s["return"];
    37.       //Clear tabs, and hide all
    38.       for(i in aList) $(aList[i]).removeClass("selected");
    39.       for(i in idList) $(idList[i]).hide();
    40.       //Select clicked tab and show content
    41.       $(this).addClass("selected");
    42.       $(id).show();
    43.       return s["return"]; //Option for changing url
    44.     });
    45.  
    46.     //Select default tab
    47.     var test;
    48.     if(typeof s.start == "number" && (test=list.filter(":eq("+s.start+")")).length)
    49.       test.click(); //Select num tab
    50.     else if(typeof s.start == "string" && (test=list.filter("[@href='#"+s.start+"']")).length)
    51.       test.click(); //Select tab linking to id
    52.     else if((test=list.filter(".selected")).length)
    53.       test.removeClass("selected").click(); //Select tab with class 'selected'
    54.     else list.filter(":first").click(); //Select first tab
    55.  
    56.     return this; //Chainable
    57.   };
    58.   $(function(){ $(".idTabs").each(function(){ $(this).idTabs(); }); });
    59. })(jQuery)
    60. </script>

    tab.jpg

    1. /* Style for Usual tabs */
    2. .usual {
    3.   background:#181818;
    4.   color:#111;
    5.   padding:15px 20px;
    6.   width:500px;
    7.   border:1px solid #222;
    8.   margin:8px auto;
    9. }
    10. .usual li { list-style:none; float:left; }
    11. .usual ul a {
    12.   display:block;
    13.   padding:6px 10px;
    14.   text-decoration:none!important;
    15.   margin:1px;
    16.   margin-left:0;
    17.   font:10px Verdana;
    18.   color:#FFF;
    19.   background:#444;
    20. }
    21. .usual ul a:hover {
    22.   color:#FFF;
    23.   background:#111;
    24.   }
    25. .usual ul a.selected {
    26.   margin-bottom:0;
    27.   color:#000;
    28.   background:snow;
    29.   border-bottom:1px solid snow;
    30.   cursor:default;
    31.   }
    32. .usual div {
    33.   padding:10px 10px 8px 10px;
    34.   *padding-top:3px;
    35.   *margin-top:-15px;
    36.   clear:left;
    37.   background:snow;
    38.   font:10pt Georgia;
    39. }
    40. .usual div a { color:#000; font-weight:bold; }

    Contenido

    1. <div class="usual" id="usual1">
    2.   <ul>
    3.     <li><a href="#tab1">Tab 1</a></li>
    4.     <li><a href="#tab2">Tab 2</a></li>
    5.     <li><a href="#tab3">Tab 3</a></li>
    6.   </ul>
    7.   <div id="tab1"> Contenido tab 1</div>
    8.   <div id="tab2"> Contenido tab 2</div>
    9.   <div id="tab3"> Contenido tab 3</div>
    10. </div>
    11.  
    12. <script type="text/javascript">
    13.   $("#usual1 ul").idTabs();
    14. </script>

    cubos.jpg

    1. #adv2 {
    2.   width:500px;
    3.   margin:6px auto;
    4.   background:#181818;
    5. }
    6. #adv2 ul {
    7.  display:block;
    8.  width:50px;
    9.  height:50px;
    10.  float:left;
    11.   text-decoration:none;
    12.  
    13. }
    14. #adv2 li { float:left; }
    15. #adv2 li.split { clear:both; }
    16. #adv2 li a {
    17.   display:block;
    18.   height:25px;
    19.   width:25px;
    20.   line-height:22px;
    21.   text-decoration:none;
    22.  background:#222;
    23.        color:#fff;
    24. list-style:none;
    25. }
    26. #adv2 li a:hover {
    27.   background:#0A0A0A;
    28. }
    29. #adv2 li a.selected {
    30.   background:snow;
    31.   color:#111;
    32.   font-weight:bold;
    33. }
    34.  
    35. #adv2 span {
    36.   height:50px;
    37.   display:block;
    38.   line-height:45px;
    39.   width:450px;
    40.   float:right;
    41.   background:#181818;
    42. }

    Contenido

    1. <div id="adv2">
    2.   <ul>
    3.     <li><a href="#ani1">1</a></li>
    4.     <li><a href="#ani2">2</a></li>
    5.     <li class="split"></li>
    6.  
    7.     <li><a href="#ani3">3</a></li>
    8.     <li><a href="#ani4">4</a></li>
    9.   </ul>
    10.   <span>
    11.     <p id="ani1"> Contenido opción 1 </p>
    12.     <p id="ani2"> Contenido opción 2 </p>
    13.     <p id="ani3"> Contenido opción 3 </p>
    14.     <p id="ani4"> Contenido opción 4 </p>
    15.   </span>
    16. </div>
    17.  
    18. <script type="text/javascript">
    19.   $("#adv2").idTabs(function(id,list,set){
    20.     $("a",set).removeClass("selected")
    21.     .filter("[@href='"+id+"']",set).addClass("selected");
    22.     for(i in list)
    23.       $(list[i]).hide();
    24.     $(id).fadeIn();
    25.     return false;
    26.   });
    27. </script>

  • Mocha UI: Generar ventanas flotantes con MooTools

    mootools-mocha-ui.jpg

    Mocha UI, es una librería bajo MooTools que nos permite generar ventanas flotantes o popups sobre nuestro contenido. Las ventanas, incluyen sus controles, gradientes y sombras, algo que las hace muy agradables. Las ventanas son completamente ajustables, por lo tanto podremos centrarlas, arrastrarlas, modificar su tamaño, restaurarlas o cerrarlas. En cuanto a su funcionamiento trabaja muy bien en Firefox 2, Internet Explorer 6 y 7, Safari 2, y Opera 9. Basta con ver el demo para descubrir lo agradable que se ve y la funcionalidad que podremos darle Mocha UI en nuestro sitio.

    Enlace MooTools Mocha UI

    Via Anieto2k


Pagina 9 de 12« Portada...456789101112