jQuery

jQueryで要素をシャッフル。

2012.06.26 / Notes

jQueryで要素の順番をシャッフルするスクリプトのメモです。

使い方は、シャッフルを行いたい要素の親要素を引数に指定します。

結果は次のようになります。

jQueryでリンクを別ウィンドウで表示。

2012.05.22 / Notes

jQueryでページ内の任意のクラスを付けたリンクを、別ウィンドウで表示するコードのメモです。

上記では、「blank」というクラスを持つリンクタグに対して、まとめて別ウィンドウで表示するための処理を行っています。

CSS3のTransitionでダイナミックなページ遷移。

2012.04.22 / Labs

CSS3のTransitionによるアニメーションで、Flashのような動きのあるダイナミックなページ遷移のサンプルです。

 

実はこれは「impress.js」というプレゼンテーション用のスクリプトを拝見してとても興味を持ったので、理解する目的で自分なりに作成してみたものです。

 

CSS3のアニメーションには「jQuery Transit」というプラグインを使わせてもらっています。
サンプルはこちら

 

仕組み的には拡大・縮小と回転を取り入れて、ページ(コンテンツ)の移動の際にアニメーションを行います。キーボードはスペースキーでページを送り、また方向キーでそれぞれ進む/戻るを設定しています。
HTMLでは、外側のコンテナと内側のボックス、さらにその中に各コンテンツを並べています。

CSSでは各コンテンツのサイズを座標を指定しています。

JavaScriptは外部ファイルに記述しています。
コードの大部分は、各要素の座標を管理するためのものです。

習作用のためシンプルな構成ですが、これだけのコードでもCSS3を使ったダイナミックなコンテンツが可能になります。現在はIEがCSS3のアニメーションに対応していないのが残念ですが、今後は思い切ったデザインのサイトも増えていくように思います。

jQueryで画像を非同期で読み込み。

2012.04.13 / Notes

jQueryで非同期通信で画像データを読み込んで、読み込み完了時に処理を行うスクリプトのメモです。
サンプルはこちら

リンクをクリックした際に画像データの読み込みを開始して、「bind」のイベントハンドラで読み込み完了時に「div#target」へ画像を挿入しています。

DrupalでjQueryを利用する際に気をつけること。

2012.03.01 / Notes

DrupalではデフォルトでjQueryが含まれていますが、利用の際には少し気をつける必要があります。
通常jQueryでは、ステートメントの最初に「$」マークのエイリアスから書き始めますが、Drupalでは、他のJavaScriptライブラリとのコンフリクトをさけるために、「$」から書き始めることができません。

 

それを回避する方法としては「$」エイリアスを使わずに、

というように「jQuery」から始めることで利用できます。
この場合、既存のスクリプトを再利用する際に「$」を「jQuery」に書き換えないといけないので、都合の悪いこともあります。
そのままの「$」を使いたい場合には、下記の様にステートメントごと「(function($){}(jQuery));」でくくって、「$」を「jQuery」に置き換える方法もあります。