Как бы вы показали, какая вкладка выбрана на веб-сайте, созданном из шаблона? - PullRequest
Новая
       13

Как бы вы показали, какая вкладка выбрана на веб-сайте, созданном из шаблона?

1 голос
/ 03 июня 2010

Когда вы нажимаете Вопросы, Теги, Пользователи и т. Д. В верхней части стека overflow, тот, который вы просматриваете, становится подсвеченным оранжевым. Это (обычно) делается путем изменения CSS одного из них, чтобы он был «выбран».

Если у вас есть один шаблон, на котором собраны все ваши страницы, и этот шаблон включает в себя эти кнопки сверху, как выделить одну из них в зависимости от того, какую страницу вы просматриваете?

Проблема в том, что у вас будет один шаблон, а не один для каждой страницы ... идеи?

(Если это имеет значение, я использую ASP.NET MVC 2 и настраиваю главную страницу)

Ответы [ 4 ]

1 голос
/ 03 июня 2010

Существуют различные способы сделать это в зависимости от того, сколько изменений вы можете внести в HTML-код.

В лучшем случае, но с большинством манипуляций с HTML, вы должны бытьзавернуть ссылку в сильный тег.Независимо от того, заключили вы или нет якорь в сильный тег или заменили его сильным тегом, решать только вам *, но сильный тег добавляет семантическое значение к ссылке, чего не делает атрибут класса, то есть необработанный HTML-код все еще показывает, что текущийссылка выделена.Однако вам понадобится много операторов IF или некоторой подобной логики, чтобы программно достичь этого эффекта. 

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

В худшем случае, с наименьшими манипуляциями с HTML, добавлением класса к каждому LI и затем изменениемКласс body позволит вам контролировать внешний вид отдельного элемента навигации.Это легко сделать, но в нем отсутствует какая-либо семантическая структура в 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>

[*] Существует множество мнений о том, должна ли страница ссылаться на себя в навигации сайта.Есть много субъективных причин для любого случая.Я оставлю это тебе ...

0 голосов
/ 27 сентября 2012 
     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>
0 голосов
/ 04 июня 2010

Это отличный вопрос. Я помню, что это ASP.NET, но я не думал об этом для ASP.NET MVC.

Для ASP.NET MVC вы можете создать пользовательский элемент управления, но мне нравится идея метода расширения HTMLHelper. Принимая идею Бэсэку сверху, это будет конечным результатом вашего контроля. Метод будет принимать коллекцию элементов, и из этих элементов вы сможете определить выбранную страницу.

  1. Создайте MenuTab объект, который имеет свойства DisplayText, ActionName и ControllerName.
  2. Создайте расширение System.Web.MVC.HtmlHelper, которое принимает в качестве аргумента коллекцию MenuTab, например. public static MvcHtmlString TabbedMenu(this HtmlHelper helper, IEnumerable<MenuTab> menuTabs). Обратите внимание на тип возвращаемого значения MvcHtmlString, поэтому он работает как с response.write, так и с html.encode.
  3. Внутри тела описанного выше метода вы сможете через HtmlHelper увидеть, соответствует ли текущий контроллер страниц и действие именам контроллера и действия любого из переданных в MenuTab, и, если это так, построить ActionLink с атрибутом html class, установленным для вашего класса css для выбранного элемента.

Пример использования на вашей главной странице будет выглядеть примерно так:

<%: 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"} }) %>

в том, что я использую, я дополнительно передаю параметр id, чтобы у меня было несколько меню на одной странице (например, боковая и верхняя навигация).

0 голосов
/ 03 июня 2010

добавить класс динамически, проверив, где вы находитесь. в рельсах я обычно добавляю «выбранный» класс на основе контроллера, например если я в контроллере вопросов, я должен добавить выбранный класс на вкладке вопросов. Я не уверен насчет asp.net (как вы проверяете свой контроллер или где вы находитесь на сайте), но это общая идея.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...