Outbook

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

Inicio que contiene a Desarrollo web que contiene a HTML 5 que contiene a Jquery: soporte de elemento DETAILS en HTML 5

Datos de búsqueda

Jquery: soporte de elemento DETAILS en HTML 5

El elemento DETAILS en HTML 5 proporciona un área de contenido desplegable. Inicialmente se muestra un elemento SUMMARY que será con el que se alterne la visibilidad del contenido.

Actualmente hay navegadores con cierto soporte de HTML 5, pero aun ninguno soporta el comportamiento que ha de tener el elemento DETAILS. Por ello he creado un plugin de Jquery con el que añadir la funcionalidad adecuada al elemento en aquellos navegadores que no lo soporten.

El script genera además un enlace dentro del elemento SUMMARY, de modo que en navegadores sin soporte hay un elemento que pueda tener el foco.

Ver ejemplo funcional.

HTML

Ejemplo de elemento DETAILS:

<details>
  <summary>[Texto visible al inicio]</summary>
  [Contenido oculto al inicio]
</details>

Javascript

La llamada al plugin:

jQuery(document).ready(function () {
  jQuery('details').htmlDetails();
});

Y el código del plugin (el código lleva algunos comentarios útiles):

(function($){
$.fn.htmlDetails = function(options){
var defaults = {
  selectorCapaDetalle: '.bloque-detalle'
  ,htmlCapaDetalle: '<div class="bloque-detalle" />'
  ,clasePlegado: 'detalle-plegado'
  ,textoMostrar: 'Mostrar detalle'
  ,textoOcultar: 'Ocultar detalle'
};
var datos = {};

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

return this.each(function(){
  var componente = $(this);
  iniciarComponente(componente);
});

function iniciarComponente (componente) {
  // Verificación de ausencia de soporte para el elemento
  if (!('open' in document.createElement('details'))) {
    // Si no hay soporte, se continúa
    plegarContenido(componente);
  }
  
}

function plegarContenido (componente) {
  /* Se pliega el contenido, y se añade una capa por encima de los
  elementos (que será a la que se alterne la visibilidad) */
  componente.children(':not(summary)').wrapAll(op.htmlCapaDetalle);
  var detalle = componente.children(op.selectorCapaDetalle);
  detalle.hide();
  prepararEnlace(componente,detalle);
}

function prepararEnlace (componente,detalle) {
  /* El elemento SUMMARY no va a coger el foco 
  al no haber soporte, habrá que añadirle un 
  elemento que pueda coger foco */
  var titulo = componente.find('summary').eq(0);
  var texto = titulo.text();
  titulo.html('<a href="#">'+texto+' (<span>'+op.textoMostrar+'</span>)</a>');
  titulo.addClass(op.clasePlegado)
  alternarDetalle(detalle,titulo);
}

function alternarDetalle (detalle,titulo) {
  titulo.find('a').bind('click',function (event) {
    event.preventDefault();
    alternarTexto($(this));
    titulo.toggleClass(op.clasePlegado);
    detalle.toggle();
  })
}

function alternarTexto (enlace) {
  var elementoTexto = enlace.find('span').eq(0);
  var texto = elementoTexto.text();
  if (texto==op.textoMostrar) {
    elementoTexto.text(op.textoOcultar);
  } else {
    elementoTexto.text(op.textoMostrar);
  }
}

}})(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.

Hay un comentario a “Jquery: soporte de elemento DETAILS en HTML 5”

miguel_23 dice:

Fecha de comentario: 2013/10/26 10:11

Sorry por la pregunta pero me pueden dejar una Quia de como insertar la llamada al plugin y los demás datos JQ

Gracias.

Información del sitio