みんなが大好きjQueryin work

 
date:2009.03.02   posted by:oikawa
 

ということで今回はjavascriptの話しです。タイトルの通りjQueryはGoogleを含む大手企業やWordpressなどにも組み込まれており、探してみれば割とすぐサンプルなどを見つけることが出来ると思います。ですので、僕のところではjQueryではなく、mootoolsというライブラリを使ったサンプルなどを紹介していく予定です。

ちなみにjQueryにはnoConflictという他のライブラリとの共存を前提とした特別な関数があります。今後mootoolsを使って紹介していくサンプルもjQueryに限っては同時に使えるようになっているかもしれません。また他のライブラリを使用している場合でも、コードの書き方が若干変わることになりますが、mootoolsでのサンプルとほぼ同様なことができると思います。では、長くなりましたがそろそろ本題に。

今回紹介するのはjavascriptの実行タイミングを制御するスクリプトです。これはどんなものかというと、例えばですが、「ページトップに戻る」などのボタンに、クリックで画面上部までスクロールする効果を設定したいとします。このとき、実行命令を促すためのイベント(クリックやマウスオーバーなど)をボタンに設定しておきたいのですが、このイベントはボタンが準備できた段階(要素としてアクセスができる段階)にならないと設定することができません。ここでこれを回避するためにonloadやaddEventなどを使って、各要素へアクセスできる段階にしてからイベントを設定していく形を取っていきます。

しかし通常、HTML要素が全て読み込まれていない段階でもブラウザでは随時レンダリングが行われていき、表示がされるようになっています。先ほどの「ページトップに戻る」のボタンも表示されていくわけですが、ここでページ全体の量が多く、読み込みが長かった場合、ボタンへのイベントが設置されていない状態(クリックしても動作しない状態)で表示する形になってしまいます。ユーザーにはボタンとして見えているのに、クリックしても動作しないというのは紛らわしい問題ですので、この実行タイミングを見計らってからユーザーが操作できるようにするのが今回のサンプルです。

 

Javascriptの実行タイミング制御サンプル
» http://www.thedesignium.com/sample/cover/
このサンプルは「読み込み中」などの文字を添えて、788kbの”brgr.png”画像を含む全てのHTMLがレンダリングされるまでページ全体を要素”cover”で覆っておく形になっています。

▼javascriptの流れ
01. windowにイベントを設定
head内でライブラリを含むjsファイルを読み込み、イベントとして”domready”,”load”,”mousewheel”,”resize”の4つを設定していきます。各イベントの実行タイミングは以下の通りです。

domready: HTML要素が準備されたとき関数”Dsn.dominit()”を実行
load: HTML要素が読み込まれた後、関数”Dsn.init()”を実行
mousewheel: マウスホイール時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更
resize: ブラウザのリサイズ時に関数”Dsn.resize()”を呼び出して要素”cover”のサイズを変更

イベント”domready”と”load”の違い
“domready”は画像を含まない全てのHTML要素が準備されたとき(操作できる段階になったとき)に実行され、
“load”の場合は画像を含む全てのHTML要素がレンダリングされた後に実行されます。

02. 新しい要素”cover”を作成
body内にjavascriptを書いて要素”cover”を作成します。このとき各プロパティ(id名、スタイル、不透明度など)も設定し、全体を覆う形でbody内に設置します。

03. 各イベントを実行
01で設定したイベントを実行していきます。”Dsn.dominit()”では読み込んだ画像”brgr.png”にリンクをつけ、また”Dsn.init()”では”Dsn.coverFunc()”を呼び出し、要素”cover”を不透明度0にしてから要素ごとbody内から取り除いています。

Link: 今回のサンプルデータ.zip

 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
"socolab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.17-Message Bottleをリリースしました in news
•2010.05.13-おっぱいW-cupをリリースしました in news
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.05.05-メッセージボトル in services
•2010.05.05-おっぱいワールドカップ in services
•2010.05.05-DJ Turndroid in services
•2010.05.05-勇者マイミク in services
•2010.05.05-くままり。 in services
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.04.01-Androidアプリ「DJ Turndroid」をリリース! in news
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.21-mixiアプリの登録手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.14-Googleサーバー活用法[ファイル置き場] in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-ブログ向け音楽プレイヤー「DSN Player」 in news
•2009.05.27-もっとがほしいDSN in work
•2009.03.20-会津しこんがasahi.comの動画に in news
•2009.03.02-みんなが大好きjQuery in work
•2009.02.28-居酒屋“会津しこん”がasahi.comで紹介されました in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
•2009.01.17-会津しこんで取材 in work
•2008.12.22-地域SNSから生まれた居酒屋「会津しこん」 in news
 
 
"UI"で関連する記事一覧 (シーケンスで表示する)
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.05.27-もっとがほしいDSN in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.23-WEBユーザビリティを学び始めて最初に抱く疑問 in work
•2009.01.15-webユーザビリティの世界に入門 in work
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|lab socolab UI