Cookies en Outbook

Esta web utiliza cookies propias para ofrecer una mejor experiencia. Al navegar, aceptas dichas cookies.
  • Más información acerca de las cookies

Outbook

UI-Dev & more

Simulación de elemento SELECT con jQuery

He preparado un componente que simula un elemento SELECT, en el que se puede seleccionar una sola opción, que evita algunas de las limitaciones de los elementos SELECT de verdad, pudiendo dar formato a las opciones que contiene, añadir imágenes, etc.

Consiste en un listado con elementos INPUT de tipo radio:

<div class="simulacion_select">
 <p class="etiqueta">Seleccionar imagen 1:</p>
 <div class="listado">
  <div class="listado_interior">
   <ul>
    <li class="primero"><label for="c_sel_1_1" class="clear"><input type="radio" name="c_sel" id="c_sel_1_1" /><span class="etiqueta"><img src="img/1.jpg" alt="" /><span class="texto">Imagen de prueba 1</span></span></label></li>
    [...]
    <li><label for="c_sel_1_10" class="clear"><input type="radio" name="c_sel" id="c_sel_1_10" /><span class="etiqueta"><img src="img/10.jpg" alt="" /><span class="texto">Imagen de prueba 10</span></span></label></li>
   </ul>
  </div>
 </div>
</div>

Como se ve en el ejemplo de código se trata de un listado de imágenes con un texto asociado.

Para conseguir la simulación es necesario un sencillo script que he montado como plugin de jQuery, ya que por fin encontré un tutorial sencillo de entender para crearlos (enlace externo):

jQuery.noConflict();
jQuery(document).ready(function () {
 jQuery('.simulacion_select').simulacionSelect();
});


(function($){
 $.fn.simulacionSelect = function(options){
  
  var op = {
   campo: 'input',
   etiqueta: 'span.etiqueta',
   elementoLista: 'li',
   capaListado: '.listado',
   claseJs: 'simulacion_select_con_js',
   claseEnlace: 'clear',
   claseSeleccionado: 'seleccionado',
   claseListadoSeleccionado: 'listado_seleccionado'
  }
  
  var datos = {
   capaInicial: '',
   campo: '',
   campoSeleccionado: '',
   enlace: ''
  }
  
  var options = $.extend(op, options);
  
  return this.each(function(){
   datos.capaInicial = $(this);
   datos.campo = elementos(op.campo);
   datos.etiqueta = elementos(op.etiqueta);
   datos.capaInicial.addClass(op.claseJs);
   modificarHtml();
  });
  
  function elementos (elemento) {
   return datos.capaInicial.contents().find(elemento);
  }
  
  function modificarHtml () {
   datos.campo.hide();
   datos.etiqueta.wrap('<a href="#" class="'+op.claseEnlace+'" />');
   datos.enlace = elementos('a.'+op.claseEnlace);
   interaccion();
  }
  
  function interaccion () {
   datos.campoSeleccionado = elementos('input:checked');
   if (datos.campoSeleccionado.length>0) {seleccionar();}
   datos.enlace.bind('click',function (ev) {
    ev.preventDefault();
    var campo = $(this).prev(op.campo);
    campo.attr('checked',true);
    datos.campoSeleccionado = campo;
    seleccionar();
   });
  }
  
  function seleccionar () {
   datos.campoSeleccionado.closest(op.elementoLista).addClass(op.claseSeleccionado).siblings('.'+op.claseSeleccionado).removeClass(op.claseSeleccionado);
   datos.campoSeleccionado.closest(op.capaListado).addClass(op.claseListadoSeleccionado);
  }
  
  
 }
})(jQuery);

Este script oculta los campos de tipo radio y envuelve el resto de elementos que hay dentro del LABEL dentro de un enlace. Al clicar dicho enlace se marca el campo de tipo radio. Este script presupone que todos los elementos del listado van a tener la misma altura.

Se puede ver ejemplo funcionando.

Publicado

Categorías: