当前位置：文江博客话题详情

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

发布于 2024-12-09 15:09:26 字数 276 浏览 0 评论 0原文

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

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

我正在考虑使用 jquery 模板引擎的想法，但无法完全理解实现这一点的最佳方法。这毕竟不是一个模板，而是一个静态菜单。

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

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

掩耳倾听 2024-12-16 15:09:26

不太确定你的意思，但我倾向于在原始页面标记中包含所有“弹出窗口”的 html，然后简单地将 display 切换为 none 或 < code>block 与您想要的任何 JQuery 事件，例如

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

这样您就不必像使用 Ajax 那样每次都下载标记，并且您也可以获得额外标记中的任何内容的 SEO 好处。

如果您确实选择使用 Ajax，您还可以通过在下载结果后缓存结果（基本上保存本地副本以供重复使用）来防止重复下载，但这并不是真正必要的，因为第一种方法更容易且更适合 SEO

not really sure what you mean but what I tend to do is include the html for all "pop-ups" in the original page markup and simply toggle display to none or block with whatever JQuery event you want, such as

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

This way you dont have to download the markup every time as you would if you were using Ajax and you get the SEO benefits of whatever is in the extra markup too.

If you did choose to use Ajax you could also prevent repeated downloading by caching the results (basically saving a local copy to reuse) after they have been downloaded, but this wouldn't really be necessary because the 1st method is easier and better for SEO

回复收藏 0 原文

我是有多爱你 2024-12-16 15:09:26

这可能有点迂回，但是将 html 页面设置为 XHTML 文档类型

<!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 代码。

This may be too much of a roundabout, but having your html pages set to an 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">

and using a php file extension ("index.php" instead of "index.html") instead you would then be able to use

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

in place of the long menu code. Then, inside "scriptedmenufile.php" you will place the html code for your menu.

回复收藏 0 原文

岁吢 2024-12-16 15:09:26

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

如果您希望将其放在单独的文件中，您可以使用服务器端模板并将其渲染到隐藏的主 html 页面的底部

回复收藏 0 原文

山田美奈子 2024-12-16 15:09:26

因此，总而言之，这将是单独缓存菜单（或任何单独的 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>

So in conclusion this would be the only way to cache the menu individually (or any individual html elements) but bear in mind this would generate an extra http request the first time a user arrives at your site which may not be worth the 50k you're saving versus using serer side includes or php include()

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


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


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

回复收藏 0 原文

~没有更多了~