‹Li class = active› в зависимости от страницы, на которой вы находитесь

На xpage у меня есть панель навигации. На этой навигационной панели у вас есть значок, который должен показывать, на какой странице вы находитесь. Как я могу вычислить и поместить этот класс в правильный li

Я пробовал следующее, что не работает:

        <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active">
                <xp:text escape="false" id="computedField1">
                    <xp:this.value><![CDATA[#{javascript:active = @RightBack(view.getPageName(),'/');
                     main ="<a href='product.xsp'>PRODUCTS</a>";
                     home ="<a href='home.xsp'>HOME</a>";
                     if (active =="product.xsp"){
                     return main
                     }
                     else {
                     return home
                     }}]]></xp:this.value>
                </xp:text>

            </li>
            <li>
                <a href="#">NEXT LINK</a>
            </li>
            <li>
                <a href="#">ANOTHER LINK</a>
            </li>
        </ul>
    </div>

На самом деле я хотел бы рассчитать класс. Когда я нахожусь на ГЛАВНОЙ странице, ссылка ГЛАВНАЯ должна активировать класс. Когда я нахожусь на странице ПРОДУКТЫ, ссылка HOME должна стать нормальным li, а продукты li должны получить активный класс li.

Как я могу рассчитать класс?

Насколько я знаю, в SSJS нет возможности добавить класс?


twitter-bootstrap xpages xpages-ssjs
person Marc Jonkers    schedule 27.05.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете вычислять свойства для сквозных тегов, но не можете использовать this. обозначения для них. Для такого рода вещей я часто делаю:

<li class="${view.pageName == '/home.xsp' ? 'active' : ''}">...</li>
<li class="${view.pageName == '/products.xsp' ? 'active' : ''}">...</li>
person Jesse Gallagher    schedule 27.05.2014
comment
На самом деле продукты - это раскрывающийся список (раскрывающийся список классов), поэтому он должен стать активным (раскрывающийся список классов активен), когда в этом раскрывающемся списке будет нажата одна из ссылок. Любое решение для этого? - person Marc Jonkers; 27.05.2014
comment
в мире oneUI наш настраиваемый элемент управления макетом, который находится на каждой странице, имеет настраиваемое свойство navPath. это передается в свойство выбора узлов ссылки в элементе управления макетом приложения. Работает хорошо и очень гибко. Возможно, что-то подобное можно было бы сделать здесь с помощью регулярного выражения ... - person David Leedy; 27.05.2014
comment
Предложение Дэвида хорошее. Настоящий ответ, который я использую, - это написать средство визуализации для элемента управления ‹xe: navigator /› в духе Bootstrap4XPages - в средстве визуализации есть методы для проверки активности какого-либо дочернего элемента. Однако это PITA - маршрут соответствия navigationPath / regex выполняется намного быстрее. например class = # {javascript: /^\/Posts\/.*$/.test(compositeData.navPath)? 'активное открытие': ''} - person Jesse Gallagher; 27.05.2014
comment
Джесси, есть ли способ поместить в ваш пример оператор или: li class = $ {view.pageName == '/home.xsp'? и т.д. Это может быть решением для меня, так как у меня только 2 страницы в раскрывающемся списке. - person Marc Jonkers; 28.05.2014
comment
Мне просто нужно добавить или перед знаком? а потом я могу поставить другое имя страницы. Кажется, так работает, спасибо! - person Marc Jonkers; 28.05.2014

arrow_upward
0
arrow_downward

Марк - Интересно, может ли это сработать для тебя.

В самом XPage под всеми свойствами вы можете добавлять атрибуты на страницу. Теоретически они похожи на настраиваемые свойства настраиваемого элемента управления. Поэтому я бы подумал, что, возможно, вы могли бы добавить атрибут с названием что-то вроде «selectedMenu». И присвойте ему значение имени элемента, который вы хотите выделить.

затем в настраиваемом элементе управления навигационной панели вы добавляете код для получения атрибута, а затем добавляете соответствующий класс в элемент меню navBar, который вам нужен.

Я никогда раньше не использовал такие атрибуты XPage, но кто-то уже работает. Я думаю, Майк использовал их, чтобы сделать то же самое, что и вы на самом деле.

Я нашел еще один вопрос SO, в котором говорится о том, как получить доступ к свойствам.

Получение свойств / параметров с уровня страницы

Это может быть хорошим выходом.

person David Leedy    schedule 28.05.2014