Question

我有一个使用jquery创建的菜单，在某些按钮鼠标悬停时“弹出”。

它有很多选项和子菜单选项，我想把它放到一个单独的文件中，这样它只需要下载一次，所有的html标记和文本都不需要重新编写 - 每次用户点击我网站上的子页面时下载。

我正在玩弄使用jquery模板引擎的想法，但无法完全解决这个问题的最佳方法。毕竟这不是模板，而是静态菜单。

我很确定我不能将它放在JS文件中，因为它本身不是脚本，它是实际的html标记（主要是表格）。

有什么想法吗？

Answer 1

不确定你的意思，但我倾向于在原始页面标记中包含所有“弹出窗口”的html，只需将display切换为none或{{1}使用您想要的任何JQuery事件，例如

block

这样你就不必像每次使用Ajax那样下载标记，并且你也可以获得额外标记中的所有内容的SEO优势。

如果你确实选择使用Ajax，你也可以在下载后通过缓存结果（基本上保存本地副本以便重复使用）来防止重复下载，但这并不是必需的，因为第一种方法更容易更好的SEO

Answer 2

这可能是一个太多的回旋处，但是你的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”而不是“index.html”），然后您就可以使用

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

代替长菜单代码。然后，在“scriptedmenufile.php”中，您将为您的菜单添加html代码。

Answer 3

我会将其添加到页面底部的隐藏div中。然后，当你想要“弹出”时，我会在隐藏的div上使用jquery ui对话框http://jqueryui.it/demos/dialog在对话框中弹出它。

如果你想要它在一个单独的文件中，你可以使用服务器端模板并将其呈现在隐藏的主html页面的底部

Answer 4

总而言之，这将是单独缓存菜单（或任何单个html元素）的唯一方法，但请记住，这将在用户第一次到达您的站点时生成额外的http请求，这可能不值得与使用serer side include或php include()

相比，你节省了50k

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


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


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

将html（脚本）菜单放在单独的文件中

4 个答案: