TECH Matari

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

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

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

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

HTML部分

<ul>
<li><a href="foo.html">リンク</a></li>
<li><a href="hoge.pdf">PDF</a></li>
<li><a href="fuga.doc">Doc</a></li>
</ul>

JavaScript部分
[js]
var elem = $$(’a');
for (var i = 0; i < elem.length; i ++) {
var str = elem[i].href;
if(elem[i].href.match(/pdf$/i)){
// マッチした
elem[i].target = “_blank”;
}else{
// マッチしない
}
}
[/js]
※要 prototype.js

Popularity: 13% [?]

written by ANN

たとえば、

<div class="readme">続きを読む</div>
<div class="readme">続きを読む</div>
<div class="readme">続きを読む</div>

という構造で、readmeクラスをもつ要素に対し、いちいち onClick=”…”とインラインで記述していくのは面倒だし、コードが汚くなる。そこで、prototype.jsの$$関数を用いて、
[js]
var obj = $$(’div.readme’);
[/js]
とやると、該当のオブジェクトを取得できるのは、prototype.jsの$$関数で書いてあるとおり。

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

[/js]

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

[js]
var objs = $$("div.readme");

$A(objs).each(
function(o){
Event.observe(o, 'click', eventHandler, false);
}
);
[/js]
$A関数で配列にアクセスし、イテレータを使う方法。

でも、正直、こっちのほうが楽だしわかりやすいな…
[js]
for (var i = 0; i < elements.length; i ++) {
elements[i].observe('click', eventHandler);
}
[/js]

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

Popularity: 8% [?]

written by ANN

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

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

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

ちなみに

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

結構融通が利く。

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

Popularity: 5% [?]

written by joy-pop