Navigator

[NickProstoNick]

Всем привет!
Вот заморочился с компонентом EXLib Navigator.
Пытаюсь сделать его динамическим.
Нашел в нем возможность подгружать содержимое из вида (dominoViewEntriesTreeNode), но вот беда - не могу организовать выбор конкретного пункта меню из этих подгруженных

Кто-то пробовал такое делать?

Нужно сделать такое

 

[Zeka]

Сорри, плохо говорю по русски. Что значит "организовать выбор конкретного пункта меню из этих подгруженных"?

dominoViewEntriesTreeNode можно пользоваться примерно так:
1) В var указываешь название переменной, котораю будет сожержать ViewEntry, т.е. текущий пункт меню.
2) viewName и labelColumn - понятно
3) В href - яваскриптом или ещё как-то определяем что, будет открываться при клике по пункту меню.

Но я подозреваю, тебя больше интересует, как покрасить текущий пункт меню?
Для этого надо в "selected" написать какой-то код, который будет определять, является ли конкретный пункт меню активным в данный момент.
Для этого можно, например, сравнить текущий урл со значением из ViewEntry (var): #{java script:return '/'+e.getColumnValues().get(1)==facesContext.getExternalContext().getRequestSer
vletPath()}
Теперь самое интересное!
Если функция в "selected" вернула true, то в сгенерированом html'е этот пункт меню, будет иметь класс "lotusSelected".
Например открыта вторая страница:

<ul id="view:_id1:_id2:navigator1">
<li role="menuitem"><a href="page1.xsp" style="text-decoration:none">Page One</a></li>
<li role="menuitem" class="lotusSelected"><a href="page2.xsp" style="text-decoration:none">Page Two</a></li>
<li role="menuitem"><a href="page3.xsp" style="text-decoration:none">Page Three</a></li>
</ul>

т.е. остаётся добавить соответствующий CSS:

.lotusSelected{
color: red;
}

Сам код навигатора:

<xe:navigator id="navigator1">
<xe:this.treeNodes>
<xe:dominoViewEntriesTreeNode viewName="MainMenu" labelColumn="Title" var="e" href="#{java script:e.getColumnValues().get(1)}">
<xe:this.selected><![CDATA[#{java script:return '/'+e.getColumnValues().get(1)==facesContext.getExternalContext().getRequestServletPath()}]]></xe:this.selected>
</xe:dominoViewEntriesTreeNode>
</xe:this.treeNodes>
</xe:navigator>

 

[NickProstoNick]

Спасибо!
Вопрос с xe:this.selected не мог "раскурить"
[doublepost=1494591335,1366267536][/doublepost]Продолжаю вопросы по навигатору..
Ситуация вот какая... в навигаторе 80-100 элементов.
Навигатор помещен в div-контейнер, который ограничен 20-ю строками по высоте. При переполнение div - появляется скрол по высоте.
Так вот ситуация: например надо кликнуть на 70-й элеменит, обновить страницу (включая навигатор), но оставить 70-й элемент в фокусе ( оставить видимым в div-контейнере) . Как такое можно организовать?

 

[romych2004]

А у тебя, судя по всему, обновляется вся страница(ну или переход на другую страницу)?
Вариант 1 - переделать на SPA(контрол dynamicContent)
Вариант 2 - где-нибудь на онлоад добавить csjs, который будет мотать к нужному элементу

 

[NickProstoNick]

Да, обновляется вся страница. Тут без вариантов. Надо помечать выбранную строку в навигаторе.
Касательно скролить - это понятно. Вопрос как?

 

[romych2004]

jquery используется? или только dojo?

UPD: в общем напишу на доджо, доджо точно есть
Чтобы не делать лишних запросов на сервер - устанавливаем куки, а при загрузке - скидываем их.

На всякий случай, если вдруг страница не откроется и чтобы при следующем заходе нам не прокрутывало - устанавливаем куки на 3 минуты

<xp:this.resources>
        <xp:dojoModule name="dojo.cookie"></xp:dojoModule>
    </xp:this.resources>
    <xe:navigator id="navigator1" style="height: 200px; width: 200px; overflow: scroll;">
        <xe:this.treeNodes>
            <xe:dominoViewEntriesTreeNode var="entry" viewName="XXX" labelColumn="XXX">
                <xe:this.onClick><![CDATA[window.location.href = 'test2.xsp';
var date = new Date();
date.setTime(date.getTime() + (3 * 60 * 1000)); // 3 min
dojo.cookie('navigator-scroll', dojo.attr(dojo.byId('#{id:navigator1}'), 'navigator-scroll'), {expires: date});]]></xe:this.onClick>
            </xe:dominoViewEntriesTreeNode>
        </xe:this.treeNodes>
    </xe:navigator>
    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[dojo.addOnLoad(function() {
    var navigatorNode = dojo.byId('#{id:navigator1}');  
    dojo.attr(navigatorNode, 'navigator-scroll', dojo.cookie('navigator-scroll') || 0);
    dojo.cookie('navigator-scroll', null, {expires: -1});
    navigatorNode.scrollTop = dojo.attr(navigatorNode, 'navigator-scroll');
  
  
    dojo.connect(navigatorNode, 'scroll', function() {
        dojo.attr(this, 'navigator-scroll', this.scrollTop);
    });
});]]></xp:this.value>
    </xp:scriptBlock>

Если будут вопросы - спрашивай.
Еще вариант - вместо куки значение передавать через УРЛ. Можно через хэш.. Ну это уж как больше нравится. Если надо - могу расписать