jNavigate – Ajax İçerik Yükleme Eklentisi

08 Ocak 2013 | Kategori: jQuery,Php Scriptler,Webmaster | Yazar: mintik

Phil Parsons tarafından geliştirilen jNavigation eklentisi facebook tarzı sayfa yenilenmeden başka bir sayfayı ajax ile çekmeye yarayan bir eklentidir. Demo sayfasında harici sayfa yükleme veya belirlemiş olduğunuz bir çerçeve içerisine başka bir sayfadaki yazıları çekebiliyorsunuz.

Download

Demo

Kullanım

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

jQuery ve eklenti url adresleri :

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

1 2	<script src="http://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>

$(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.

Menü :

    <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>

<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>

<?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 { 
?>

<?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.