FCafe  マルチモード折り畳み

 今月後半から 折り畳み に終始しております。 10月もまだ数日残ってますのでもう少し。
各項目を独立に開閉したり、目的の要素を開く時それ以外の要素を畳んでしまったり出来る訳ですが、この二つの形式(個別モード・排他モード)をグループ毎に指定可能だったら便利ではないでしょうか。
・・と思いまして前記事のスクリプトを更に改造してみました。
少しでもスペースを詰めたい領域では 「排他展開モード」を、 要素同士を比較したいグループには「個別展開モード」 を用いる、というように使い分ける事ができます。
加えて更に、全項目を展開状態にするSW(ボタン)設置機能も追加してみました
(勿論、ボタンを表示しない設定にもできます)

.

SAMPLE


【 設置法 】 折り畳みが行われるグループの記述形式は前記事と同じです。
設置するスクリプトを以下のものに変更します。

<script type="text/javascript"><!--
function mltFold(IDname,color1,color2,mode,SW){
if (document.getElementById){
 var D=document.getElementById(IDname);
 if (SW==1){
 var S='<p class="SA"><input type="button" onclick="SA(this)" value="Show All" /></p>';
  D.innerHTML=S+D.innerHTML;
 }
 var A=D.childNodes;
 for(i=0;i<A.length;i++){ if(A[i].nodeType!=1){
  D.removeChild(A[i]);
 } }
A=D.childNodes;
for (i=0;i<A.length;i++){
 if (A[i].className){ if (A[i].className.indexOf("sw")>-1){
  A[i].style.cursor ="pointer";
  A[i].title ="Click to OPEN/CLOSE ";
  A[i].onmouseover=function(){this.style.backgroundColor=color1}
  A[i].onmouseout=function(){this.style.backgroundColor=color2}
  if (mode==1){  A[i].onclick=function() {
   if (this.className=="sw0"){
    this.nextSibling.style.display="block";this.className="sw1";
   } else {
    this.nextSibling.style.display="none";this.className="sw0";
  } } } else {  A[i].onclick=function() {
   var f =this.className;  var G = this.parentNode.childNodes;
   for (j=0;j<G.length;j++){ 
    if (G[j].className){ if (G[j].className.indexOf("sw")>-1){
     G[j].nextSibling.style.display="none";G[j].className="sw0";
   } } }
   if (f=="sw0"){
    this.nextSibling.style.display="block";this.className="sw1";
  } } }
  if (A[i].className=="sw0"){
   A[i].nextSibling.style.display="none";
} } } } } }

function SA(w){
 var X=w.parentNode.parentNode.childNodes;
 for(i=0;i<X.length;i++){
  if(X[i].className){ if(X[i].className.indexOf("sw")>-1){
    X[i].nextSibling.style.display="block"; X[i].className="sw1";
} } } }

mltFold("Entry","#fdd","#ddf",0,1);  //(例)
mltFold("Plug1","#66a","#aae",1,0);  //(例)
//--></script>

 

【 解 説 】 関数 mltFold は5つの引数を持ちます。  左から順に
  groupID、マウスon色、マウスout色、開閉モード、全項展開SWの有無  。
『開閉mode』は 0 で排他、1 で個別。     『全展開SW』は 0 で省略、1 で設置
*  全項目展開SW(ボタン) の性状はclass名 SA で設定できます

対象側 class名で指定する初期展開状態を含めると 設定可能項目も5つに。
細部のカスタマイズもそれ程難しくないと思われますので宜しければお試し下さい

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/385-e9c58cca

Shown after Admisson
.

≫ FC2blog ミリオン突破 タイトルの目次化 ≪

2006 / 10 / 29  Sun
Entry   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced