Jsf 如何保留/维护<;的折叠和扩展状态;p:panelMenu>;即使在页面刷新之后?
假设我有以下简单的Jsf 如何保留/维护<;的折叠和扩展状态;p:panelMenu>;即使在页面刷新之后?,jsf,primefaces,jsf-2.2,Jsf,Primefaces,Jsf 2.2,假设我有以下简单的 下面的脚本将展开的第一个子菜单(如果已折叠) var isMenuExpanded = jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible'); if(!isMenuExpanded) { jQuery('.ui-panelmenu-panel a').first().click(); } 存储面板当前状态(打开和关闭)的方法已经很好地涵盖了。使用ID
下面的脚本将展开
的第一个子菜单(如果已折叠)
var isMenuExpanded = jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible');
if(!isMenuExpanded)
{
jQuery('.ui-panelmenu-panel a').first().click();
}
存储面板当前状态(打开和关闭)的方法已经很好地涵盖了。使用ID设置每个值项 并且还使用类来响应单击
<p:panelMenu id="menu" style="width:200px">
<p:submenu id="submenu" label="Contents" styleClass="submenu">
<p:menuitem id="menu1" value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem id="menu2" value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem id="menu3" value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
</p:submenu>
</p:panelMenu>
使用localstorage javascript的变量会话
var param= Number(localStorage.param);
每次页面刷新时,获取localstorage变量会话以更改菜单状态
$(document).ready(function(){
var e1 = document.getElementById("menu_submenu");
if(Boolean(param)==true){
e1.style.display="block";
e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-state-active ui-corner-top";
e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-s";
}
else{
e1.style.display="none";
e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-corner-all";
e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-e";
}
单击事件以设置localstorage变量会话
$(document).on("click", ".submenu", function(e) {
var target = e.target || e.srcElement;
while (target && !target.id) {
target = target.parentNode;
}
if (!(target.id == 'menu1')){
var n= Number(param)==Number(0)?Number(1):Number(0);
param=Number(n);
localStorage.param=Number(n);
}
});
stateful
attruibut默认值为true
。如果要手动控制折叠/展开状态,应将其设置为false
,然后可以对子菜单元素使用expanded
属性
var param= Number(localStorage.param);
$(document).ready(function(){
var e1 = document.getElementById("menu_submenu");
if(Boolean(param)==true){
e1.style.display="block";
e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-state-active ui-corner-top";
e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-s";
}
else{
e1.style.display="none";
e1.parentNode.getElementsByTagName("h3")[0].className="ui-widget ui-panelmenu-header ui-state-default ui-corner-all";
e1.parentNode.getElementsByTagName("h3")[0].getElementsByTagName("span")[0].className="ui-icon ui-icon-triangle-1-e";
}
$(document).on("click", ".submenu", function(e) {
var target = e.target || e.srcElement;
while (target && !target.id) {
target = target.parentNode;
}
if (!(target.id == 'menu1')){
var n= Number(param)==Number(0)?Number(1):Number(0);
param=Number(n);
localStorage.param=Number(n);
}
});
<p:panelMenu stateful="false"></p:panelMenu>