网站图片都是站外连接对seo,minecraft服务器租用,信息管理系统网站模板,广西柳州市最近#xff0c;我不得不使用JSF 2.2创建一个响应式多级菜单。 要求#xff1a;菜单应#xff1a; 从后端使用动态结构创建 反应灵敏#xff0c;例如对桌面和移动设备友好 有带有导航链接的子菜单项 支持触摸事件 支持键盘辅助功能 PrimeFaces的菜单不是一个选择。 实… 最近我不得不使用JSF 2.2创建一个响应式多级菜单。 要求菜单应 从后端使用动态结构创建 反应灵敏例如对桌面和移动设备友好 有带有导航链接的子菜单项 支持触摸事件 支持键盘辅助功能 PrimeFaces的菜单不是一个选择。 实际上可以通过模型以编程方式创建它们但是 他们没有真正回应 子菜单项只能折叠/展开子菜单不能包含导航链接 … 好吧为什么不为响应式多级菜单选择任何基于jQuery的插件呢 有很多插件。 请参阅响应式导航和菜单模式的有用列表 。 我选择了FlexNav 。 但是如何输出动态菜单结构呢 uirepeat在这里不是一个选择因为该结构嵌套子菜单等不是先验的。 幸运的是OmniFaces具有otree 通过声明标记中的JSF组件或HTML元素可以完全控制树层次结构的标记。 otree本身不会呈现任何HTML标记。 正是我需要的 我最后得到了这个XHTML片段其中混合了otreeNodeotreeNodeItemotreeInsertChildren和由提到的FlexNav菜单定义HTML元素 h:outputScript libraryjs namejquery.flexnav.js/
h:outputStylesheet librarycss nameflexnav.css/ul idmainnavi classflexnav data-breakpoint640 rolenavigationo:tree value#{mainNavigationBean.treeModel} varitemo:treeNode level0o:treeNodeItemli classitema href#{item.href} title#{item.title}#{item.text}/ao:treeInsertChildren//li/o:treeNodeItem/o:treeNodeo:treeNodeulo:treeNodeItemlia href#{item.href} title#{item.title}#{item.text}/ao:treeInsertChildren//li/o:treeNodeItem/ul/o:treeNode/o:tree
/ulh:outputScript idmainnaviScript targetbody$(document).ready(function () {$(#mainnavi).flexNav({calcItemWidths: true});});
/h:outputScript 带菜单项的OmniFaces的TreeModel是通过编程创建的。 Java代码如下所示 public TreeModelNavigationItemDTO getTreeModel() {// get menu model from a remote serviceNavigationContainerDTO rootContainer remoteService.fetchMainNavigation(...);TreeModelNavigationItemDTO treeModel new ListTreeModel();buildTreeModel(treeModel, rootContainer.getNavItem());return treeModel;
}private void buildTreeModel(TreeModelNavigationItemDTO treeModel, ListNavigationItemDTO 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
