Apache Tiles 2.5 - пометить элемент меню как активный

Я использую Spring MVC 3.1 и Tiles 2.

У меня есть эта плитка:

<ul class="nav">
  <li class="active"><a href="/person">Person</a></li>
  <li><a href="/student">Student</a></li>
  <li><a href="/superadmin">Superadmin</a></li>
</ul>

И плитки.xml:

<tiles-definitions>
    <definition name="base.definition" template="/WEB-INF/pages/tiles/template.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="navbar" value="/WEB-INF/pages/tiles/navbar.jsp" />
        <put-attribute name="sidebar" value="/WEB-INF/pages/tiles/sidebar.jsp" />
        <put-attribute name="body" value="" />
        <put-attribute name="footer" value="/WEB-INF/pages/tiles/footer.jsp" />
    </definition>


    <definition name="user.new" extends="base.definition">
      <put-attribute name="body" value="/WEB-INF/pages/user.new.jsp" />
    </definition>

    <definition name="user.show" extends="base.definition">
      <put-attribute name="page_title" value="Tiles tutorial homepage" type="string"/>
      <put-attribute name="section_title" value="User's list" type="string"/>
      <put-attribute name="body" value="/WEB-INF/pages/user.show.jsp" />
    </definition>


    <definition name="login" template="/WEB-INF/pages/login.jsp">
        <put-attribute name="meta" value="/WEB-INF/pages/tiles/meta.jsp" />
        <put-attribute name="head" value="/WEB-INF/pages/tiles/head.jsp" />
        <put-attribute name="body" value="/WEB-INF/pages/login.jsp" />
    </definition>

</tiles-definitions>

Теперь я хочу установить класс «активный» для выбранного меню. Могу ли я сделать это с помощью плитки? Или я должен искать с Spring?


person gaspo53    schedule 13.03.2013    source источник


Ответы (1)


Подход 1 — JSP/JSTL и Spring/Bean

Измените плитку меню, чтобы построить меню, используя список некоторых объектов меню, которые вы можете установить в сеансе/модели. Объект меню может иметь логический флаг, указывающий, на какой из них установить активный класс.

Подход 2 — JavaScript/сеанс

Если вы не хотите делать это таким образом, вы можете использовать комбинацию классов HTML, JavaScript и атрибута сеанса/модели для выполнения задачи. Что бы вы сделали, так это перегрузите атрибут класса в ваших элементах LI, например:

<ul class="nav">
  <li class="person"><a href="/person">Person</a></li>
  <li class="student"><a href="/student">Student</a></li>
  <li class="superadmin"><a href="/superadmin">Superadmin</a></li>
</ul>

Затем у вас будет небольшой JS, использующий JSTL для получения класса, выбора правильного элемента LI и установки класса. С jQuery это может выглядеть так:

$(document).ready(function() {
  $('.${mySelectedClass}').addClass('active');
});

Это будет использовать jQuery для выбора правильного LI и добавления к нему «активного» класса.

Подход 3 – чистый JSTL с использованием URL

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

<c:out value="${pageContext.request.requestURL}"/>

Проанализируйте ${pageContext.request.requestURL} каким-либо значимым образом, и вы можете использовать его, чтобы определить, какой из них активен.

Подход 4. Чистый JavaScript с использованием URL

То же, что и выше, но с использованием JavaScript для получения текущего URL-адреса, его анализа и управления DOM, как мы делали в подходе 2.

Надеюсь, один из них поможет вам.

person CodeChimp    schedule 13.03.2013
comment
Большое спасибо! Извините за опоздание, но сайт не уведомил меня! - person gaspo53; 06.05.2013
comment
Вы должны установить этот ответ как решение, если оно вас удовлетворяет - person sam; 01.08.2013
comment
как насчет плитки? - person Adam; 25.11.2014
comment
Если нет какой-либо функции, которую я не знаю об Apache Tiles, вам все равно нужно что-то передать или использовать некоторую логику внутри плитки для переключения между активным и неактивным. Tiles просто позволяет вам инкапсулировать фрагмент JSP и связать его с модульным шаблоном. Возможно, есть способ получить if/else, но если и есть, то я о нем не знаю. - person CodeChimp; 25.11.2014