我可以让Plone4上的用户动态显示/隐藏Portlet列吗

Plone中的Portlet非常方便，但我希望能够为用户提供一些方法，以便能够临时隐藏/显示Portlet列。也就是说，通过单击一个按钮，portlet列应该折叠起来，您可以看到内容页面的全宽。然后再次单击，左侧的Portlet面板将展开，主内容页宽度将缩小以适应需要

我观察到Portlet列的HTML ID为“portal column one”，我尝试在运行javascript的页面中添加一个按钮，将该元素的可见性属性设置为“hidden”，但这似乎没有效果。我能够进入Firebug并将style=“visibility:hidden；”添加到“portal column one”元素中，它的效果是使区域不可见，而不调整页面大小

我正在使用Plone 4.1。我在网站的所有页面上都配置了导航portlet，除了主页上有导航、评论列表和最近的更改

因此，似乎一定可以在页面中嵌入一些javascript（我正在考虑将其添加到我已经定制的plone.logo页面中）。但我想这比我做的几次尝试要复杂得多

提前谢谢你的建议

解决方案（感谢Ulrich Schwarz和Hvelard的投入）： 我找到的解决方案使用JavaScript设置CSS属性以显示/隐藏Portlet列（左侧），并扩展content列以填充Portlet列填充的空间

我首先定制Plone标题模板，为用户添加一个链接，以切换Porlets列的视图。我还将必要的javascript函数放在这个标题中

要自定义标题，请转到以下页面（需要以Plone站点管理员身份登录）：

其中：

• 服务器是站点的地址和端口（例如localhost:8080）
• SITE是Plone站点的简称

要创建此页面，请执行以下操作：

转到站点设置（以管理员身份）

转到Zope管理界面

点击“门户\查看\自定义”

单击“plone.logo”（或者至少在这里我选择将按钮放置在导航Portlet的正上方）

将以下内容添加到页面：

---

函数getById（id）{
返回文档.getElementById（id）；
}
函数TogglePortletsPanel（）{
var dispVal=getById（'portal-column-one'）。style.display
如果（dispVal==“无”）{//正常显示
SetPortletsPanelState（“内联”）；
}else{//全屏内容
SetPortletsPanelState（“无”）；
}
}
函数SetPortletsPanelState（dispVal）{
var nav=getById（'portal-column-one'）；
var content=getById（'portal-column-content'）；
如果（dispVal==“无”）{//正常显示
nav.style.display='none'；
content.className='cell width full position-0'；
//将cookie设置为更新值
setCookie（“portletDisplayState”，“无”，365）；
}else{//全屏内容
nav.style.display='inline'；
content.className='cell width-3:4 position-1:4'；
//将cookie设置为更新值
setCookie（“portletDisplayState”，“内联”，365）；
}
}
函数InitializePortletsPanelState（）{
var portletDisplayState=getCookie（“portletDisplayState”）；
//警报（“portletDisplayState=“+portletDisplayState”）
if（portletDisplayState！=null）SetPortletsPanelState（portletDisplayState）；
}
函数setCookie（c_名称、值、exdays）{
//警报（c_名称+“=”+值）；
//cookie格式：document.cookie='name=value；expires=Thu，2001年8月2日20:47:11 UTC；path=/'
var exdate=新日期（）；
exdate.setDate（exdate.getDate（）+exdays）；
var exp=（（exdays==null）？“”：“expires=“+exdate.toutString（））；
document.cookie=c_name+“=”+转义（值）+exp+“路径=/”；
}
函数getCookie（c_名称）{
变量i，x，y，ARRcookies=document.cookie.split（“；”）；
对于（i=0；i

6.保存页面

注:

• 我使用Firebug获得了plone div元素的名称
• 我还使用Firebug对不同的设置进行了实验，以加速原型制作。例如，编辑HTML内联以验证设置是否符合预期
• 在左侧Portlet面板被隐藏之前，会有一点延迟。这在Safari上对我来说很明显（这可能是因为它的速度有多快），但在Firefox或IE上则不明显

---

也许这只是设置正确属性的问题：您想要的是

显示：无

，而不是

可见性：隐藏

但即使这样，内容区域也可能不会自动回流，您还需要（动态）更改其上的类。

---

具体来说，您需要将类

width-full

和

position-0

放在

portal-column-content

上，而不是

width-1:2

和

position-1:4

可能只是设置正确属性的问题：您想要

显示：无

，而不是

可见性：隐藏

但即使这样，内容区域也可能不会自动回流，您还需要（动态）更改其上的类。

---

具体地说，您需要将类

全宽

和

位置-0

放在

门户列内容
上，而不是
宽度-1:2
和
位置-1:4
这必须通过javascript（jquery）在客户端实现

您必须首先阅读关于plone:deco.gs使用的css网格框架的文档。网站已关闭，git克隆此repo:并在webbrowser中打开页面

注意：您只需更改容器上的css类。
这必须通过javascript（jquery）在客户端实现

您必须首先阅读关于plone:deco.gs使用的css网格框架的文档。网站已关闭，git克隆此repo:并在webbrowser中打开页面

注意：您只需更改容器上的css类。
试试看，它尊重Plone的css结构
<script>
function getById(id) {
  return document.getElementById(id);
}
function TogglePortletsPanel() {
  var dispVal = getById('portal-column-one').style.display
  if( dispVal == "none") { // Normal display
    SetPortletsPanelState("inline");
  } else { // Full Screen Content
    SetPortletsPanelState("none");
  }
}
function SetPortletsPanelState(dispVal) {
  var nav = getById('portal-column-one');
  var content = getById('portal-column-content');
  if( dispVal == "none") { // Normal display
    nav.style.display='none';
    content.className='cell width-full position-0';
    // Set cookie to updated value
    setCookie("portletDisplayState","none",365);
  } else { // Full Screen Content
    nav.style.display='inline';
    content.className='cell width-3:4 position-1:4';
    // Set cookie to updated value
    setCookie("portletDisplayState","inline",365);
  }
}
function InitializePortletsPanelState() {
  var portletDisplayState=getCookie("portletDisplayState");
//alert("portletDisplayState="+portletDisplayState)
  if (portletDisplayState!=null) SetPortletsPanelState(portletDisplayState);
}
function setCookie(c_name,value,exdays) {
//alert(c_name+"="+value);
// cookie format: document.cookie = 'name=value; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var exp= ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie=c_name + "=" + escape(value) + exp + "; path=/";
}
function getCookie(c_name) {
  var i,x,y,ARRcookies=document.cookie.split(";");
  for (i=0;i<ARRcookies.length;i++) {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
    x=x.replace(/^\s+|\s+$/g,"");
    if (x==c_name)  return unescape(y);
  }
}
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {oldonload(); }
      func();
    }
  }
}

addLoadEvent(InitializePortletsPanelState);

</script>
<a style="font-size:50%;" href="javascript:TogglePortletsPanel();">Toggle Portlets Panel</a>