実践
実践、jQuery
10

これまで要素の位置やサイズの取得、設定のための、さまざまなメソッドを解説しました。今回は、サイズ取得メソッドを利用した具体的な実装例を紹介します。ドロップダウンメニューの見切れを防ぐ実装を考えます。

森 大典
森 大典 | フロントエンド・エンジニア

jQueryを使った要素のサイズ取得と設定に関わるメソッドを解説します。位置と同じく、どのようなメソッドで、どのような範囲のサイズを捕捉できるのか、またOS XやWindowsなどOSごとの相違を把握することも重要です。

森 大典
森 大典 | フロントエンド・エンジニア

前回解説したスクロール位置の取得/設定するメソッドをどのように実装に活かせるか解説します。デモを通して、メソッドの特徴やそれぞれの違いがよりクリアに理解できるでしょう。

森 大典
森 大典 | フロントエンド・エンジニア

スクロール位置の取得と設定、イベント発生位置の取得について解説します。特にブラウザのスクロール位置の取得に関しては、ブラウザごとの差異があります。実装時には注意が必要です。

森 大典
森 大典 | フロントエンド・エンジニア

offset()メソッドを利用し、html要素をオフセット要素とした相対的位置の取得、また位置の設定を解説します。シンプルな例だけでなく、疑似フレーム内に要素があった場合の挙動についても扱います。

森 大典
森 大典 | フロントエンド・エンジニア

要素の位置に関する操作は、jQueryの本領発揮の場面。目的に沿った操作を行うためには仕様のほか、ブラウザごとの細かいクセを把握する必要があります。まずは位置の操作から詳細に解説します。

森 大典
森 大典 | フロントエンド・エンジニア

.triggerHandler()とカスタムイベントについて解説します。メソッドの特徴や使いどころを併せて理解しましょう。最後には解説した実装を一通り利用したコードを紹介します。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

イベントの名前空間、トリガーを活用しつつ、イベントをコントロールする実装を解説します。これらの仕組みを使うと、操作対象外のイベントに予期せぬ影響を与えることを防止できます。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

前回はイベントを定義する.on()を解説しましたが、今回はイベントの定義を解除する.off()を中心に解説を進めます。.off()のさまざまな使い方、また、実装時の注意点についても触れています。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。

山田 敬美
山田 敬美 | フロントエンド・エンジニア