Ploneのポートレットは非常に便利ですが、ユーザーに一時的に表示/非表示できる方法を提供したいと考えていますポートレット列。つまり、ボタンをクリックすると、ポートレット列が折りたたまれ、コンテンツページが全幅で表示されます。もう一度クリックすると、左側のポートレットパネルが展開され、メインのコンテンツページの幅が収縮して調整されます。Plone4上のユーザーがポートレット列をオン/オフで表示/非表示にできるようにする
ポートレット列のHTML IDが "portal-column-one"であることを確認しました。この要素の可視性プロパティを "hidden"に設定するためのJavaScriptを実行するページにボタンを追加しようとしましたが、効果がない。私はFirebugに入り、スタイル= "visibility：hidden;を追加することができました。 「portal-column-one」要素に追加すると、ページのサイズを変更することなく領域を非表示にする効果がありました。
私はPlone 4.1を使用しています。 Navigation、Review List、Recent Changesがあるメインページ以外のすべてのページにナビゲーションポートレットを設定してサイトを作成しました。
これは、ページにJavaScriptを埋め込むことができるように思われる（私は既にカスタマイズしたplone.logoページにこれを追加することを考えていた）。しかし、私はそれを作った数少ないスタブよりも複雑だと思う。
アドバイスを事前にいただきありがとうございます。
ソリューション（ウルリッヒ・シュワルツとhvelardeからの入力のおかげで）：私が到着したソリューションは、CSSを表示/ポートレットカラム（左側）非表示にする属性を設定するにはJavaScriptを使用しています
と記入する内容欄を拡大ポーレット柱が満たされた空間。
Ploneヘッダーテンプレートをカスタマイズして、ユーザーがPorlets列の表示を切り替えるためのリンクを追加することから始めました。私はまた、このヘッダーに必要なjavascript関数を配置します。
- SERVERはアドレスで、：どこ
http://SERVER/SITE/portal_view_customizations/zope.interface.interface-plone.logo
：
次のページに移動し、ヘッダーをカスタマイズするには（Ploneサイトの管理者としてログインする必要があります）あなたのサイトのポート番号（例：localhost：8080）
- サイト名はPloneサイトの短い名前です
このページを作成するには： "plone.logo" オン "portal_view_customizations"
- ゴー（管理者など）
- Go]をZopeの管理インターフェース
- にクリックします（または少なくともこれはナビゲーションポートレットのすぐ上に位置するようにボタンを置く場所です）
<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インラインを編集して、設定が期待どおりに行われているかどうかを確認します。
- [左ポートレット]パネルが非表示になるまでわずかな遅延があります。これは私のためにSafari上でのみ明らかです（おそらくそれが速いためです）が、FirefoxやIEではそうではありません。
次の質問に対するDavid Glickの回答をご覧ください：http://stackoverflow.com/questions/5872306/how-can-i-remove-portlets-in-edit-mode-with-plone-4 – hvelarde
David Glickの答えは、私が望むアプローチかもしれません。 この方法では、URL Paramsなどで左パネルを表示または非表示にする設定ができますか？私はその答えの中で「要求にいくつかの変数を設定する」ことが意味することにはほとんど従っていません。 目的は、ユーザーがナビゲーションパネルを削除し、ブラウズしてから復元できるようにすることです。 – Steve
JavaScriptのコードを使用して、ユーザーの設定を保存するCookieを設定できると思います。 – hvelarde