Paginador Jquery ui efecto explosión (Jquery ui Pager explosion effect)
by Luis Rodriguez on Feb 08, 2012
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>index</title>
<meta name="description" content="" />
<meta name="author" content="HP" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link type="text/css" href="ui/css/interfaz-de-usuario-de-la-ligereza/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(document).ready(function() {
var i=0;
$('#nav li').hide();
$('#nav li').eq(0).show('explode',1000);
$('#bot').click(function() {
$('#nav li').hide();
i=i+1;
if(i<=3){
$('#nav li').eq(i).show('explode',1000);
}else{alert('no hay más páginas')}
});
});
</script>
<style>
li{background: orange;height: 300px; width: 200px;list-style: none;}
</style>
</head>
<body>
<div>
<header></header>
<nav></nav>
<section>
<div id="bot">CLICK</div>
<ul id="nav">
<li><a href="#"></a>1</li>
<li><a href="#"></a>2</li>
<li><a href="#"></a>3</li>
<li><a href="#"></a>4</li>
</ul>
</section>
<footer></footer>
</div>
</body>
</html>