jQuery菜单和ASP.NET站点地图

时间:2020-03-06 14:26:55  来源:igfitidea点击:

是否可以将ASP.NET web.sitemap与jQuery Superfish菜单一起使用?

如果不是,是否有可用于web.sitemap文件的基于标准的浏览器不可知插件?

解决方案

SiteMapDataSource控件应该能够绑定到任何分层数据绑定控件。我对超级鱼不熟悉,但是我知道有很多jQueryish控件可以做到这一点。

看来我们需要为Superfish生成UL。我们应该可以从站点地图中使用ASP.Net进行此操作。我认为站点地图控件将执行以下操作。如果不是这样,直接从Cand以编程方式生成DOM调用站点地图应该很简单。我们可以构建一个用户控件来执行此操作,或者在母版页中执行此操作。

查阅这篇有关如何以编程方式枚举站点地图中的节点的MSDN文章。

是的,这完全有可能。

我已经将它与ASP:Menu控件一起使用,并将jQuery 1.2.6与Superfish插件一起使用了。请注意,我们将需要ASP.NET 2.0 CSS友好控件适配器。

ASP.NET生成ASP:Menu控件作为表布局。 CSS友好控件适配器将使ASP.NET在div内将ASP:Menu控件生成为UL / LI布局。

这将允许jQuery和Superfish插件轻松集成,因为Superfish插件依赖于UL / LI布局。

我在寻找相同答案时发现了这个问题...每个人都说有可能,但没有人给出实际的解决方案!我现在似乎可以正常使用了,所以以为我会发表我的发现...

我需要的东西:

  • 超级鱼,其中还包括一个版本的jQuery
  • CSS友好控制适配器下载DLL和.browsers文件(分别到/ bin和/ App_Browsers文件夹中)
  • ASP.NET SiteMap(web.config中的.sitemap XML文件和siteMap提供程序条目)

我完成的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>

基本上,这是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>

根据文档,这似乎应该工作,但不是。原因是当呈现菜单时,CssClass =" sf-menu"被覆盖,而<ul>标记获得class =" AspNet-Menu"。我认为`$('ul.AspNet-Menu')。superfish();行会有所帮助,但没有帮助。

还有一件事

尽管这是一个hack(请有人指出正确的解决方案),但我可以通过打开" superfish.css"文件并搜索并用AspNet-Menu ...和sf替换sf菜单来使其正常工作!菜单出现。我以为在asp:Menu控件中会有一些配置设置,我可以在其中设置<ul>类,但没有通过Google找到任何提示。

记住要为NonLink元素添加css类。 Superfish CSS元素不适合它们。而且,如果我们像我一样,并且拥有不是链接的根菜单,那么它将呈现可怕的效果。只需将AspNet-Menu-NonLink元素添加到superfish.css文件中,它就可以正常显示。