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