忍者ブログ
[339] [724] [337] [336] [335] [725] [333] [332] [726] [330] [329]

 左側のメニューで例えばバックナンバー。これ、縦に長すぎ。
これを必要な時は、見えるようにして、必要でなければ隠しておきたい。

すなわち、Windowsのエクスプローラなどのファイル一覧で、フォルダをクリックすると、
その下にぶら下がっているフォルダが表示される機能。

これをこのBLOCKBLOGでも実現してみたい。
ではどうやって?



普通、このような機能は、はぎさんとこにあるフォルダ型階層メニューように、
ここでいう「バックナンバー」などのメニュー上をマウスでクリックすると、
それに対応した処理を行うJavaScriptの関数を、
このメニューのHTML文のDIVタグ中に
例えば、onClick="xxxxxx()"というような属性で、あらかじめ記述しておく。

ところが、BLOCKBLOGでは、直接HTML文は書けないので、
上記のようなことは出来ない。
しかし、DOMを使えば、これらの属性が、
HTML文を表示した後でも追加できてしまう。
これがDOMの画期的なところです。

自分も今まで、このような途中で属性を追加するということは、
やったことがないので、ここで勉強する意味で、
その過程を残してみようかな。
ということで書いておきます。

ただし、ここでDOMは、
ブラウザだと、IE5以上、Mozilla、NN6以上でできるようです。

でも、自分の環境が、IE6.0 SP1、Mozilla1.6とOpera7.23しかないので、
この環境のみのことで書きます。
それ以外のバージョンや、他のブラウザはもちろん無視。

またOSは、WindowsXP SP1しかないので、
これ以外のOSは使ったことがないので無視。
マシンも、PCしか持ってないので、Macとかは、もちろん無視。

●onclickがないDIVにonclickを追加し、実行可能か?

document.getElementById("box").onclick="関数名()"
IE:関数は属性に追加されたが、実際の配置では実行できない。
Mozi:まず、当該DIV要素にonclickが存在しないため、
   そこに追加できないでエラーになる。
oper:エラーにならないが、Moziと同じ。

これは、DOM1の概念でonclickを処理したので、
このようなことが起こったようで、
そもそもDOM1では、イベントは対応していないようだ。

●DOM2からイベントが処理されるようになったようだ。

詳細はここ
この概念は、従来のタグ内にイベント処理関数を指定するのではなく、
処理したい要素にイベント関数を登録するというものです。

ただし、IE6では、DOM2は対応していないので、
IE5から独自のプロパティがあるようです。
でも指定の仕方は殆ど同じなので、document.allで判断すれば、
互換性は保たれます。

var objBackNum=document.getElementById('b_ml_menu');
if(document.all){
    objBackNum.attachEvent('onclick', sideMenu);
}else{
    objBackNum.addEventListener('click', sideMenu, false);
}

ということで、基本中の基本は、これでOK。

●次に、表示を隠したり、表示したりするのは、どうすればいいのか?
これは、DOM1からあるdisplay属性で制御すればよい。

処理の概念は、b_ml_menu内のDT属性でクリック時にイベントが発生し、
そのイベントを処理する関数内で、
まずDTタグの親要素内のすべての子要素を検索し、
DD要素を探し出して、
そのDDタグが現在表示されているか、隠されているかを判断し、
表示されていれば隠し、隠されていれば表示するようにする。
さらにDTタグ内の文字も、表示用と隠す用にそれぞれ、書き換えてやればよい。

●注意点
・nodeNameで検索するタグ名称は、大文字でないといけない。
・イベントハンドラでイベントが発生した要素を参照時、
 DOMは、thisでOKだが、IEは、window.event.srcElementじゃないと駄目。
・childNodesのノードの指定は、
 IEは、childNodes(i)で、DOMは、childNodes[i]なのね。
 要するに、括弧とカギ括弧の違い。

ということで、今回はまあスムーズにできました。

【BLOCKBLOGで対応すれば簡単】
 この機能も段々使っていると、欲しいという声が上がってきそうですね。
その時もデザイン変更と同じで、BLOCKBLOGさんで、対応してくれれば、
こんなにややこしいことしなくてもHTMLを吐き出す時に
ちょっと書き換えるだけで簡単に出来ちゃうので、
きっと対応してくれるでしょう。まあ、こちらは設定画面が大変かもね、
なので少しは大変かも?

ただもう既にBLOCKBLOGの設定画面で使ってるみたいだけど。

ただ、BLOCKBLOGのブロックという考えは、とてもいいのだけど、
それを設定するのに、いろいろな設定画面があるんだけど、
それがいろいろ複雑で、この画面で作成して、こっちの画面で登録して、
という複数の操作を組み合わせないと出来ないので
これが自分も初めは何のことかよく分からなかった。

BLOCKBLOGの目的はHTMLなんて全く知らない人でも
簡単に使えることだと思うけど、どうもこの設定画面は
分かりずらいかなと感じます。

じゃどうすればいいかと。
まあ、自分は見た目の直感性を重視した方がいいと思う。

すなわち、ブログを使う人は、自分もそうだけど、まず何が出来るのか?
どうやって作るのか?どうやって操作するの?ということが
見た目で簡単に分かる必要があると思うんですよね。
それが、どこのブログサービスも、この辺がいろんなところを見てみないと
イマイチ理解できない。

そういう意味でまずは、あなたが作ると、こんな感じの画面になります。
その画面のこの部分は、こういう機能です。
そして、その部分をクリックすれば、それの設定操作が行えます。

ということを実際の画面で見せて操作すればいいじゃないのかな。
すなわち画面をもろに表示し、例えばカテゴリ表示の部分をクリックすると
その説明と、カテゴリ編集とその設定が一度に出来ちゃう。
入力は、本文内をクリックすると、投稿画面が出てくるとか。
まあ、もちろんJavaScriptじゃなく、HTML文でのみで作るんですけど。

そんなのがあったらいいななんて思った次第。

【注意点のまとめ】

?動作環境
 ・DOMは、ブラウザだと、IE5以上、Mozilla、NN6以上でできるようです。
 ・自分の環境は、IE6.0 SP1、Mozilla1.6とOpera7.23しかないので、これで確認し、
  この環境のみのことで書いてある。
  それ以外のバージョンや、他のブラウザはもちろん無視(動くかどうか不明)。
 ・OSは、WindowsXP SP1しかないので、これ以外のOSは使ったことがないため無視。
 ・マシンも、PCしか持ってないので、Macとかは、もちろん無視。
 ・BLOCKBLOGの文書構造に合わせて作成してあるので、
  この文書構造以外は当然動かないです。^^);;

 ・2004.09.22 Mac OS X 10.3.4/Safari 1.2.2(v125.7)で動かしたら、動いた。

【改良:2005.01.13】

 今までは、対象がバックナンバーに限定していたが、
最新のトラックバックは、1件に対してDDが3個もあるので長くなる。
ということで、複数カテゴリを対象にする必要があるが、
いっそのこと、カテゴリ名の先頭に半角で[+]または[-]を予め指定しておけば
それに対応して、階層メニュー化させれば便利ですね。

 ということで、この仕様に変えた。

考え方は、

 現在は、テーブルで対象カテゴリ名を設定しているので、
そこを、対象BLOCK領域id名(menu等)をテーブルで持ち、
この領域が存在するものについて、
その子ノードでnodeNameがDLで、
 その子ノードのDTの中身の先頭が[+]か[-]のDDに対して
  [-]なら、そのままで、イベントを登録する。
  [+]なら、DDを隠し、イベントを登録する。
にすればよい。

注)DTのカテゴリ名の先頭に半角スペースがあっても
  これはレイアウト時に無視されるようですね。^^)

【でも直ぐ使いたいという気さくな方】

 ここ見てね。

当然、内容理解できて、何が必要で、どうすればいいかを
判断できる人ね。で、自分で改造してね。
もちろん、サポート、問合せはごめんね。なしで。m(_ _)m

拍手[0回]

PR

コメント


コメントフォーム
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
  Vodafone絵文字 i-mode絵文字 Ezweb絵文字


トラックバック
この記事にトラックバックする:
忍者ブログ [PR]
カレンダー
02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 15 16
17 18 19 20 21 22 23
25 26 27 28 29 30
31
フリーエリア
[-]最新トラックバック
プロフィール
HN:
7maru
性別:
非公開
自己紹介:

バーコード
ブログ内検索
[+]アーカイブ
アクセス解析