OpenPNE・各メニューの折りたたみ化

OpenPNE・各メニューの折りたたみ化

OpenPNE2.4RC3にて動作確認

メニューの折りたたみ化とは？

例として、フレンドリストを折りたたみ化してみます。下記画像のようにフレンドリストの＋アイコンをクリックする毎に、表示、表示無しと切り替えています。
各種実装方法がありますが比較的簡単な方法です。独自機能の実装などにも向いていると思います。
簡単な動作見本です。別のページへの組み込みの際などは、こちらのページソースを確認して頂いた方がわかりやすいと思います。

関係するファイル

ShowMore.js
h_home.tpl (参考改造例です)
inc_html_header.tpl

表示例

通常表示[フレンドリスト]

折りたたみ表示[フレンドリスト]

JSファイルの設置

外部javascriptファイルの読み込み設定

inc_html_header.tpl

<head></head>内に下記１行を追加 ===
<script language=”JavaScript”　type=”text/JavaScript”src=”./js/ShowMore.js”></script>

ShowMore.js

MTの改造例を掲載されていたchiricoyetさんのオリジナルをベースにしてます。
(以前のサイト)http://chiricoyet.ponto.jp

function showMore(varA1, varB1){
	varBD = ('varB' + (varA1));
	varRVS = ('varR' + (varA1));
	varMORE = ('varM' + (varA1));
	if( document.getElementById ) {
		oElem = document.getElementById(varBD);
		oElems = oElem.childNodes;
		abs = true;
		if( varB1 != 0 ) {
			for ( j=0; j<oElems.length; j++ ) {
				if (oElems[j].tagName == "DIV") {
					if (!abs) {
						oElems[j].style.display = "block";
					} else {
						oElems[j].style.display = "none";
					}
					abs = false;
				}
			}
			document.getElementById(varRVS).className = "";
			document.getElementById(varMORE).className = "open";
		} else {
			for ( j=0; j<oElems.length; j++ ) {
				if (oElems[j].tagName == "DIV") {
					if (!abs) {
						oElems[j].style.display = "none";
					} else {
						oElems[j].style.display = "block";
					}
					abs = false;
				}
			}
			document.getElementById(varRVS).className = "open";
			document.getElementById(varMORE).className = "";
		}
		oElem.style.display = "block"; 
	} else {
		location.href = varB1;
		return true;
	}
}
 
function showMoreMenu(varA1, varB1){
	varHIDE = ('varMH_' + (varA1));
	varSHOW = ('varMS_' + (varA1));
	varBODY = ('varB_' + (varA1));
	if( document.getElementById ) {
		oElemHide = document.getElementById(varHIDE);
		oElemShow = document.getElementById(varSHOW);
		oElemBody = document.getElementById(varBODY);
		if( varB1 == 1 ) {
			oElemShow.style.display = "none";
			oElemHide.style.display = "block";
			oElemBody.style.display = "none";
		} else {
			oElemShow.style.display = "block";
			oElemHide.style.display = "none";
			oElemBody.style.display = "block";
		}
	} else {
		return false;
	}
}

テンプレートファイルの改造例

フレンドリストを折りたたみ式にします

h_home.tpl

下記パッチファイルを、OpnePNEDIR/webapp/modules/pc/templates/ に patch.txt などとして保存
patch < patch.txt を実行

"－"アイコン

＋アイコンを元にした－アイコンを作りましたので、OpenPNEDIR/public_html/skin/icon_title_2.gif に保存
上下矢印を利用する場合はこちら

patch.txt

--- h_home.tpl.org	2006-09-29 23:46:40.000000000 +0900
+++ h_home.tpl	2006-10-03 08:46:35.000000000 +0900
@@ -163,17 +163,28 @@
 <!-- *ここから：マイフレンドリスト＞＞内容* -->
 ({*ここから：header*})
 <!-- ここから：小タイトル -->
+<div id="varMS_Friend">
 <table border="0" cellspacing="0" cellpadding="0" style="width:268px" class="border_07">
 <tr>
-<td style="width:25px;" class="bg_06"><img src="({t_img_url_skin filename=icon_title_1})" style="width:25px;height:19px;" class="dummy"></td>
+<td style="width:25px;" class="bg_06"><a href="#_top" onclick="showMoreMenu('Friend', 1);return false;" ><img src="({t_img_url_skin filename=icon_title_2})" style="width:25px;height:19px;" class="dummy" title="リストを閉じる"></a></td>
+<td style="width:241px;" class="bg_06"><span class="b_b c_00">({$WORD_MY_FRIEND})リスト</span></td>
+</tr>
+</table>
+</div>
+<div id="varMH_Friend" style="display: none">
+<table border="0" cellspacing="0" cellpadding="0" style="width:268px" class="border_07">
+<tr>
+<td style="width:25px;" class="bg_06"><a href="#_top" onclick="showMoreMenu('Friend', 0);return false;" ><img src="({t_img_url_skin filename=icon_title_1})" style="width:25px;height:19px;" class="dummy" title="リストを開く"></a></td>
 <td style="width:241px;" class="bg_06"><span class="b_b c_00">({$WORD_MY_FRIEND})リスト</span></td>
 </tr>
 </table>
+</div>
 <!-- ここまで：小タイトル -->
 ({*ここまで：header*})
 ({*ここから：body*})
 <!-- ここから：主内容 -->
 ({if $smarty.const.OPENPNE_USE_FLASH_LIST})
+<div id="varB_Friend">
 <table border="0" cellspacing="0" cellpadding="0" style="width:266px;" class="bg_07">
 <tr>
 <td class="bg_07"><img src="./skin/dummy.gif" style="width:1px;"></td>
@@ -201,6 +212,7 @@
 </tr>
 </table>
 ({else})
+<div id="varB_Friend">
 <table border="0" cellspacing="1" cellpadding="2" style="width:268px" class="bg_07">
 
 ({if $c_friend_list[0]})
@@ -349,9 +361,13 @@
 <td style="width:268px;" class="bg_07" colspan="6"><img src="./skin/dummy.gif" style="width:1px;height:1px;" class="dummy"></td>
 </tr>
 </table>
+</div>
 <!-- ここまで：小メニュー -->
 ({*ここまで：footer*})
 <!-- *ここまで：マイフレンドリスト＞＞内容* -->
+<script language="JavaScript" type="text/JavaScript">
+showMoreMenu('Friend', 0);
+</script>
 </td>
 </tr>
 </table>

デフォルト表示の変更

メニューオンをデフォルト値とする　　showMoreMenu(’Friend’, 0);
メニューオフをデフォルト値とする　　showMoreMenu(’Friend’, 1);

E-PARLOR : Document