Skip to content

Instantly share code, notes, and snippets.

@cbertelegni

cbertelegni/index.html

Last active December 16, 2015 10:39
Show Gist options
  • Save cbertelegni/5421742 to your computer and use it in GitHub Desktop.
Save cbertelegni/5421742 to your computer and use it in GitHub Desktop.
Download ZIP
Plugin Jquery para UL anidadas. show & hide ul
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@cbertelegni - test</title>
<meta name="description" content="" />
<style type="text/css">
li ul {display: none;}/* importante que las ul anidadas esten en display: none */
li {cursor: pointer;}
</style>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.hideshowlist.min.js"></script>
<script type="text/javascript">
// ejemplo de uso
$(function(){
$(".pais").hideshowlist(callback);
});
var callback={
afterClickLi: function(nodoHtml){ console.log(nodoHtml)}, // se ejecuta al click de los li
afterShowUl: function(nodoHtml){ console.log(nodoHtml)} // // se ejecuta después de mostrar un ul escondido
}
</script>
</head>
<body>
<h1>Test .hideshowlist() plugin for @cbertelegni</h1>
<ul class="pais">
<li>Argentina
<ul>
<li>BUENOS AIRES
<ul>
<li>CAPITAL FEDERAL</li>
</ul>
</li>
<li>CATAMARCA</li>
<li>CHACO</li>
<li>CHUBUT</li>
<li>CORDOBA</li>
<li>CORRIENTES</li>
<li>ENTRE RIOS</li>
<li>FORMOSA</li>
<li>ISLAS MALVINAS</li>
<li>JUJUY</li>
<li>LA PAMPA</li>
<li>LA RIOJA</li>
<li>MENDOZA</li>
<li>MISIONES</li>
<li>NEUQUEN</li>
<li>RIO NEGRO</li>
<li>SALTA</li>
<li>SAN JUAN</li>
<li>SAN LUIS</li>
<li>SANTA CRUZ</li>
<li>SANTA FE</li>
<li>SANTIAGO DEL ESTERO</li>
<li>TIERRA DEL FUEGO</li>
<li>TUCUMAN</li>
</ul>
</li>
</ul>
</body>
</html>
Raw
jquery.hideshowlist.js
// @cbertelegni - web developer
// requiere : jquery
// callback es un obj que puede recibir dos metodos (no es obligatorio):
/*
var callback{
afterClickLi: function(nodoHtml){ console.log(nodoHtml)}, // se ejecuta al click de los li
afterShowUl: function(nodoHtml){ console.log(nodoHtml)}, // // se ejecuta después de mostrar un ul escondido
afterHideUl: function(nodoHtml){ console.log(nodoHtml)} // // se ejecuta después de mostrar un ul escondido
}
*/
jQuery.fn.extend({
hideshowlist: function(callback){ // navegacion desde lista
callback ? callback : callback = {};
var $this = $(this);
var oNav = $this.find("li:has(ul)");
var option = $this.find("li:not(:has(ul))");
option.bind("click", function(){ // evento click sobre los items
if(callback.afterClickLi) callback.afterClickLi(this);
return false;
});
oNav.click(function(){ // muestra ul
var $ul = $(this).find("> ul");
if($ul.is(":animated")){
return false;
}
if($ul.is(":hidden")){
$ul.slideDown(300);
if(callback.afterShowUl) callback.afterShowUl(this);
}else{
$ul.slideUp(300);
if(callback.afterHideUl) callback.afterHideUl(this);
}
return false;
});
}
});
Raw
jquery.hideshowlist.min.js
jQuery.fn.extend({hideshowlist:function(callback){callback?callback:callback={};var $this=$(this);var oNav=$this.find("li:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment