Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Desarrollo web que contiene a Javascript que contiene a Jquery: lista de definición con flotaciones

Datos de búsqueda

Jquery: lista de definición con flotaciones

Al utilizar una lista de definición en la que los términos (elemento DT) y las definiciones (elemento DD) deben ir en una misma línea (por ejemplo el DT flotado a la izquierda y el DD flotado a la derecha) surge un pequeño inconveniente: los elementos se descolocan en cuanto hay alguno que tenga una altura distinta.

Trasteando con la propiedad CSS clear hay navegadores en los que parece solucionarse, pero Internet Explorer (y sobre todo en su sexta versión) sigue mostrándolo mal.

Por ello he creado un plugin Jquery que permite solucionar el problema de las alturas, igualándolas cuando resulta necesario. El plugin añade una clase al elemento al que se aplica, de modo que se pueden dar estilos distintos cuando no hay Javascript, por ejemplo, con cada elemento ocupando la línea entera.

Ver ejemplo funcional.

HTML

Una lista de definición con la clase lista_definicion que será la que se utilice en la llamada al plugin de Jquery:

<dl class="lista_definicion clear">
  <dt>[...]</dd>
    <dd>[...]</dd>
  <dt>[...]</dd>
    <dd>[...]</dd>
  <dt>[...]</dd>
    <dd>[...]</dd>
</dl>

Javascript

La llamada al plugin:

jQuery(document).ready(function () {
  jQuery('.lista_definicion').listaDefinicion();
});

Y el plugin:

(function($){
$.fn.listaDefinicion = function(options){
var defaults = {
  // Clase que se le dará al elemento cuando hay soporte JS
  claseJs: 'lista_definicion_js'
};
var datos = {};

var op = $.extend(defaults, options);

return this.each(function(){
  $(this).addClass(op.claseJs);
  $(this).find('dt').each(function () {
    var termino = $(this);
    var definicion = $(this).next();
    
    var alturaTermino = termino.outerHeight(true);
    var alturaDefinicion = definicion.outerHeight(true);
    
    if (alturaDefinicion>alturaTermino) {
      var diferencia = alturaDefinicion-alturaTermino;
      var margen = parseInt(termino.css('margin-bottom'));
      termino.css('margin-bottom',(margen+diferencia)+'px');
    }
    if (alturaTermino>alturaDefinicion) {
      var diferencia = alturaTermino-alturaDefinicion;
      var margen = parseInt(definicion.css('margin-bottom'));
      definicion.css('margin-bottom',(margen+diferencia)+'px');
    }
  });
});

}})(jQuery);

Comentarios del artículo

Los comentarios están cerrados.

Si el comentario no guarda relación con el tema del artículo o los comentarios previos, si la redacción del mismo es ilegible (estilo HOYGAN), o si contiene insultos u otros términos ofensivos, será borrado de inmediato. No se garantiza ningún soporte a los ejemplos de desarrollo web presentados en este sitio.

Todavía no hay comentarios.

Los comentarios están cerrados.

Información del sitio