Üye Girişi Yapınız     


    E-Posta
    

    Şifreniz
    



Şifremi Unuttum


Ana Sayfa Site Hakkında İletişim Ziyaretçi Defteri Döküman İndir Makale Ekle Haber Ekle

     Jquery ile tümünü göster uygulaması
     gürcü     26.01.2014     21:54:25

Örneğimizde de gördüğünüz gibi 5 seçenek açık durumda. Tümünü göster(16) bağlantısına tıkladığımızda, kalan 11 seçeneğinde yavaş açılır şekilde açıldığını göreceksiniz. Kodları kopyalayıp html olarak mkaydediniz ve tarayıcıda deneyiniz.



<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
 $(function(){
  var a = $("ul li").length;
  if( a > 5)
  {
  $("ul li:gt(4)").hide()
  $("ul").append("<li><a id=’tum’ href=’#’>Tumunu goster ("+(a-5)+")</a></li>");
  }
  $("a#tum").click(function(){
  var zaman = 0;
  $("ul li:hidden").each(function(){
  zaman = zaman + 150;
  $(this).delay(zaman).fadeIn();
  })
  $(this).hide();
  return false;
  })
 })
 </script>
 <style> 
  *{
  margin:0px;
  padding: 0px;
  list-style: none;
  border: 0px;
  text-decoration: none;
  }
  ul{
  width: 200px;
  margin: 20px;
  border: 1px solid #ddd;
  }
  ul li a {
  display: block;
  padding: 10px 15px;
  color: #888;
  border-bottom: 1px solid #ddd;
 
  }
  ul li a:hover {
  color: #000;
  }
  #tum{
  background-color:#e5e5e5;
  }
 </style>
 </head>
<body>
<ul>
<li><a href="#">deneme1</a></li>
<li><a href="#">deneme2</a></li>
<li><a href="#">deneme3</a></li>
<li><a href="#">deneme4</a></li>
<li><a href="#">deneme5</a></li>
<li><a href="#">deneme6</a></li>
<li><a href="#">deneme7</a></li>
<li><a href="#">deneme8</a></li>
<li><a href="#">deneme9</a></li>
<li><a href="#">deneme10</a></li>
<li><a href="#">deneme11</a></li>
<li><a href="#">deneme12</a></li>
<li><a href="#">deneme13</a></li>
<li><a href="#">deneme14</a></li>
<li><a href="#">deneme15</a></li>
<li><a href="#">deneme16</a></li>
<li><a href="#">deneme17</a></li>
<li><a href="#">deneme18</a></li>
<li><a href="#">deneme19</a></li>
<li><a href="#">deneme20</a></li>
<li><a href="#">deneme21</a></li>
</ul>
 </body>
 </html>

Facebook'ta Paylaş    
Diğer AJAX İçerikleri       Tüm Yazılar        Ana Sayfa


  =>Soru Sorun veya Yorum Yazın...

İsim Giriniz :
  

  =>Yapılan Yorumlar...