Este plugin permite seleccionar múltiples listas jquery utilizando como estilo css a nuestro querido bootstrap, permitiendonos cargarlos en forma de objeto JSON .
Su configuración es muy sencilla y su instalación no es nada del otro mundo , vamos a ver que archivos vamos a utilizar..
• index.html
• jquery.multilistbootstrap_plugin.js
Dentro de index.html vamos a colocar el enlace del estilo de bootstrap utilizando sus CDN .
Adicional enlazamos el archivo jquery multilistbootstrap_plugin.js y un script correspondientemente para realizar la selección multiple jquery..
Enlazamos la librería jQuery descargandola o desde sus CDN Hosted.
<!--estilo bootstrap--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!--archivos jquery a enlazar--> <script src="http://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="jquery.multilistbootstrap_plugin.js"></script> <!--configuracion del script--> <script type="text/javascript"> $("#demo").MultiList({ title: "Programadores", showAddon: true, data:{ dataSource: [{ "texto": "Programador Php jQuery html", "cantidad": 10 }, { "texto": "Programador java", "cantidad": 7 }, { "texto": "Experto en seguridad integral de redes", "cantidad": 12 }, { "texto":"Analista de sistema", "cantidad": 20 }], dataRender: { colText: "texto", colAddon: "cantidad" } } }); </script>
Dentro del body enlazamos con una <ul> el id del script para poder utilizarlo.
<div class="container"> <div class="row"> <div class="col-md-12 well"> <ul id="demo"> </ul> </div> </div> </div>
El archivo jquery.multilistbootstrap_plugin.js :
(function($) { $.fn.extend({ MultiList: function (objeto) { var defaults = { showTitle: true, title: "MultiLista", showAddon: true, colorFont: "black", backgroundColor: "white", data: {} }, objeto = $.fn.extend({}, defaults, objeto), $this = $(this), $data = objeto.data, $contador = 0; if (objeto.showTitle) { $this.before("<h3>"+ objeto.title +"</h3>"); } if ($data.dataRender == undefined) { for(var i in $data.dataSource){ $this.append("<li>"+ $data.dataSource[i] +"</li>"); } }else{ var d_drender = { colText: "text", colAddon: "addon" } var d_drender_o = $.fn.extend({}, d_drender, $data.dataRender), col = d_drender_o.colText, addon = d_drender_o.colAddon; for(var i in $data.dataSource){ $this.append("<li>"+ $data.dataSource[i][col] + "<span class='badge'> "+ $data.dataSource[i][addon] +"</span></li>"); } } var $li = $this.children("li"); $li.css("color", objeto.colorFont); $li.css("background-color", objeto.backgroundColor); $this.addClass("list-group"); $li.addClass("list-group-item"); $li = $this.children("li"); $li.click(function () { $(this).toggleClass("active"); if (objeto.showAddon) { $contador = get_selected_items(); if($("#multilistPassignAfter").length == 0) { $this.after("<p id='multilistPassignAfter'>"+ $contador +"</p>"); }else{ $("#multilistPassignAfter").html($contador); } } }); function get_selected_items() { var sum = 0; $li.each(function () { if ($(this).hasClass("active")) { sum ++; } }); return sum; } } }); })(jQuery)
Espero esta forma de seleccionar múltiples listas jquery les sirva en algún proyecto saludos …