解决方案（感谢Ulrich Schwarz和hvelarde的意见）：

Question

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

我发现portlet列的HTML ID是＆＃34; portal-column-one＆＃34;我尝试在运行javascript的页面上添加一个按钮，将该元素的visibility属性设置为＆＃34; hidden＆＃34;但这似乎没有效果。我能够进入Firebug并添加style =＆＃34; visibility：hidden;＆＃34;到＆＃34; portal-column-one＆＃34;元素，它具有使区域不可见的效果，无需调整页面大小。

我正在使用Plone 4.1。我在除了包含导航，审核列表和最近更改的主页之外的所有页面上都配置了导航portlet的站点。

所以似乎必须可以在页面中嵌入一些javascript（我正在考虑将这个添加到我已经定制的plone.logo页面）。但我想它比我做过的少量刺伤更复杂。

提前感谢任何建议。

解决方案（感谢Ulrich Schwarz和hvelarde的意见）：

我到达的解决方案使用JavaScript设置CSS属性以显示/隐藏Portlets列（左侧）并展开内容列以填充porlets列填充的空间。

我开始自定义Plone标头模板，为用户添加链接以切换Porlets列的视图。我还在这个标题中添加了必要的javascript函数。

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

http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo

其中：

SERVER是您网站的地址和端口（例如localhost：8080）
SITE是您的Plone网站的简称

要创建此页面：

转到网站设置（作为管理员）
转到Zope管理界面
点击＆＃34; portal_view_customizations＆＃34;
点击＆＃34; plone.logo＆＃34; （或者至少这是我选择按钮的位置，以便它位于导航Portlet的正上方）
将以下内容添加到页面中：

<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>

6。保存页面

注意：

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

Answer 1

也许这只是设置正确属性的问题：您需要display:none，而不是visibility:hidden。

但即便如此，内容区域可能不会自动重排，您也需要（动态）更改它上面的类。具体而言，您需要将width-full和position-0类放在portal-column-content上，而不是width-1:2和position-1:4。

Answer 2

这必须通过javascript（jquery）实现客户端。

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

注意：您只需更改容器上的css类。

Answer 3

尝试adi.fullscreen，它尊重Plone的css结构，正如Ulrich Schwarz所提到的那样。

我是否可以让Plone4上的用户即时显示/隐藏Portlet列

解决方案（感谢Ulrich Schwarz和hvelarde的意见）：

3 个答案: