Como hacer un plugin de JQuery

La idea es sencilla, crear un plugin que nos permita jugar un poco con los elementos del DOM de una página. Es importante tener en cuenta el estilo que se debe seguir en Javascript cuando se programa algo en jQuery. Hay muchos tutoriales en internet al respecto, pero intentaré explicar bien cada paso para que sepas que se va haciendo en cada sitio.

Montaré un plugin básico que será una lista seleccionable que actuará sobre un elemento y sus hijos, por ejemplo este HTML:

<ul id="opciones">
  <li>elemento1</li>
  <li class="selected">elemento2</li>
  <li>elemento3</li>
  <li>elemento4</li>
  <li>elemento5</li>
</ul>

Entonces el plugin se ejecutará de esta manera sobre el DOM:

//encontraremos un elemento y haremos que sus elementos sean seleccionables.
$('ul#opciones').listaSeleccionable({ 
    multiple : false,
    onSelect : function(elems){  //en esta funcion se ejecutará código al seleccionar uno o varios elementos "elems"
        //mostrar en la consola los elementos seleccionados.
        console.log(elems);
    }
});

Leer más …