No existe ninguna imagen

Escogido sencillo o múltiple de una lista usando jQuery (Primera parte)

*Nota: Esta es la primera parte de una serie (espero que sea de dos partes). Me pareció indicado primero mostrar cual es el resultado que idealmente queremos mostrar al usuario. La segunda parte espero discutir el tema de como hacer que todo funcione sin el uso de javascript

Estuve pensando un buen rato antes de decidirme en usar este título. Espero que sea evidente lo que quiero decir una vez vean el demo.

Como había mencionado antes, he estado trabajando en el nuevo C.M.S. el cual remplazará el que actualmente ofrezco a mis clientes. He estado buscando como aprovechar jQuery UI al máximo y una de ellas es el escogido de categorías, ya sea de productos o cualquier otro tipo. Antes usaba algo tan sencillo como un “dropdown menu” dinámico que listaba todas las categorías y el usuario podía escoger una de ellas. Debido a la necesidad de implementar funcionalidad adicional (mostrar sub-categorías, multi-selección de categorías) recurrí a varios métodos los cuales no me convencieron. Al comenzar de nuevo me di la oportunidad de re-plantear este problema. Este es el resultado de este experimento.

La solución es básicamente algo que he estado usando constantemente últimamente: Una lista no ordenada HTML (<ul>) y, para complementar, un jQuery dialogUI. De esa manera puedo organizar las categorías y las sub-categorías y mostrarlas de una forma más visiblemente organizada. También utilizo el plugin jQuery treeview para mantener la lista organizada.

El HTML es bastante simple (aunque se va a complicar un poco más en la segunda parte):

<a href="#" id="dialog_link">Escoja</a><span id="lable_cat_act"></span>
<div id="categ_container">
  <ul class="categoririas_list_ul">
    <li><a href="#nowhere">Lorem</a>
      <ul>
        <li><a href="#nowhere">Lorem</a></li>
        <li><a href="#nowhere">Aliquam</a></li>
        <li><a href="#nowhere">Morbi</a></li>
        <li><a href="#nowhere" >Praesent</a></li>
        <li><a href="#nowhere">Pellentesque</a></li>
      </ul>
    </li>
    <li><a href="#nowhere">Aliquam</a>
      <ul>
        <li><a href="#nowhere">Lorem</a></li>
        <li><a href="#nowhere">Aliquam</a></li>
        <li><a href="#nowhere">Morbi</a></li>
        <li><a href="#nowhere" >Praesent</a></li>
        <li><a href="#nowhere">Pellentesque</a></li>
      </ul>
    </li>
    <li><a href="#nowhere">Morbi</a></li>
    <li><a href="#nowhere" >Praesent</a></li>
    <li><a href="#nowhere">Pellentesque</a></li>
  </ul>
</div>
<input type="hidden" name="categorias" id="categorias" class="categorias" />

En este caso lo que hago es guardar el valor en input para que se pueda enviar el valor ya sea usando el formulario o por medio de ajax:

<input type="hidden" name="categorias" id="categorias" class="categorias" />

Primero incorporamos jQuery, jQuery UI y el treevire pluing, y las hojas CSS correspondientes:

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-treeview/jquery.treeview.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery-treeview/jquery.treeview.min.js" type="text/javascript"></script>

Al principio intenté utilizar el selectable de jQuery UI pero tuve algunos problemas tratando de que se seleccionen sólo los enlaces y también debido a que la listas eran mul-tinivel. Es por eso que decidí trabajar el código que realmente necesito.

Primero asignamos los dialogs y las opciones:

//opciones de ambos dialogs
$("#categ_container").dialog({
	autoOpen: false,
	modal: true,
	height: 400,
	buttons: {
		"Ok": function() {
			$(this).dialog("close");
		}
	}
});

//categorias sencillas
$("#dialog_link").click(function(){
	$("#categ_container").dialog("open");
	return false;
});

Dependiendo si es escogido sencillo o múltiple el código varía. Para el escogido sencillo:

//para categorias sencillas
$('#categ_container a').click(function(){

	var linkActivo = $(this);
	var htmlActual = $(this).html();
	var categoria = linkActivo.next().val();

	$('#categ_container a').removeClass('cat_selected');
	linkActivo.addClass('cat_selected');
	$('#sub-categoria').attr('value', categoria);
	$('#lable_cat_act').html(htmlActual);
	$('#categorias').val(htmlActual);

	return false;
})

Para el escogido múltiple:

//para categorias multiples
$('#categ_container a').click(function(){
	var linkActivo = $(this);
	var categoria = '';
	var htmlActual = '';

	linkActivo.toggleClass('cat_selected');

	$('#categ_container a.cat_selected').each(function(){
		var enlace = $(this);
		var coma = ', ';
		htmlActual += enlace.text() + coma;
		categoria += enlace.next().val() + ' ';

	});

	$('#sub-categoria').attr('value', categoria);
	$('#lable_cat_act').html(htmlActual.slice(0,-2));
	$('#categorias').val(htmlActual.slice(0,-2));

	htmlActual = '';
	categoria = '';

	return false;

})

Con este código puedes tener una de las dos opciones en una misma página. Para tener los dos a la vez puedes ver ejemplo que ofrezco en el demo.

Be Sociable, Share!
  • marilina

    Lo pruebo y aviso que tal se adapta a lo mio. Pero parece estar muy bueno

    • http://juaniquillo.com/blog/members/juaniquillo/ juaniquillo

      Yo estoy pensando rehacerlo ya que lo estaba mirando el otro día y vi que se puede optimizar mejor y hasta convertirlo en un plugin.