Pagify.js – Ajax page load

pagify1

pagify

Herhangi bir kategori linkine tıklandığında  web sayfası yenilenmeden aynı sayfa içine tıklamış olduğunuz linki çağırmaya yarayan bir uygulama.  Bir çoğumuz bu özelliği ilk önce Facebook sitesinde görmüştür. Zaten Facebook ne yapıyorsa ardından benzer uygulamalar da çıkıyor yavaş yavaş. Bir aralar çok aramama rağmen bir türlü bulamadığım bir özellikti benim için. Chris Polis tarafınan yapılan Pagify.js ile  çok kolay bir şekilde bu özelliğe sahip sayfalar hazırlayabilirsiniz. Html ile kaydedilmiş olan dosyaları sunucuya attıktan sonra menü ile bunları çağırmanız yeterli.  Tıklamış olduğunuz linkler ile alakalı olan dosya page_holder divi içinde açılıyorlar.

Kullanım
  • Head etiketleri arasına eklenmesi gereken bölümler.
Js dosya adresleri :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="../pagify.js" type="text/javascript"></script>

JavaScript :

    <script type='text/javascript'>
      $(document).ready(function() {
        $('#page_holder').pagify({
          pages: ['about', 'usage', 'options'],
          animation: 'fadeIn',
          'default': 'about',
          cache: true
        });
      });
    </script>
  • Body  etiketleri arasına eklenmesi gereken bölüm.

Html :

Bu  kısım sadece  linkleri oluşturuyor. Kendinize  göre  link  ayarlaması  yapmanız gerekiyor.

<div id='container'>
   <header><nav>
    <a href='#about'>About</a>
    <a href='#usage'>Usage</a>
    <a href='#options'>Options</a>
    <a href='http://mintik.com'>Mintik</a>
   </nav>
</header>
<div id='page_holder' />
</div>
3 Comments

Leave a Comment

  • nas

    bende aynı şekilde denedin ama çalışmıyor .

    Cevapla
  • Barış

    Merhaba ben bu projeyi masa üstüne indirdiğimde çalışmıyor kendi web siteme yüklediğimde yine çalışmıyor. div de yazılar görünmüyor. Ekran görüntüsü şu şekilde http://i59.tinypic.com/1zf76sl.jpg

    Cevapla
    • Ali

      Haklısınız download adresindeki sürümde bir problem var. Sanırım sürüm güncellenmeiş. En kısa zamanda sitemdeki örneği ftp dizinine atarak linki güncellerim sizin için. Çoğu elenti güncellendikten sonra kullanılmaz hale gelebiliyor. İyi ki demosunu siteme yüklemişim.