Pagify.js – Ajax page load

50Okunma
3 yorum

Pagify.js

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>
Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-03-01 tarihinde yayınlandı,Toplam 1343 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(3 yorum)
Yükleniyor...
Barış Yorumcu LV.1
2014-08-13 12:01:20 回 Yanıtla

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

    Ali Blogger
    2014-08-15 00:31:32 回 Yanıtla

    @Barış 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.

nas Yorumcu LV.1
2015-10-16 09:57:38 回 Yanıtla

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