在一個單獨的文件中放置一個html（腳本）菜單

我有一個菜單，我已經創建了使用jQuery的「彈出」某些按鈕鼠標懸停。在一個單獨的文件中放置一個html（腳本）菜單

它有很多選項和子菜單選項，我想把它放到一個單獨的文件中，這樣它只需要下載一次，所有的html標記和文本都不需要每次用戶點擊我網站上的子頁面時都會重新下載。

我正在玩弄使用jquery模板引擎的想法，但無法將我的頭圍繞着最好的方式來工作。畢竟，這不是一個模板，而是一個靜態菜單。

我敢肯定，我不能把它放在JS文件中，因爲它本身不是腳本，它是實際的HTML標記（主要是表格）。

任何想法？

2011-10-13 Christopher Johnson

真的不知道你的意思，但我傾向於做的是包括在原有頁面標記所有的「彈出窗口」 HTML和簡單的切換display到none或block與任何你想要的JQuery的事件，如

$("button#popupbtn").click(function(){$("#hiddencontent").css("display", "block")});

這樣你不必每次下載標記爲你，並會如果你使用Ajax你得到的無論是在額外的標記過的搜索引擎優化的好處。

如果您確實選擇使用Ajax，您也可以在下載後通過緩存結果（基本上保存本地副本以重用）來防止重複下載，但這並不是必須的，因爲第1種方法更簡單和SEO

來源

2011-10-13 23:05:02 Tules

感謝您的答覆tules。你的建議（顯示或隱藏）是我目前實際上正在做的以及我希望避免的事情，因爲它使得我的文件大小很大，隱藏了頁面上的整個菜單。這就是爲什麼我想把它放在另一個只需要客戶端下載的文件中，這樣每個子頁面仍然可以使用客戶端已經存在的菜單。 Ajax不是一個好的選擇，因爲菜單需要在按鈕被隱藏時立即顯示。那現在更有意義了嗎？ –

啊是的，那麼我肯定會嘗試服務器端包括，他們通常用於這種事情：標題，菜單，頁腳.. 你可以建立像這樣的整個頁面模板 – Tules

SSI有時也被稱爲SHTML http ：//www.kennesaw.edu/webmaster/whatis/shtml.html – Tules

這可能是太多回旋，而是將自己的HTML頁面設置爲XHTML DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

，並使用PHP文件擴展名（「的index.php」，而不是更好「指數.html「），您可以使用

<?php include("scriptedmenufile.php"); ?>

代替長菜單代碼。然後，在「scriptedmenufile.php」裏面，你將會爲你的菜單添加html代碼。

來源

2011-10-13 23:19:02

是的PHP包括是類似的，他們緩存？ – Tules

原樣，不行。直到閱讀接受的答案的評論，我也更關注SSI而不是緩存。 –

我會將此添加到頁面底部的隱藏div中。然後，當你想讓它「彈出」，我會使用該隱藏的div上的jQuery UI對話框http://jqueryui.it/demos/dialog在對話框中彈出它。

如果你想在一個單獨的文件，你可以使用服務器端的模板，並將其呈現到你的主HTML頁面隱藏

來源

2011-10-13 23:25:12

所以在最後，這將是單獨緩存菜單的唯一途徑底部（或者任何個人的HTML元素），但要記住，這將產生一個額外的http請求的用戶第一次到達你的網站可能不值得你保存與使用塞雷爾語一側的50K包括或php include()

$(function(){ 
    $("#menuholder").html("all the menu markup goes in here"); 
}) <!-- inside menu.js 


<script src="menu.js"></script> 


<div id="menuholder"></div>

來源

2011-10-14 00:05:16 Tules

在一個單獨的文件中放置一個html（腳本）菜單

回答

相關問題