2006/06/14 15:48:15

MODxでJavaScriptをコンテンツから完全に分離してみる

今のところこれだけです。

JavaScriptを完全に分離してみる

せっかくMODｘなんていうクールなツールがあるんだから、ドキュメントからJavaScriptまでも完全に分離してみたいぜンナロー！な暑苦しいニーチャンにおすすめ。

サンプル

  • タブ１
  • タブ２
  • タブ３
タブ１の内容ダス！
これはタブ２の内容。
タブ３は内容が無いよう。

こんな感じ。
それぞれタブをクリックしてみよう。
ソースにはイベントハンドラも何も無いのにアラ不思議！タブが次々と切り替わるよ。
ちょっとサーバーが重いんで、うまく動かないときはリロードしておくんなまし。
それといきなり言い訳がましいんだけどタブの形がいい加減なのは、冗長な説明を減らすから！

準備

まずはBehaviourから「そういう風な事が可能になるJSファイル」をダウンロードしてみよう。
イベントハンドラを(x)HTMLの中に書かなくても、CSSセレクタを使ってJavaScriptから指定できる、っつうその発想は俺にはなかったですわい。

 ほんで、件のサイトにあるbehaviour.jsをサイトのどっかに置いといて（ここではトップディレクトリに置いてみた）、テンプレートなりなんなりに

<script type="text/javascript" src="/behaviour.js"></script>

こうやって特攻（ぶっこ）んどけば準備OK。

HTML

HTMLはそのまんま。プログラムらしいことは何も書かなくてよろしい。
ぬおおおお！なんて簡単なんだ！！！

<ul class="tabs">
 <li class="tab" id="tab1">タブ１ </li>
 <li class="tab" id="tab2">タブ２ </li>
 <li class="tab" id="tab3">タブ３ </li>
</ul>
<div class="tabcontents">
 <div class="tabcontent" id="box1">タブ１の内容ダス！</div>
 <div class="tabcontent" id="box2">これはタブ２の内容。</div>
 <div class="tabcontent" id="box3">タブ３は内容が無いよう。</div>
</div>

MODｘで外部JavaScriptファイルを作ろう

こっからがドキュメント管理にマブでつおいMODｘの本領発揮だぜい。

  1. ドキュメントを作成する。
  2. 使用テンプレートを(blank)にする。
  3. ページ設定タブからコンテンツタイプをtext/javascriptにする。
  4. リッチテキストのチェックをはずす。

言ってしまえばまあこんだけなんだけど、これでMODｘ上で外部JavaScriptとして扱うことが出来るよ。ひゃあ便利！
ちなみに外部CSSファイルを作るときも同様に、3番目のステップでtext/cssを選べばいい。
あとケアレスミスで気を付けることとしてはページ設定の公開のチェックを入れておかないと上手く動作しないってことかナ！

CSS

タブっぽく見えるようにハクいスタイルシートを書こう！

.tabs{
 border-style:solid;
 border-width:0 0 1px 0;
 height:20px;
 list-style:none;
 margin-bottom:0;
 margin-left:0;
 padding-left:0;
}
.tabs .tab{
 border-style:solid;
 border-width:1px 1px 1px 1px;
 border-color:black;
 background-color:#ccc;
 margin-right:10px;
 margin-left:0px;
 float:left;
}
.tabs .selectedtab{
 border-style:solid;
 border-width:1px 1px 0px 1px;
 border-color:black;
 background-color:white;
 margin-right:10px;
 float:left;
}
.tabcontents{
border-style:solid;
border-width:0 1px 1px 1px;
clear:left;
height:50px;
margin-top:0px;
margin-bottom:20px;
}
.tabcontent{
position:absolute;
visibility:hidden;
}

ここで見るべきところはtabクラスとselectedtabクラス。
それぞれ選択されていないタブ（デフォルト）と選択されたタブのスタイルを指定してるんだ。
今回は背景色を変えてるだけだから、これくらいならJavaScriptから直接操っても良いんだけど、デザインとプログラムの分離を考えてここを見にきている君はまさか本気でそう思わないよね！？

そしてJavaScriptを書こう

ここまでできたら、なんか面倒臭くなってくるので、あとは適当にJavaScriptからイベントハンドラを呼びだしてやればいいや。

var tabSet = {
  '.tabs .tab' : function(el){
    el.onclick = function(){
      var i=0;
      var li = document.getElementsByTagName('li');
      for(i = 1; i < li.length; i++){
        var chkTab = document.getElementById('tab' + i);
        if(chkTab!=this){
          chkTab.className = 'tab';
          document.getElementById('box' + i).style.visibility = 'hidden';
        }else{
          this.className = 'selectedtab';
          document.getElementById('box' + i).style.visibility = 'visible';
        }
      }
    }
  }
};
Behaviour.register(tabSet);

まとめ

どうだい？俺のようなイモいスクリプトキディでも、クールなHTMLを書くことができたぜ！
普段の作業どおり、CSSセレクタを作るときにしっかりと構造を考えて作っておけばJavaScriptが追っかけてくれるし、なによりマブいよな。

そいでもってドキュメントごとにやたらと細かく管理しまくれるMODｘ（大雑把な管理も、モチのロン、OKさ！）との相性もサイコーだし言うこと那須与一だぜ。

しょうもないノウハウを、ここまで読んでくれたゴキゲンな兄貴達も、もっともっとチョーいかすコードを書くことに役立ててもらえるとハッピーさ！Bye！