Phantasy Garden

ちょっと前に実装してみたreadmore.jsがもうちょっと簡略化できるようになった。prototype.jsを調べてみたら、イベントを取得とか、オブジェクトにイベントを追加とかはそっちの中に組み込まれてんのな。prototype.jsのほうがクロスブラウザ環境を提供してくれるし、なにより関数のメンテフリーになるのは有り難い。そっちで頑張って貰うこととしよう。

で、実装した内容はこんな感じ。Event.element()とEvent.observe()がそれぞれイベントの取得、オブジェクトにイベントを追加に該当するよう。入れ替えるだけで動くぜー。

function setHandler(){
 var d = document.getElementsByClassName('more', "div");
 for(var i=0; i<d.length; i++){
  Event.observe(d[i],"click",changeClass,true);
  d[i].className = 'less';
 }
}

function changeClass(e){
 var t = Event.element(e);
 var pr = t.parentNode;
 t.className = (t.className == 'more') ? 'less' : (t.className == 'less') ? 'more' : t.className;
 pr.className = (pr.className == 'more') ? 'less' : (pr.className == 'less') ? 'more' : pr.className;
}

Event.observe(window,"load",setHandler,true);

他にもgetElementsByClassNameがオーバーロードされていたので変更してみたりとか。prototype.jsうめぇwww

相変わらずIE6がダメだが。CSSの実装のほうでアウトした。:before/:after疑似クラスが使えねぇせいで表示の切り替えが出来ぬ。クソが。

Comment

名前:

機械的スパムを防止するための検証です。以下の画像に書かれている文字列(半角英数字)を入力してください。
Captcha Image
認証:

Information

About this website

サイト名『空想庭園』。御巫 悠が自由気ままに運営しているサイトです。役に立たないコラム書きがメインなのかもしれません。

本サイトはクリエイティブ・コモンズ表示4.0 国際ライセンスの下に提供されています。

Recent Weblog

Recent Comment

Weblog Search

Weblog Category

Friend Links