Ancak bunu yapmadan önce, CSS'imize bir satır eklememiz gerekiyor, bu örnek için tüm CSS dosyasını gözden geçirmeye gerek yok, çünkü sadece üzerinde çalıştığınız herhangi bir proje ile değişecek olan sadece görünümler için. Ancak, bu ilk yöntemle, temel olan bir satır var ve bu:

#page2, #page3, #page4 {display: none;}

Bu ilk hariç tüm 'sayfaları' gizler. Böylece sayfa normalde ilk yükte görünür.

JavaScript

Şimdi jQuery ile elde etmek için neye ihtiyacımız olduğunu açıklamak. Custom.js dosyasımızda, kullanıcı bir gezinme bağlantısını tıkladığında hedeflemeliyiz. Href bağlantısını alın ve aynı kimliğe sahip 'bölümü' bulun, sonra # ana içerik div'undaki her şeyi gizleyin ve yeni bölümde kaybolun. Göründüğü gibi:

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$('#main-content section').hide();$($linkClicked).fadeIn();return false;}  else {return false;}}); var hash = window.location.hash; hash = hash.replace (/ ^ # /, ''); geçiş (sağlama) {case 'page2': $ ("#" + hash + "-link"). tetikleyici ("tıklayın"); break; case 'page3': $ ("#" + hash + "-link"). tetikleyici ("tıklayın"); break; case 'page4': $ ("#" + hash + "-link"). tetikleyici ("tıklayın"); break;}}); 

Bu kod iki bölüme ayrılmıştır, ilk önce konuştuğumuz şeyi başarır. Başlık nav bağlantılarında bir tıklama işlevi vardır. Ardından '# page1, # page2' vb. $ LinkClicked adlı bir değişkene koyar. Daha sonra, aynı karma adın olması için tarayıcının URL'sini güncelleriz. Ardından, tıklattığımız bağlantının geçerli sekme olmadığından emin olmak için bir if var, eğer hiçbir şey yapmazsak, ancak tüm mevcut içeriği gizlemezseniz ve div'u $ linkClicked kimliğiyle göstermezsek. Bu kadar basit!

İkinci bölüm, url'nin sonunda bir karma bağlantının olup olmadığını kontrol eder, eğer varsa, sayfada aynı değere karşılık gelen bir bağlantı bulur (bu yüzden bağlantıların işaretlemede belirli kimlikleri vardır) ve sonra bunu tetikler. bağlantı (üzerine tıklar). Bunun anlamı, kullanıcının bir 'sayfaya' geçtikten sonra bir sayfayı yeniden yükleyebileceği ve yenilemenin yalnızca ilk sayfaya değil, kullanıcının bu tür bir sistemle ilgili bir sorun olabileceği yere geri göndereceği anlamına gelir.

Yani bu, ilk yöntemin sonu, bu da anlık içerik değişiminin olduğu ve sayfanın yeniden yüklenmediği çalışan statik bir siteyle sonuçlanır. Bu yöntemin tek dezavantajı, tüm içeriğin ilk yükte olduğu gibi dizin dosyasında olduğu gibi çağrılmasıdır. Bu, ilk site ziyareti yükünün biraz daha uzun sürmesini sağlayan fotoğraflar ve ekstra içerikle ilgili bir sorun olmaya başlayabilir. Yani bu sorunu ortadan kaldıracak bir başka etkiye de bakalım.

AJAX ve PHP'yi kullanma

Bu aynı etkiyi elde etmek için ancak biraz farklı bir şekilde, yani ilk yükün tüm içeriğimizi yüklemeyecek ve böylece yavaşlatmak (sitenin çok fazla içeriğe sahip olması durumunda noktayı yenmek) biraz kullanacağız. PHP ve AJAX. Bu, projemiz için dosya yapısının değişeceği ve şöyle görüneceği anlamına gelir:

Yani eğer bakarsanız, indeks dosyası şimdi bir .php'dir ve bir .html değildir. Ayrıca, 'load.php' adında ek bir dosyamız var. Ayrıca dört adet HTML sayfası bulunan yeni bir klasör / dizin. Şimdi bu, yerel olarak çalışıyorsanız, benzeri bir şey kullanarak yerel bir geliştirme ortamı kurmanız gerektiği anlamına gelir. MAMP (Mac için) veya WAMP Sunucusu (pencereler için). İsterseniz, buradaki erişim ve düzenlemeye sahipseniz, tüm klasörü bir web sunucusuna yükleyebilirsiniz, temelde PHP'nin çalışacağı bir ortama ihtiyacınız olacaktır.

İndex.php sadece bir şeyi değiştirdi, fakat önemli, şimdi içerdeki tüm içeriği yüklemeyeceğiz ve basitçe bir PHP içerisindeki ilk içeriği arayacağız. Şimdi böyle bir şey görünecek:

AJAX a Static Site

Yani başlangıç ​​çizgisi ilk HTML dosyasında, sayfalar klasörümüzden ve tamamen # ana içerik DIV'mize ekleniyor. Aranan dosya, sayfada görünmesini istediğiniz içeriği içerebilir.

JavaScript'te $ .ajax Kullanımı

Yeni JavaScript’e geçelim, şimdi biraz farklı görünüyor, esasen kullanıcı her bir HTML dosyasından yeni içeriği almak için AJAX kullanıyoruz. İşte koddaki ilk işlev (ikinci, önceki ile aynı kalır):

$(function() {$('header nav a').click(function() {var $linkClicked = $(this).attr('href');document.location.hash = $linkClicked;var $pageRoot = $linkClicked.replace('#page', '');if (!$(this).hasClass("active")) {$("header nav a").removeClass("active");$(this).addClass("active");$.ajax({type: "POST",url: "load.php",data: 'page='+$pageRoot,dataType: "html",success: function(msg){if(parseInt(msg)!=0){$('#main-content').html(msg);$('#main-content section').hide().fadeIn();}  }});} else {event.preventDefault ();}}); 

O zaman neler olduğunu açıklayalım. Bir tane daha değişken ekliyoruz, bu da $ pageRoot. Bu temel olarak tıklanan gerçek sayıdır (karma bağlantının '#sayfa' bölümünü alarak ve bireysel sayıyı bırakarak). Daha sonra olduğu gibi aynı “if” ifadesinin içinde ajax'ı çağırırız ve daha önce bahsettiğimiz (ayrılan linke tıklanmış) bilgiyi ayrıştırmak ve karşılık gelen sayfayı bulmak için kullandığımız diğer PHP dosyasını kullanırız. Ardından, herhangi bir hata olmadan geri gelirse, yeni HTML’yi # ana içerik DIV’imize gönderilen dosyadan ekleriz. Sonra sadece aniden değişmeyi durdurmak için, her şeyi saklıyoruz ve sonra da soluyoruz.

load.php

Yeni PHP dosyasının içeriği kısa ve tatlıdır, jQuery'nin gönderdiği sayfa numarasını alır ve ilgili HTML dosyasının mevcut olup olmadığını görür. Eğer yaparsa tüm içeriği alır ve AJAX işlevine döndürür (bir an önce bu içeriği ana DIV'ye eklediğimizi gösterdik).

Bunu takip etmeliyiz ancak siteyi istediğiniz gibi görünmeli, ancak çoğunlukla düzgün çalışıyoruz.

Bu kadar! Site, kullanıcı bir navigasyon bağlantısına her tıkladığında, şu anda doğru HTML dosyasına çağrı yapıyor. Sayfayı yeniden yüklemeden içeriği dağıtır. Ve bu şekilde, ilk sayfa yükündeki tüm içeriği aramak zorunda kalmaz! Umarım bu eğiticiden bazı yararlı yöntemler öğrenmeyi başarmışsınızdır ve bunu bir şekilde bir şekilde geliştirmek için kullanabilirsiniz.

Görüntüleyebilirsiniz jQuery demo burada, PHP demo here, PHP demo burada veya kaynağı indir ve daha yakından bakın.

İçerik yüklemek için AJAX kullandınız mı? Sitenizi hızlandırmak için benzer bir teknik kullandınız mı? Aşağıdaki yorumlarda düşüncelerinizi bize bildirin.

Öne çıkan görsel / küçük resim, süper şarjlı görüntü Shutterstock üzerinden.