FCafe  グループ要素の折り畳み

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 何かソースを提示したと思ったら 次の日には別のを出して来る。 ・・少々節操に欠ける印象を持たれる方もいらっしゃるかも知れませんが、FCafeは「素人の試行錯誤」をネタとして御披露しよう、というのが本旨であります(その筋の『権威』が他を教導しようというものではありません)のでどうぞ御容赦を。
で、「追記の折り畳み」の次はやはり(サンプルにもあった)「記事の折り畳み」 に行こうか、という所なのですが・・・
此処でふと考えた訳です。 「ウチも『汎用折り畳み』やりたいな」 と。
折り畳みに関しては初代テンプレートから共有供出作品まであれこれ異なる方法を実装して来た訳ですが、どれも「汎用性」に乏しいと云わざるを得ないものでした。
「 ツリー化の時みたいに汎用化できないものだろうか?」
・・で、某所に潜入し研究する事幾星霜。 何とか自分なりにアレンジする事ができました。
パチモンですが 何かの参考になれば幸いです。

.

SAMPLE


【 設置法 】  メンバーを折り畳むグループを以下の様に記述します

<div id="ID名">
 <SW要素 class="sw?"> タイトル1 </SW要素>
 <開閉要素> 内容1 </開閉要素>
 <SW要素 class="sw?"> タイトル2 </SW要素>
 <開閉要素> 内容2 </開閉要素>
 <SW要素 class="sw?"> タイトル3 </SW要素>
 <開閉要素> 内容3 </開閉要素>
   ~
 <SW要素 class="sw?"> タイトルN </SW要素>
 <開閉要素> 内容N </開閉要素>
</div>

グループ全体を ID(付きのDIVタグ等)で括ります。
『開閉スイッチ』となる各メンバーのタイトル要素に以下の何れかのclass名を付けます。
  sw0 初期状態が非表示
  sw1 初期状態が展開(表示)

 
以下は エントリ(記事)グループに適用する場合の一例です
<div id="Entry">
 <!--topentry-->
  <h2 class="sw1"><%topentry_title></h2>
  <div>
     記事本文、諸元リンクリスト等
  </div>
 <!--/topentry-->
</div>
 
以下は プラグイン(C1)グループに適用する場合の一例です
<!--plugin-->
 <div id="Plg1">
  <!--plugin_first-->
   <h3 class="sw0"><%plugin_first_title></h3>
   <div class="plgin">
     <%plugin_first_content>
   </div>
  <!--/plugin_first-->
 </div>
<!--/plugin-->
開閉される要素に別途クラス名を付けても可です  
テンプレート末尾 ( </body> タグ手前 ) に以下のスクリプトを書きます
<script type="text/javascript"><!--
function mkFold(IDname,c1,c2){
if (document.getElementById){
 var D=document.getElementById(IDname);  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=c1}
  A[i].onmouseout=function(){this.style.backgroundColor=c2}
  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";
  } }
  if (A[i].className=="sw0"){
   A[i].nextSibling.style.display="none";
} } } } } }

mkFold("Entry","hover色a","通常色a");
mkFold("Plg1","hover色b","通常色b");
  以下同様
//--></script>
関数部以後の行は「例」です
 

【 解説 】   mkFold は指定されたIDを持つ要素の子要素(childNodes)の内、クラス名冒頭が”sw”であるものにその次にある要素を開閉する機能を与えると同時にclass名が”sw0”であった場合は次要素を折り畳んで(非表示化して)しまいます。( ”sw1”だったら何もしません)
勿論スクリプトoff環境では「折り畳み」は行われません。( 全項目が表示されます )
「折り畳めないなら表示したくない」 項目については別途CSSクラス名設定等による非表示化も行っておくと良いでしょう。

 ・・モロに春木屋さんのパクリなんですが、異なる点もあります。
関数 mkFold は3つの引数を持ちます。
順に「グループのID名」「マウスon時のSW背景色」「マウスout時のSW背景色」 です。
折り畳みを行うグループ毎にマウスon/out 時のSW背景色を指定しなければなりません
(する事ができます)

「追記折り畳み」では、SW要素の前方要素(previousSibling)を操作しましたが、今回は後方の要素(nextSibling)を操作するものとなっています。
また前記事では aタグのhref要素を書き換える事によりSW要素に開閉機能を持たせていましたが、こちらのスクリプトではonclick属性を指定する方法となっています。( リンク要素でなくてもスイッチ化可能 )   ・・・いや、ホントに勉強になりました  m(_ _)m

Comment


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/383-99ff37e9

Shown after Admisson
.

≫ タイトルの目次化 追記折り畳み別法 ≪

2006 / 10 / 29  Sun
General   
Comment 0 / TB 0 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。