mintik

Genelde Facebook sitesinin vazgeçmediği özelliklerden bir tanesidir. Resim tıklarsınız  sayfa yenilenmez  ve tıkladığınız resim aynı sayfada açılır. Bu şekilde  kullanıcı sürekli başka sayfaya gidip geri gelmek zorunda da kalmaz. Ben linklere  tıklarken sürekli yeni sekmede  açarım asıl içinde olduğum sayfayı kaybetmemek için. Bu anlamda Facebook sitesi çok  işe yarıyor. Sadece resimler için de değil tabi. Videolarda aynı şekilde sayfa içinde yükleniyor. Anasayfada yaptığınız işlemlerin bir çoğu sayfa yenilenmeden gerçekleşiyor. jQuery  jNavigate  uygulaması da  bu tarz çalışmalar hazırlayabilmeniz için geliştirilmiş. Linklere tıkladığınızda sayfa yenilenmeden ajax ile diğer sayfaları aynı sayfa içine çekmeye yarıyor.

 

Kullanım

• Head  etiketleri arasına eklenmesi gereken bölümler.

Dosya adresleri :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/jnavigate.jquery.js"></script>

 JavaScript :

  <script>
    $(function () {
      $("#main").jNavigate({
          extTrigger: ".ext-trigger",
          intTrigger: ".trigger",
          loaded: utilsDemos
      });
      $("#kill").click(function (ev) {
        ev.preventDefault();
        $("#main").jNavigate("destroy");
      });
      utilsDemos(); // just in case user landed on utils page!
    });

    function utilsDemos () {
      $("#loadingDemo").unbind().click(function (ev) {
        ev.preventDefault();
        var $box = $("#loadingBox")
          , $loading = $box.data("jnavigate-overlay");
        if (!$loading) {
          $box.jNavigate("overlay");
          $loading = $box.data("jnavigate-overlay");
          $(this).text("Remove loading overlay");
        } else if ($loading.is(":hidden")) {
          $(this).text("Remove loading overlay");
          $loading.fadeIn(250);
        } else {
          $(this).text("Add loading overlay");
          $loading.fadeOut(400);
        }
      });
      $("#navigateDemo").unbind().click(function (ev) {
        ev.preventDefault();
        $("#navigateBox").jNavigate("navigate", {
            url: this.href
          , useHistory: false
        });
      });
    }
  </script>

•  Body etiketleri arasına eklemeniz gereken bölümler.

Html :

    <nav id="main-nav">
      <ol>
        <li><a class="ext-trigger" href="index.php?page=home">jNavigate home</a></li>
        <li><a class="ext-trigger" href="index.php?page=docs">Documentation</a></li>
        <li><a class="ext-trigger" href="index.php?page=form">Form example</a></li>
        <li><a class="ext-trigger" href="index.php?page=utils">Utility methods</a></li>
        <li><a class="ext-trigger" href="index.php?page=lorem">Kill jNavigate</a></li>
      </ol>
    </nav>

 Menüler tıkladığında içeriğin görüntüleneceği  alan kodu :

    <div id="main">
      <?php load_partial(); ?>
    </div>

Linklere tıkladığınızda  functions.php  devreye  girer  ve  url adresinin sonuna eklediğiniz  html sayfanın ismini functions.php de ayarlanmış olan klasörün içinde bulup ana sayfada  görüntüler.  Functions.php  dosyasının index.php üzerinde  çalışabilmesi için <document bölümünden önce yani sayfanın en üstüne functions.php dosyasını  çağıran kodu eklemeniz  gerekiyor.

<?php 
  require_once 'inc/functions.php';
  if (array_key_exists('jnavigate', $_GET) || 
      array_key_exists('jnavigate', $_POST)) {
    load_partial();
  } else { 
?>

Kaynak  kodları anlatmam  bana biraz saçma  gibi  geliyor ama  işin aslına bakınca  buraya gelen herkes  herşeyi bilse  zaten bu siteye  ihtiyacı olmaz  diye  düşünüyorum.  Bu yüzden  neyin ne işe yaradığını anlatma  ihtiyacı duydum. Gerçi  bu anlattıklarımı yapmak  zorunda  değilsiniz.  Download  adresinden indireceğiniz dosyaların  içinde herşey  hazır  ve kurulu  bulunuyor.  Sadece  Html sayfaların içeriğini  ve menüleri bile kendinize göre uyarlarsanız tanıtım amaçlı  oluşturulan  websiteleri  gibi  kullanabilirsiniz.

İlk  zamanlarda  ajax örnekler her zaman ilgimi çekmiştir. Web üzerinden çok araştırmama  rağmen  herhangi  bir  sonuç  bulamazdım bu konuda. Bulduğum tek tük örnekler ise  parayla  satılan  türlerdi. Benim amacım ise  öğrenmekti. Satın alıpta ne yapacaktım sanki. Nedir bu ajax  nasıl  çalışıyor.  Eh işte  bulduk size bir tane  ücretsiz  ve küçük boyutlu.  Sadece  css  bilginiz  varsa  bile sayfayı  demoyu evirip  çevirim güzel bir  tasarım örneği  haline  getirebilirsiniz.