English Português

jquery-tipos-de-archivos

Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:

a[href $='.pdf'] {
padding-right: 20px;
background: url(icono-pdf.gif) no-repeat right;
}

Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librería jQuery.

  1. Descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.
    <script type="text/javascript" src="jquery.js"></script>
  2. Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana.
    <script type="text/javascript">
    $(document).ready(function(){
    
    //Definición de clases para cada tipo de archivo.
        $("a[@href$=pdf]").addClass("pdf");
    
        $("a[@href$=zip]").addClass("zip");
    
        $("a[@href$=doc]").addClass("doc");
    
    //Estilos y atributos a los enlaces externos.
        $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
          .addClass("externo")
          .attr({ target: "_blank" });
    
    });
    </script>
  3. Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique:
    .pdf {
    padding-left: 20px;
    background: transparent url(icono-pdf.png) left top no-repeat;
    }
    
    .zip {
    padding-left: 20px;
    background: transparent url(icono-zip.png) left top no-repeat;
    }
    
    .doc {
    padding-left: 20px;
    background: transparent url(icono-doc.png) left top no-repeat;
    }
    
    .externo {
    padding-left: 20px;
    background: transparent url(icono-ext.png) left top no-repeat;
    }

    Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.

  4. Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo:
    <div id="enlaces">
    	<p><a href="documento.pdf">Archivo PDF</a></p>
    	<p><a href="documento.zip">Archivo ZIP</a></p>
    	<p><a href="documento.doc">Archivo DOC</a></p>
    	<p><a href="http://btemplates.com">BTemplates - enlace externo</a></p>
    	<p><a href="http://serturista.com">Ser Turista - enlace externo</a></p>
    	<p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p>
    	<p><a href="#enlaces">Enlace local #</a></p>
    </div>

Demo | Descargar ejemplo

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. ProDigital / Hace 9 años /

      muy bueno!
      saludos

      Responder a ProDigital →
    2. BluesMaster / Hace 8 años /

      Muy buen artículo, por aquí otro fanatico de jquery ;D

      Responder a BluesMaster →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad