最近、大の苦手なJavaScriptを習得しようと勉学に励んでいる。最初は基礎部分から覚えていくかなぁと考えつつも、長続きしそうもないので、いきなりライブラリからいじっていく事を決意する。雑誌やサイトを検索する事小一時間。様々なライブラリをみつけ、概要を読み、興味を失い流れていく。prototype.js？難しすぎてわかんねーぜっ。
その中で唯一興味を持ったのがjQueryだった。少しだけ掘り下げてみると、どうやらスクリプトが大の苦手な自分にも、なんとか吸収できそうな予感が走った。直感的にわかりやすく、ビジュアル効果も比較的簡単にかけられそう。これならWebデザイナーに人気でるはずだ。
jQueryの導入
今回書いたJavaScriptはjQueryとの併用で初めて動作するので、こちらも準備しておかないと意味がない。まずjQueryから、ライブラリをダウンロードしてこよう。トップページにダウンロードリンクがあり、三種類のjQueryがあるが、圧縮なしの Uncompressed は、デバックなど行う場合にはとても重宝するので、ヘヴィーユーザーはこちらのほうが良いかもしれないが、ファイル容量が大きい。とりあえず難しい事をしないのならば、軽量の Minified and Gzipped で問題ないだろう。
ダウンロードしたら、早速FTPを使ってアップロードしよう。ディレクトリはまかせるが、今後読み込ませるかもしれないJavaScript用のディレクトリを作成しておいたほうが、後々楽だ。たとえば「js」「javascript」などの名前にしておくとわかりやすい。
IE6にもダイナミックを
jQueryのアップロードが済んだらここから本番だ。今回は、疑似クラス「:focus」が扱えないInternet Explorer 6以下のバージョン。コイツにフォーカスが扱えるように見せるJavaScriptを勉強を兼ねて書いてみた。要素やclass, idを特定することが比較的容易なjQueryならばこそやり遂げる事ができた偉業だ。
なお、デフォルトではformのinput要素のtype属性にtextが設定されているもの、textarea要素に的を絞っている。つまり、これらが選択状態になったときのみにfocus疑似クラスが扱えるようになるのだ。
form_focus.js
$(function(){
$("input[@type='text'],textarea")
.focus(function(){
$(this).addClass("focus");
})
.blur(function(){
$(this).removeClass("focus");
});
});
こいつをページ直に貼り付けてもいいが、外部ファイルとして読み込ませておいたほうが、後々楽になるだろう。
まず上記のコードをファイルとして保存して、form_focus.jsのように拡張子を.jsにして、FTPで先ほどのディレクトリにファイルをアップロード。次に下記のように<head>〜</head>の間に読み込ませるコードを書き足す。
外部JavaScriptの読み込み
<script src="［jQueryのURL］" type="text/javascript"></script> <script src="［form_focus.jsのURL］" type="text/javascript"></script>
スタイルシートでfocusのデザイン
次にfocusしたときのデザインをしてみよう。以下のコードをスタイルシートに書き足す。
スタイルシート
.focus {
color: white;
background-color: black;
}
これでinput要素のtype属性にtextが設定されているもの、textarea要素をフォーカスさせた時に、入力欄がブラックになり、文字がホワイトになる。この辺はもろにスタイルシートなので、思いっきりデザインすることができる。IE6以下のバージョンで解釈できるプロパティならば、制限はないのだ!!
フォーカス前
フォーカス後
種明かしをすると、このJavaScriptは、input要素のtype属性、textarea要素をフォーカスさせたときだけに、フォーカスさせた要素に「focus」クラスを強制的に付加するものだ。つまり、本当にfocusが扱えるようにするのではなく、要素にクラスを追加させて、focusが扱えるように見せるJavaScriptなのだ。
つまりだ。Internet Explorer 6以下のバージョン以外のブラウザでも、focusクラスが付加されるので、上記のスタイルシートを記述するだけで、focusを疑似的に再現させることができる。まぁ、結局同じ動作をするわけなのだけれども。
人類の神秘
実は早速SCREAMOでは、その発展版のJavaScriptを組み込んでいる。右サイドバーの検索フォームや、コメントのフォームなど、すべてをfocusするようにした。さらにデフォルトで入力されている文字をfocusすると消して、戻すと現れる動作も外部JavaScriptファイルで行うように設定。この辺は次回紹介しようと思うが、なんとJavaScript初心者の自分でも、比較的簡単にこの辺はつくる事ができたのは恐怖と驚愕を超え、人類の神秘と呼ぶにふさわしい快挙だろう。
我ながら素晴らしい!!
