Jquery de daha fazla göster yapımı
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
var l = $('ul li').length;
if ( l > 5 ){
$('ul li:gt(4)').hide().addClass('hide');
$('ul').append('<li><a href="#" id="tumu">Tümünü Göster ('+(l - 5)+')</a></li>');
}
var i = 0;
$('a#tumu').click(function(){
var time = 100;
if ( i == 0 ){
$('ul li:hidden').each(function(){
time = time + 150;
$(this).delay(time).fadeIn(300);
})
$(this).text('Gizle ('+(l - 5)+')');
i++;
} else {
$('ul li.hide').each(function(i){
time = time + 150;
$('ul li:not(:last):eq('+ ( (l - 1) - i ) +')').delay(time).fadeOut(300);
})
$(this).text('Tümünü Göster ('+(l - 5)+')');
i = 0;
}
return false
});
});
</script>
</head>
<body>
<center>
<ul>
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
<li><a href="#">test5</a></li>
<li><a href="#">test6</a></li>
<li><a href="#">test7</a></li>
<li><a href="#">test8</a></li>
<li><a href="#">test9</a></li>
<li><a href="#">test10</a></li>
<li><a href="#">test11</a></li>
<li><a href="#">test12</a></li>
<li><a href="#">test13</a></li>
<li><a href="#">test14</a></li>
<li><a href="#">test15</a></li>
<li><a href="#">test16</a></li>
<li><a href="#">test17</a></li>
<li><a href="#">test18</a></li>
</ul>
<center>
</body>
</html>
Daha fazla göster JS
4/
5
Oleh
Adsız
