我可以让Plone4上的用户动态显示/隐藏Portlet列吗？
Plone中的Portlets非常方便，但我希望能够向用户提供一些方法，以便暂时隐藏/显示portlets列。也就是说，通过单击一个按钮，portlet列应该折叠，您将看到内容页的全宽度。然后再次单击，左边的portlets面板将展开，主内容页的宽度将缩小以容纳。
我观察到portlet列的HTML ID是“门户-列-一”，我尝试在运行javascript的页面中添加一个按钮，将该元素的可见性属性设置为“隐藏”，但这似乎没有任何效果。我能够进入Firebug并将style=“可见性:隐藏；”添加到“门户列-一”元素中，它的效果是使区域不可见，调整页面大小。
我用的是Plone 4.1。我在所有页面上都配置了导航portlet，但主页上有导航、评论列表和最近的更改。
因此，似乎有可能在页面中嵌入一些javascript (我正在考虑将其添加到plone.logo页面中，我已经对其进行了定制)。但我想这比我用过的几个刺刀要复杂得多。
事先谢谢您的建议。
解决方案(感谢Ulrich Schwarz和hvelarde的输入)：
我找到的解决方案使用JavaScript设置CSS属性以显示/隐藏Portlet列(左侧)，并展开content列以填充porlet列所填充的空间。
首先，我定制了Plone头模板，以添加一个链接供用户切换Porlets列的视图。我还将必要的javascript函数放在这个标头中。
若要自定义标题，请转到以下页面(需要作为Plone站点的管理员登录)：
customizations/zope.interface.interface-plone.logo
其中：
- 服务器是您站点的地址和端口(例如本地主机:8080)。
- 网站是您的Plone站点的短名称。
若要创建此页面，请执行以下操作：
- 转到站点设置(作为管理)
- 转到Zope管理界面
- 点击"portal_view_customizations“
- 点击"plone.logo“(或者至少这里是我选择放置按钮的地方，这样它就位于导航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>- 保存页面
备注：
- 我使用Firebug获得plone元素的名称。
- 我还使用Firebug对不同的设置进行了实验，以加快原型设计。例如，按照预期编辑HTML内联以验证设置。
- 直到左侧Portlet面板被隐藏，才会有轻微的延迟。对于我来说，这在Safari上是很明显的(这可能是因为它的速度有多快)，但在Firefox或IE上却不是这样。
回答 3
Stack Overflow用户
发布于 2011-12-29 13:20:08
也许这只是一个设置正确属性的问题:您需要display:none，而不是visibility:hidden。
但是即使这样，内容区域也可能不会自动重新流，您还需要(动态地)更改它上的类。具体来说，您需要将类width-full和position-0放在portal-column-content上，而不是width-1:2和position-1:4上。
Stack Overflow用户
发布于 2011-12-29 19:38:05
这必须通过javascript (jquery)客户端实现。
您必须首先阅读plone: deco.gs使用的css网格框架的文档。因此，git克隆了这个回购：https://github.com/limi/deco.gs，并打开网页浏览器。
注意:您只需更改容器上的css类即可。
Stack Overflow用户
发布于 2012-01-02 02:05:15
试试adi.fullscreen，它尊重Plone的css-结构，就像Ulrich深思熟虑地提到的那样。
https://stackoverflow.com/questions/8666365
复制相似问题
腾讯云开发者
