Comment afficher l'onglet sélectionné sur un site Web créé à partir d'un modèle?

Lorsque vous cliquez sur Questions, Tags, Utilisateurs, etc. en haut de stackoverflow, celui que vous regardez devient surligné en orange. Ceci est (généralement) fait en changeant le CSS de l'un d'entre eux pour être 'sélectionné'.Comment afficher l'onglet sélectionné sur un site Web créé à partir d'un modèle?

Si vous avez un modèle unique avec toutes vos pages et que ce modèle inclut ces boutons en haut, comment pouvez-vous mettre en évidence l'un d'entre eux en fonction de la page que vous consultez?

Le problème est que vous auriez un modèle, pas un pour chaque page ... des idées?

(S'il importe, je suis en utilisant ASP.NET MVC 2 et la mise en place d'une page principale)

Source

2010-06-03 NibblyPig

ajouter une classe dynamique en vérifiant où vous êtes. dans les rails, j'ajoute habituellement une classe "sélectionnée" basée sur le contrôleur, par ex. si im dans le contrôleur de questions, je devrais ajouter une classe sélectionnée dans l'onglet de question. Je ne suis pas sûr d'asp.net (comment vous vérifiez votre contrôleur ou où vous êtes dans le site) mais c'est l'idée générale.

Source

2010-06-03 09:17:45 corroded

Est-ce que c'est une sorte de javascript? – NibblyPig

vous pouvez utiliser jscript mais vous pouvez également utiliser les variables de votre langue. Y at-il un moyen de savoir quel contrôleur vous êtes? quelque chose comme controller.controller_name? peut-être vous pouvez ajouter asp.net comme un tag afin que les gens qui le connaissent puissent aussi aider :) – corroded

Il existe plusieurs façons de procéder, sur une échelle de la quantité de changement que vous pouvez apporter au code HTML. Dans le meilleur des cas, mais avec le plus de manipulation HTML, vous devriez encapsuler le lien dans un tag fort. Si vous placez l'ancre dans une étiquette forte ou si vous la remplacez par une étiquette forte, c'est à vous de choisir *, mais l'étiquette forte ajoute une signification sémantique au lien qu'un attribut de classe n'a pas, ce qui signifie que le code HTML actuel le lien est en surbrillance. Vous auriez besoin de beaucoup d'instructions IF ou d'une telle logique pour réaliser cet effet par programmation.

<li><a href="...">Home</a></li> 
<li><strong>News</strong></li> 
<li><a href="...">About</a></li>

Dans le pire scénario, avec le moins de manipulation HTML, l'ajout d'une classe à chaque LI puis modifier une classe de corps vous permettra de contrôler l'apparence d'un seul élément de navigation. C'est simple à faire, mais il manque une structure sémantique dans le HTML.

<style type="text/css"> 
.in-news .nav-news { font-weight: 600; } 
</style> 
<body class="in-news"> 
... 
<ul> 
<li class="nav-home"><a href="...">Home</a></li> 
<li class="nav-news"><a href="...">News</a></li> 
<li class="nav-about"><a href="...">About</a></li> 
</ul>

[*] Il y a beaucoup d'opinions sur si une page devrait se lier à elle-même dans la navigation du site. Il y a beaucoup de raisons subjectives dans les deux cas. Je vais vous laisser ça ...

Source

2010-06-03 09:26:10 beseku

C'est une bonne question. Je me souviens d'avoir à faire cela est ASP.NET, mais je n'ai pas pensé à cela pour ASP.NET MVC.

Pour ASP.NET MVC, vous pouvez créer un contrôle utilisateur, mais j'aime l'idée d'une méthode d'extension HTMLHelper. Prenant l'idée de Beseku d'en haut, ce serait la sortie ultime de votre contrôle. La méthode accepterait une collection d'éléments, et à partir de ces éléments, vous seriez alors en mesure de déterminer la page sélectionnée.

Créez un objet MenuTab possédant les propriétés DisplayText, ActionName et ControllerName.
Créez une extension System.Web.MVC.HtmlHelper qui prend une collection de MenuTab en tant qu'argument, par ex. public static MvcHtmlString TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> menuTabs). Notez le type de retour de MvcHtmlString afin qu'il fonctionne à la fois avec response.write et html.encode.
À l'intérieur du corps de la méthode ci-dessus, vous pouvez voir via le HtmlHelper si les pages contrôleur et action actuelles correspondent aux noms de contrôleur et d'action de l'un des MenuTab passés, et si oui, construisez un ActionLink qui a un attribut de classe html défini sur votre classe css pour un élément sélectionné.

Exemple d'utilisation en vous page maître serait quelque chose comme:

<%: Html.TabbedMenu(new List<MenuTab> { new MenuTab{Text="Home", ActionName="Index", ControllerName="Home"}, new MenuTab{Text="Other Page", ActionName="Index", ControllerName="Other Controller"}, new MenuTab{Text="What is this?", ActionName="About", ControllerName="Home"} }) %>

dans celui que je me sers, je passe en outre dans un paramètre id pour que je puisse avoir plusieurs menus sur la même page (pensez à la navigation latérale et supérieure).

Source

2010-06-04 14:30:04

 protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e) 
    { 
     multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue); 
     if (menuTabs.Items[0].Selected == true) 
     { 

      menuTabs.Items[0].ImageUrl = "~/Images/wit1_over.png"; 
      menuTabs.Items[1].ImageUrl = "~/Images/wit2.png"; 
     } 

     if (menuTabs.Items[1].Selected == true) 
     { 
      menuTabs.Items[1].ImageUrl = "~/Images/wit2_over.png"; 
      menuTabs.Items[0].ImageUrl = "~/Images/wit1.png"; 

     } 
    } 



     **//design code** 
     <asp:Menu ID="menuTabs" CssClass="menuTabs" StaticMenuItemStyle-CssClass="tab" StaticSelectedStyle-CssClass="selectedTab" 
      OnMenuItemClick="menuTabs_MenuItemClick" runat="server" Orientation="Horizontal" 
      BackColor="#f4f4f4" BorderStyle="None" class="img-swap1"> 
      <StaticSelectedStyle CssClass="selectedTab"></StaticSelectedStyle> 
      <StaticMenuItemStyle CssClass="tab"></StaticMenuItemStyle> 
      <Items> 
       <asp:MenuItem Text="" Value="0" Selected="true" ImageUrl="Images/wit1_over.png" /> 
       <asp:MenuItem Text="" Value="1" ImageUrl="Images/wit2.png" /> 
      </Items> 
     </asp:Menu> 


     <asp:MultiView ID="multiTabs" ActiveViewIndex="0" runat="server"> 
      <asp:View ID="view1" runat="server"> 
       </asp:View> 
      <asp:View ID="view2" runat="server"> 
       </asp:View> 
     </asp:MultiView>

Source

2012-09-27 04:02:35

Cela ressemble à ASP.NET Web Forms plutôt que MVC – NibblyPig

Ensuite, vous pouvez utiliser les onglets de l'interface utilisateur JQuery ... –

Comment afficher l'onglet sélectionné sur un site Web créé à partir d'un modèle?

Répondre

Questions connexes