8月 19

PDFへのリンクのみ、_blankにする方法

Javascript, prototype.js, サンプルコード No Comments »

某サイトにて、WordPressを使ったサイトを構築。

画像のアップロード・使用は問題ないが、PDFをアップロードした場合に、PDFファイルのクリックは、別ウィンドウにしたいという話が持ち上がる。

対処法としては、WordPressのアップロード～エディタへの貼付け部分のスクリプトを修正して、ファイルの種類がPDFだったら、"_blank"属性を付けて貼付け、もしくは、その部分をハックするプラグインを書くか・・と思ったが、とても面倒そうなので、JavaScriptを使って表面的にやることにした。

できたコードはこんな感じ。つまり、Aタグを全部なめて、リンク先文字列が*.pdfだったら、アンカーのtargetを_blankにするだけ。あとはこれを外部ファイルにして、WordPressのヘッダのテンプレ部分で読み込めばOKかな。onLoadで処理するのが好ましいから、EventObserveとかでやったらいいんじゃないかな。

HTML部分

PLAIN TEXT
HTML:
  2. <li><a href="foo.html">リンク</a></li>
  3. <li><a href="hoge.pdf">PDF</a></li>
  4. <li><a href="fuga.doc">Doc</a></li>
  5. </ul>

JavaScript部分

PLAIN TEXT
JavaScript:
  1. var elem = $$('a');
  2. for (var i = 0; i <elem.length; i ++) {
  3.     var str = elem[i].href;
  4.     if(elem[i].href.match(/pdf$/i)){
  5.         // マッチした
  6.         elem[i].target = "_blank";
  7.     }else{
  8.         // マッチしない
  9.     }
  10. }

※要 prototype.js

Popularity: 20% [?]

written by ANN

2月 09

特定クラスに一括して関数（イベントハンドラ）を登録する方法

DOM, Javascript, jQuery, prototype.js, サンプルコード 4 Comments »

たとえば、

PLAIN TEXT
HTML:
  1. <div class="readme">続きを読む</div>
  2. <div class="readme">続きを読む</div>
  3. <div class="readme">続きを読む</div>

という構造で、readmeクラスをもつ要素に対し、いちいち onClick="..."とインラインで記述していくのは面倒だし、コードが汚くなる。そこで、prototype.jsの$$関数を用いて、

PLAIN TEXT
JavaScript:
  1. var obj = $$('div.readme');

とやると、該当のオブジェクトを取得できるのは、prototype.jsの$$関数で書いてあるとおり。

そこに、イベントハンドラを割り当てる方法として、
Think ITにて、amachangが書いてる方法とほぼ同じなのだけれど、

PLAIN TEXT
JavaScript:
  1. <div>hoge</div>
  2. <div>hoge</div>
  3. <div>hoge</div>
  4. <script type="text/javascript">
  5. var elements = $$('div');
  6. var eventHandler = function() {
  7.    alert(' 要素がクリックされました');
  8. };
  9.  
  10. for (var i = 0; i <elements.length; i ++) {
  11.    elements[i].observe('click', eventHandler);
  12. }
  13. </script>

自分は、こう書いてみた。

PLAIN TEXT
JavaScript:
  1. var objs = $$("div.readme");
  2.  
  3. $A(objs).each(
  4.     function(o){
  5.         Event.observe(o, 'click', eventHandler, false);
  6.     }
  7. );

$A関数で配列にアクセスし、イテレータを使う方法。

でも、正直、こっちのほうが楽だしわかりやすいな…

PLAIN TEXT
JavaScript:
  1. for (var i = 0; i <elements.length; i ++) {
  2.    elements[i].observe('click', eventHandler);
  3. }

最近（？）のJavaScriptは、１つの処理を行うのにたくさんの方法（記載法）があり、悩んでしまう。豆にリファレンスに目を通しておくしかないよなぁ、、

Popularity: 13% [?]

written by ANN

2月 08

prototype.jsの$$関数

DOM, Javascript, prototype.js No Comments »

$$関数でクラス名でdocumentの要素を取得することができる。
→$$('.hoge')

$$関数はクラス名で取得するためだけのものではなく、document.getElementsByTagName()の代わりもしてくれる。
→$$('body')

そしてさらに以下のような要素の取得も可能。
→$$('div.hoge div')

ちなみに

<div class="hoge">
<div>
<span>$$関数すげ！</span>
</div>
</div>

上記のような感じのspanを取得する際に中間のdivを省略してもちゃんと取得できる。
→$$('div.hoge span')

結構融通が利く。

参考：
http://www.thinkit.co.jp/free/article/0702/15/6/

Popularity: 8% [?]

written by joy-pop