響應式多級菜單 側邊菜單欄

最近，我不得不使用JSF 2.2創建一個響應式多級菜單。 要求：菜單應：

• 從后端使用動態結構創建
• React靈敏，例如對桌面和移動設備友好
• 有帶有導航鏈接的子菜單項
• 支持觸摸事件
• 支持鍵盤輔助功能

PrimeFaces的菜單不是一個選擇。 實際上，可以通過模型以編程方式創建它們，但是：

• 他們沒有真正回應
• 子菜單項只能折疊/展開子菜單，不能包含導航鏈接
• …

好吧，為什么不選擇任何基于jQuery的響應式多級菜單插件呢？ 有很多插件。 請參閱響應式導航和菜單模式的有用列表 。 我選擇了FlexNav 。

但是如何輸出動態菜單結構呢？ ui：repeat在這里不是一個選擇，因為該結構（嵌套子菜單等）不是先驗的。 幸運的是，OmniFaces帶有o：tree ，它可以通過在標記中聲明JSF組件或HTML元素來完全控制樹層次結構的標記。 o：tree本身不會呈現任何HTML標記。 正是我需要的！

我最后得到了這個XHTML片段，它混合了o：treeNode，o：treeNodeItem，o：treeInsertChildren和由提到的FlexNav菜單定義HTML元素：

<h:outputScript library="js" name="jquery.flexnav.js"/> <h:outputStylesheet library="css" name="flexnav.css"/><ul id="mainnavi" class="flexnav" data-breakpoint="640" role="navigation"><o:tree value="#{mainNavigationBean.treeModel}" var="item"><o:treeNode level="0"><o:treeNodeItem><li class="item"><a href="#{item.href}" title="#{item.title}">#{item.text}</a><o:treeInsertChildren/></li></o:treeNodeItem></o:treeNode><o:treeNode><ul><o:treeNodeItem><li><a href="#{item.href}" title="#{item.title}">#{item.text}</a><o:treeInsertChildren/></li></o:treeNodeItem></ul></o:treeNode></o:tree> </ul><h:outputScript id="mainnaviScript" target="body">$(document).ready(function () {$("#mainnavi").flexNav({'calcItemWidths': true});}); </h:outputScript>

帶菜單項的OmniFaces的TreeModel是通過編程創建的。 Java代碼如下所示：

public TreeModel<NavigationItemDTO> getTreeModel() {// get menu model from a remote serviceNavigationContainerDTO rootContainer = remoteService.fetchMainNavigation(...);TreeModel<NavigationItemDTO> treeModel = new ListTreeModel<>();buildTreeModel(treeModel, rootContainer.getNavItem());return treeModel; }private void buildTreeModel(TreeModel<NavigationItemDTO> treeModel, List<NavigationItemDTO> items) {for (NavigationItemDTO item : items) {buildTreeModel(treeModel.addChild(item), item.getNavItem());} }

最終結果（桌面版本）：

請注意，子菜單是可單擊的，并且可以在鼠標懸停時展開。

您會發現，JSF非常靈活，有時您不需要成熟的組件。 玩得開心！

翻譯自: https://www.javacodegeeks.com/2014/12/building-dynamic-responsive-multi-level-menus-with-plain-html-and-omnifaces.html

響應式多級菜單 側邊菜單欄

總結

以上是生活随笔為你收集整理的响应式多级菜单 侧边菜单栏_使用纯HTML和OmniFaces构建动态响应的多级菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。