Menu jQuery et sitemap ASP.NET

StackOverflow https://stackoverflow.com/questions/103630

  •  01-07-2019
  •  | 
  •  

Question

Est-il possible d'utiliser un ASP.NET web.sitemap avec un jQuery < un href = "http://users.tpg.com.au/j_birch/plugins/superfish/" rel = "noreferrer"> menu Superfish ?

Si ce n'est pas le cas, existe-t-il des plug-ins indépendants du navigateur basés sur des normes disponibles qui fonctionnent avec le fichier web.sitemap?

Était-ce utile?

La solution

J'ai trouvé cette question en cherchant la même réponse ... tout le monde dit que c'est possible mais que personne ne donne la solution actuelle! Il semble que cela fonctionne maintenant alors je pensais publier mes découvertes ...

Ce dont j'avais besoin:

Mon fini Masterpage.master a la balise head suivante: 

<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>

C’est essentiellement tout ce dont vous avez besoin pour que le menu jQuery Superfish fonctionne. À l'intérieur de la page (où se trouve le menu), vous voyez ceci (d'après ces instructions ): 

<asp:SiteMapDataSource ID="SiteMapDataSource" runat="server"
    ShowStartingNode="false" />
<asp:Menu ID="Menu1" runat="server" 
    DataSourceID="SiteMapDataSource"
    Orientation="Horizontal" CssClass="sf-menu">
</asp:Menu>

D'après la documentation, il semble que cela DEVRAIT fonctionner - mais cela ne fonctionne pas. La raison en est que le CssClass="sf-menu" est écrasé lorsque le menu est rendu et que la balise <ul> reçoit un class="AspNet-Menu". Je pensais que la ligne $('ul.AspNet-Menu').superfish(); aiderait, mais elle ne l’a pas été.

Encore une chose

Bien que ce soit un hack (et s'il vous plaît, quelqu'un m'indique la solution correcte), j'ai pu le faire fonctionner en ouvrant le fichier superfish.css et en recherchant et en remplaçant sf-menu. avec AspNet-Menu ... et le tour est joué! le menu est apparu. Je pensais qu'il y aurait un paramètre de configuration dans le asp:Menu contrôle où je pourrais définir la classe <=> mais je n'ai trouvé aucun indice via Google.

Autres conseils

Oui, c'est tout à fait possible.

Je l’ai utilisé avec l’ASP: Menu control et jQuery 1.2.6 avec le plugin Superfish. Notez que vous aurez besoin des adaptateurs de contrôle conviviaux ASP.NET 2.0 CSS .

ASP.NET génère le contrôle ASP: Menu sous forme de disposition de tableau. L’adaptateur de contrôle convivial CSS permet à ASP.NET de générer le contrôle ASP: Menu sous la forme d’une présentation UL / LI dans un div.

Cela permettra une intégration aisée des plug-ins jQuery et Superfish car celui-ci repose sur une présentation UL / LI.

Il semble que vous deviez générer une UL pour Superfish. Vous devriez pouvoir le faire avec ASP.Net à partir de la carte de votre site. Je pense que le contrôle de la carte du site fera quelque chose comme ça. Sinon, il devrait être assez simple d'appeler la carte du site directement à partir de C # et de générer le DOM par programmation. Pour ce faire, vous pouvez créer un contrôle utilisateur ou le faire dans la page maître.

Découvrez cet article MSDN sur la procédure d'énumération par programme du nœuds dans votre carte de site.

N'oubliez pas d'ajouter des classes CSS pour les éléments NonLink. Les éléments superfish css ne leur conviennent pas. Et si vous êtes comme moi et que les menus racines ne sont pas des liens, le rendu est affreux. Ajoutez simplement des éléments AspNet-Menu-NonLink au fichier superfish.css et le résultat devrait être correct.

Le contrôle SiteMapDataSource doit pouvoir se lier à n’importe quel contrôle lié aux données hiérarchiques. Je ne connais pas très bien les superfish mais je sais qu’il existe de nombreux contrôles jQueryish pour le faire.

J'ai créé un joli petit exemple de projet que vous pouvez utiliser à l'adresse http://simplesitemenu.codeplex.com/ .

Il s'agit d'un contrôle composite qui génère une liste imbriquée UL / LI à partir de votre sitemap.

Profitez!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top