デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.resize( )リサイズした時の処理を設定

構文

リサイズした時の処理を設定返値:jQueryオブジェクト
jQo.resize( function )ver1.0〜
jQo.resize( )ver1.0〜
jQo.resize( object, function )ver1.4.3〜

機能

ブラウザのウインドウをリサイズした時に引数のfunctionを実行します。また引数に何も設定しない場合は、要素に設定されたリサイズ時の処理を実行します。セレクタにはwindowsを指定しなければなりません(documentやhtmlでは機能しません)。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

解説

リサイズした時に実行する処理を設定

サンプル(resize/01.html)を開いてbody内にp要素があることを確認してください。jQueryは以下の様に記述され、resizeメソッドの引数にfunctionの「resizeFunc」が設定されています。対象はブラウザウインドウなので、セレクタはwindowに設定します。

$(function () {
	$(window).resize(resizeFunc);
});

resizeメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてリサイズした時に実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

resizeに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 リサイズした時に実行したい処理
}

サンプルresize/01.htmlで利用したresizeFuncは以下の様になっています。まずwidthメソッドを利用してブラウザの幅を取得し、textメソッドによってp要素に表示します。

function resizeFunc(eo) {
	var myWidth = $(window).width();
	$("p").text(myWidth);
};

結果として、ブラウザをリサイズするたびにブラウザの幅が表示されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(resize/01b.html

$(window).resize(function (eo) {
	var myWidth = $(window).width();
	$("p").text(myWidth);
});

他の要素に設定されたリサイズ時の処理を実行する

resizeメソッドは引数を設定しないと、要素に設定されたリサイズ時の処理を実行します。
サンプル(resize/02.html)を開いてbody内にbutton要素が追加されたことを確認してください。

続いてjQueryを確認してください。リサイズ時の処理はresize/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbutton要素をクリックするとwindowに設定されたリサイズ時の処理が実行されます。

$("button").click(function(){
	$(window).resize();
});

結果として、button要素を「クリック」するとリサイズしたのと同じようにブラウザの幅が表示されます。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(resize/03.html)を開いてbody内の構成はresize/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、resizeメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。この値をtextメソッドを利用してp要素に表示します。

$(window).resize({test:10}, function (eo) {
	$("p").text(eo.data.test);
});

結果として、リサイズするとp要素に第1引数で渡されたtestプロパティの値「10」が表示されます。

メモ

ブラウザのリサイズ以外にも使える?

window要素以外にもresizeメソッドは利用できるのか、少し調べてみました。textarea要素はデフォルトでリサイズ可能なので、それでサンプルを作成しました。サンプル(resize/test01.html)を開いてbody内にtextarea要素とp要素があるのを確認してください。

jQueryは以下の様に記述され、textarea要素がリサイズされたらresizeFuncを実行するようにしています。

$(function () {
	$("textarea").resize(resizeFunc);
});

resizeFuncでは以下の様にp要素に「resize」と表示するようにしてます。

function resizeFunc(eo) {
	$("p").text("resize!");
};

結果として、textarea要素をリサイズしてもp要素には「resize」と表示されず、機能しないのが確認できます。

ではhtml要素やdocumentには利用できる?

window要素でなくhtml要素には利用できるか試してみましたがダメでした...。サンプル(resize/test02.html)では以下の様にセレクタにhtmlを設定していますが機能しません。resizeFuncの内容はresize/01.htmlと同じです。

$(function () {
	$("html").resize(resizeFunc);
});

documentに対しても調べてみましたがダメでした...。サンプル(resize/test02b.html)では以下の様にdocumentを設定していますが機能しません。resizeFuncの内容はresize/01.htmlと同じです。

$(function () {
	$(document).resize(resizeFunc);
});

やはりwindow要素に対してしか利用できないようです。