Портлеты в Plone довольно удобны, но я хотел бы иметь возможность предоставить пользователям какой-либо метод для временного скрытия / отображения столбца портлетов. То есть при нажатии кнопки столбец портлетов должен свернуться, и вы увидите страницу содержимого во всю ширину. Затем нажмите еще раз, и панель портлетов слева раскроется, а ширина страницы основного контента уменьшится, чтобы вместить ее.
Я заметил, что HTML-идентификатор столбца портлетов - "portal-column-one", и я попытался добавить кнопку на страницу, которая запускает javascript, чтобы установить для свойства видимости этого элемента значение "hidden", но, похоже, это не имеют никакого эффекта. Я смог зайти в Firebug и добавить style = "visibility: hidden;" элементу portal-column-one, и это сделало регион невидимым без изменения размера страницы.
Я использую Plone 4.1. У меня есть сайт, настроенный с портлетом навигации на всех страницах, кроме главной страницы, на которой есть Навигация, Список просмотра и Последние изменения.
Таким образом, кажется, что возможно внедрить некоторый javascript на страницу (я думал добавить его на страницу plone.logo, которую я уже настроил). Но я думаю, что это сложнее, чем несколько ударов, которые я сделал на нем.
Заранее спасибо за любой совет.
Решение (благодаря материалам Ульриха Шварца и Хвеларде):
Решение, к которому я пришел, использует JavaScript для установки атрибутов CSS для отображения / скрытия столбца портлетов (левая сторона) и расширения столбца содержимого, чтобы заполнить пространство, заполненное столбцом портлетов.
Я начал с настройки шаблона заголовка Plone, чтобы добавить ссылку для пользователя на переключение вида столбца Porlets. Я также поместил необходимые функции JavaScript в этом заголовке.
Чтобы настроить заголовок, перейдите на следующую страницу (необходимо войти в систему как администратор вашего сайта Plone):
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
Где:
- SERVER - это адрес и порт вашего сайта (например, localhost: 8080)
- САЙТ - это краткое название вашего сайта Plone
Для создания этой страницы:
- Перейти к настройке сайта (от имени администратора)
- Перейти к интерфейсу управления Zope
- Нажмите на "portal_view_customizations"
- Нажмите «plone.logo» (или, по крайней мере, именно здесь я решу поместить кнопку, чтобы она находилась чуть выше навигационного портлета)
- Добавить на страницу следующее:
<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. Сохранить страницу
Примечания:
- Я получил имена элементов plone div с помощью Firebug.
- Я также использовал Firebug для экспериментов с различными настройками, чтобы ускорить создание прототипов. Например, редактирование встроенного HTML-кода для проверки правильности настроек.
- Существует небольшая задержка, пока панель левого портлета не будет скрыта. Для меня это очевидно только в Safari (что, вероятно, связано с его скоростью), но не в Firefox и IE.