2012-08-16 32 views
6

Birden fazla sayfaya aynı gezinme menüsünü eklemek istiyorum, ancak PHP desteğim yok, sunucumu başka bir şekilde etkileyemiyorum.PHP'yi Taklit PHP İçermez

Html'yi tüm sayfalara kopyalayıp yapıştırmaktan kaçınmak istiyorum; çünkü bu, menüyü bir güncelleştirme yapmaktır. şöyle Aklıma

iki seçenek vardır:

1) tüm içeriği var tek sayfada mevcut, daha sonra url eklenen bir anahtar kelime dayalı olarak gösterilir hangi içeriğin belirler:

example.com/index?home 
example.com/index?news 

2) Seçenek 1 ile her sayfa

function setupMenu() { 
    $("#nav").html("<ul class='nav'><li>home</li><li>news</li></ul>"); 
} 

üzerine işlevi menü dışarı yazar ve çağrı bir işlevi vardır bir javascript dosyası dahil, güncelleme işlemi o oluşacak f javascript dosyasında işlevini değiştirerek anlamına güncellenmesi, bir sayfadan 2. Seçenek ile

üzerinde bir nav menü olurdu düzenleme

Seçenek 1 ile Benim endişe sayfa içeriğinin bir sürü yük olurdu olduğunu bunu göstermeye gerek yok. Seçenek 2 konusundaki kaygım önemsiz gibi görünebilir, ancak kodun dağınık olması mümkündür.

Bunu yapmanın herhangi bir sebebi diğerinden daha iyi olabilir mi? Yoksa eksik olduğum üçüncü bir üstün seçenek var mı?

+1

Sunucuda PHP desteği bulunmuyor olabilir. Ancak, yerel bilgisayarınızda web sitesini kendiniz oluşturabilir ve sonra tam sayfaları gerektiği gibi oluşturabilirsiniz (derleme sistemi). Bazen bu geçerli bir seçenek. – hakre

+0

+1 @hakra, bu çok zekice bir çalışma. –

cevap

5

, kendi avantajları ve dezavantajları ile her:

  • Sunucu Tarafı dahildir veya SSI. Eğer PHP'niz yoksa, SSI'nizde iyi bir şans yoktur ve bu seçenek .htaccess dosyanızla ilgili rahatsız edici bir rahatsızlık gerektirir. Dominic P.'yi kontrol etSSI'nın yazılması için cevap. SSI'nın JavaScript veya Çerçeveler üzerindeki yararı, kullanıcının çok sayıda kullanıcının sahip olmadığı JS'yi etkinleştirmesini gerektirmemesi ve ayrıca herhangi bir gezinme zorluğu sunmamasıdır.

  • Çerçeveler. Gezinmeyi kendi ayrı dosyasına koymak için standard frames'u kullanabilir ve doğru stil ile sorunsuz olur. Gezinmenizi, sitenin bir kenar çubuğunda veya herhangi bir yerde olduğu gibi rastgele bir yere yerleştirmek için bir iframe kullanabilirsiniz. Çerçevelerin, özellikle de standart çerçevelerin olumsuz tarafı, yer işareti koyma, bağlantılar ve ileri/geri düğmelerinin garip davranmasıdır. Tersine, kareler tarayıcı uyumluluğu veya sunucu desteği gerektirmez.

  • JavaScript. Özellikle jQuery kullanıyorsanız, JS çözümünün mükemmel açıklamaları için diğer yanıtlardan herhangi birine başvurabilirsiniz. Ancak, siteniz JavaScript'inizin etkin olmasını isteyecek kadar dinamik değilse, bu, çok sayıda izleyicinin menüyü görmeyeceği anlamına gelir.

  • -
+0

, SSI bir seçenek olmadığı için karelerle gidiyor. javascript load() yöntemi çalışır ancak – dougmacklin

+0

'u tamamlamak için çok uzun sürüyor. Yaptığınız gibi Çerçeveler ile yapışmasını öneriyorum, ancak JS yükü() bu kadar uzun sürerse muhtemelen başka bir şey oluyor. FWIW, bir iFrame muhtemelen navlarınız için standart bir çerçeveden daha iyi olacak. Üzgünüz, barındırma çok kısıtlayıcı! –

4

Evet kullanım jQuery ajax fonksiyonu

$('#result').load('ajax/menu.html'); 

kodunuzu temiz kalır Bu şekilde .Load ve sadece ayrı HTML dosyaları içerir düzenleyebilir sadece PHP gibi.

+0

cevabını desteklediğine bakacağım, sadece @ user190284'leri olarak kabul edilen cevabınız için teşekkür ederim, çünkü bazılarını yaptıktan sonra jQuery – dougmacklin

1

Server Side Includes ürününü inceleyin. Onlarla çok fazla deneyime sahip değilim, ama hatırladığım kadarıyla, sadece sizin sorunlarınıza çözüm olacak şekilde tasarlandılar.

3

Bu görev için AJAX'ı düşünmelisiniz. JQuery gibi bir üçüncü taraf kitaplığı ekleyin ve ayrı HTML dosyalarını yer tutucuların içine yükleyin ve bunları kimliğe göre hedefleyin.

Örneğin, ana HTML sayfası:

<div id="mymenu"></div> 

Ayrıca, ana HTML, ancak HEAD bölümünde:

$('#mymenu').load('navigation.html'); 

Ama en iyi bahis bir barındırma geçmek için olurdu PHP veya herhangi bir sunucu tarafı içerir destekler. Bu hayatınızı çok daha kolaylaştıracaktır. Birkaç seçenek var

+1

ile aşina olmayanların daha yararlı olduğunu düşünüyorum testler, bu yöntem işe yarıyor ama çok uzun sürüyor, nav ortaya çıkana kadar iki saniyeden fazla ortalama hızları. Sunucum genel olarak işleri yavaş yavaş işliyor gibi görünüyor, bu yüzden gelecekteki kullanıcıların kendileri için denemelerini öneriyorum – dougmacklin

+0

Yükleme süreleri, yalnızca sunucunuzun ve istemcinizin bağlantı hızına bağlıdır. Alınan verilerin ayrıştırılması, JavaScript motorunu kullanarak birkaç milisaniye içinde gerçekleşir (bu durumda jQuery uzantısı). –

1

HTML İthalat İşte

http://w3c.github.io/webcomponents/spec/imports/ kullanabilirsiniz http://www.html5rocks.com/en/tutorials/webcomponents/imports/

warnings.html bir örnektir

<div class="warning"> 
    <style scoped> 
     h3 { 
     color: red; 
     } 
    </style> 
    <h3>Warning!</h3> 
    <p>This page is under construction</p> 
    </div> 

    <div class="outdated"> 
    <h3>Heads up!</h3> 
    <p>This content may be out of date</p> 
    </div> 

Sonra index.html içerebilir içeriyor

<head> 
    <link rel="import" href="warnings.html"> 
</head> 
<body> 
    ... 
    <script> 
    var link = document.querySelector('link[rel="import"]'); 
    var content = link.import; 

    // Grab DOM from warning.html's document. 
    var el = content.querySelector('.warning'); 

    document.body.appendChild(el.cloneNode(true)); 
    </script> 
</body> 
İlgili konular