jQuery 菜单和 ASP.NET 站点地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/103630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Menu and ASP.NET Sitemap
提问by NakedBrunch
回答by Conceptdev
I found this question while looking for the same answer... everyone saysit's possible but no-one gives the actual solution! I seem to have it working now so thought I'd post my findings...
我在寻找相同答案时发现了这个问题......每个人都说这是可能的，但没有人给出实际的解决方案！我现在似乎可以正常工作了，所以我想我会发布我的发现......
Things I needed:
我需要的东西：
CSS Friendly Control Adaptorsdownload DLL and .browsers file (into /bin and /App_Browsers folders respectively)
ASP.NET SiteMap(a .sitemap XML file and
siteMapprovider entry in web.config)
CSS Friendly Control Adapters下载 DLL 和 .browsers 文件（分别进入 /bin 和 /App_Browsers 文件夹）
ASP.NET SiteMap（.sitemap XML 文件和
siteMapweb.config 中的提供程序条目）
My finished Masterpage.masterhas the following headtag:
我的成品Masterpage.master有以下head标签：
<head runat="server">
<script type="text/javascript" src="/script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/script/superfish.js"></script>
<link href="~/css/superfish.css" type="text/css" rel="stylesheet" media="screen" runat="server" />
<script type="text/javascript">
$(document).ready(function() {
$('ul.AspNet-Menu').superfish();
});
</script>
</head>
Which is basically all the stuff needed for the jQuery Superfish menu to work. Inside the page (where the menu goes) looks like this (based on these instructions):
这基本上是 jQuery Superfish 菜单工作所需的所有东西。页面内部（菜单所在的位置）如下所示（基于这些说明）：
<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server"
ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server"
DataSourceID="SiteMapDataSource"
Orientation="Horizontal" CssClass="sf-menu">
</asp:Menu>
Based on the documentation, this seems like it SHOULD work - but it doesn't. The reason is that the CssClass="sf-menu"gets overwritten when the Menu is rendered and the <ul>tag gets a class="AspNet-Menu". I thought the line $('ul.AspNet-Menu').superfish();would help, but it didn't.
根据文档，这似乎应该有效 - 但事实并非如此。原因是在CssClass="sf-menu"呈现 Menu 并且<ul>标签获得class="AspNet-Menu". 我以为这条线$('ul.AspNet-Menu').superfish();会有所帮助，但没有。
ONE MORE THING
还有一件事
Although it is a hack (and please someone point me to the correct solution) I was able to get it working by opening the superfish.cssfile and search and replacingsf-menuwith AspNet-Menu... and voila! the menu appeared. I thought there would be some configuration setting in the asp:Menucontrol where I could set the <ul>class but didn't find any hints via google.
虽然这是一个黑客（和请人点我到正确的解决方案），我能得到它的工作通过打开superfish.css文件，搜索和替换SF-菜单与ASPNET菜单......瞧！菜单出现了。我以为asp:Menu控件中会有一些配置设置，我可以在其中设置<ul>类，但没有通过谷歌找到任何提示。
回答by Jason Kanaris
Yes, it is totally possible.
是的，这是完全可能的。
I have used it with the ASP:Menu control and jQuery 1.2.6 with the Superfish plugin. Note, you will need the ASP.NET 2.0 CSS Friendly Control Adapters.
我已经将它与 ASP:Menu 控件和带有 Superfish 插件的 jQuery 1.2.6 一起使用。请注意，您将需要ASP.NET 2.0 CSS Friendly Control Adapters。
ASP.NET generates the ASP:Menu control as a table layout. The CSS Friendly Control Adapter will make ASP.NET generate the ASP:Menu control as a UL/LI layout inside a div.
ASP.NET 将 ASP:Menu 控件生成为表格布局。CSS Friendly Control Adapter 将使 ASP.NET 生成 ASP:Menu 控件作为 div 内的 UL/LI 布局。
This will allow easy integration of the jQuery and Superfish plugin because the Superfish plugin relies on a UL/LI layout.
这将允许轻松集成 jQuery 和 Superfish 插件，因为 Superfish 插件依赖于 UL/LI 布局。
回答by Jason Hymanson
It looks like you need to generate a UL for Superfish. You should be able to do this with ASP.Net from your site map. I think the site map control will do something like this. If not, it should be pretty trivial to call the site map directly from C# and generate the DOM programmatically. You could build a user control to do this, or do it in the master page.
看起来您需要为 Superfish 生成 UL。您应该能够从站点地图使用 ASP.Net 执行此操作。我认为站点地图控件会做这样的事情。如果没有，直接从 C# 调用站点地图并以编程方式生成 DOM 应该非常简单。您可以构建一个用户控件来执行此操作，或在母版页中执行此操作。
Check out this MSDN articleon how to programmatically enumerate the nodes in your site map.
查看这篇 MSDN 文章，了解如何以编程方式枚举站点地图中的节点。
回答by Jason Hymanson
Remember to add css classes for NonLink elements. Superfish css elements don't acccont for them. And if you're like me and have root menu's that are not links, then it renders horribly. Just add AspNet-Menu-NonLink elements to the superfish.css file and it should render fine.
请记住为 NonLink 元素添加 css 类。Superfish css 元素不适合它们。如果你像我一样拥有不是链接的根菜单，那么它呈现的非常糟糕。只需将 AspNet-Menu-NonLink 元素添加到 superfish.css 文件中，它就会呈现良好的效果。
回答by Mr W
I created a neat little sample project you can use at http://simplesitemenu.codeplex.com/
我创建了一个整洁的小示例项目，您可以在http://simplesitemenu.codeplex.com/ 上使用
It is a composite control which generates a nested UL/LI listing from your sitemap.
它是一个复合控件，可从您的站点地图生成嵌套的 UL/LI 列表。
Enjoy!
享受！
回答by Smallinov
The SiteMapDataSource control should be able to bind to any hierarchical data bound control. I'm not familiar with superfish but I know there are plenty of jQueryish controls out there to do this.
SiteMapDataSource 控件应该能够绑定到任何分层数据绑定控件。我不熟悉 superfish，但我知道有很多 jQueryish 控件可以做到这一点。
