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

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

.cssHooks( )CSSのカスタマイズ

構文

cssをカスタマイズしてオリジナルのプロパティを作成返値:Objectオブジェクト
jQuery.cssHooks["新規cssプロパティ名"]ver1.4.3〜

機能

cssメソッド等で利用できるcssプロパティを作成します。本家サイトによるとベンダープレフィックス(-webkit-や-moz-)などに依存しないオリジナルのcssプロパティを作成するのに役立つそうです。

解説

構文骨子

サンプル(cssHooks/01.html)を開いてjavaScriptの最初の一行(以下参照)を確認してください。これが新たなcssプロパティを作成している部分です。cssHooksメソッドに続いて[ ]内に新規に作成するプロパティ名を設定します(サンプルではmySize)。

$.cssHooks["mySize"] = {get:getFunc, set:setFunc};

設定する値(右辺)はobjectオブジェクトの形式になり、getプロパティとsetプロパティにfunctionを設定します。getプロパティは値を取得する際に実行したいfunctionを設定し、setプロパティには値を設定するときに実行したいfunctionを設定します。サンプルでは、getFuncとsetFuncを設定しています。

getFuncについて

まずは値を取得する際に実行される、getFuncについて説明します。cssHooks/01.htmlではgetFuncは以下の様に記述され、まず3つの引数を受け取ります。elemにはセレクタの要素が渡されますが、他のcomputed, extraについては本家サイトにも説明が無く、よく分かりません(値はブール値が渡されます)。

function getFunc(elem, computed, extra){
	elem = $(elem);
	return [elem.width(), elem.height()];
}

このサンプルでは、上記のようにwidthメソッドheightメソッドで要素の幅と高さを配列にして返す処理を書きました。これでcssメソッド等を利用して新規に作成したmySizeの値を取得すると、セレクタの幅と高さが配列に格納され返るようになります。

setFuncについて

setFuncは値を設定されるときに実行されます。cssHooks/01.htmlではsetFuncは以下の様に記述され、まず2つの引数を受け取ります。elemにはセレクタの要素が渡され、valueには設定される値が渡されます。

function setFunc(elem, value){
	$(elem).width(value[0]);
	$(elem).height(value[1]);
}

このサンプルでは、上記のように受け取った配列の値を利用して、widthメソッドheightメソッドで要素の幅と高さを設定するようにしました。これでcssメソッド等を利用して新規に作成したmySizeの値を配列で設定すると、セレクタの幅と高さが設定されるようになります。

実際に値を取得する

cssHooks/01.htmlではbody内に1つのdiv要素と2つのbutton要素があります。jQueryは以下の様に記述され、getのid属性を持つ要素がクリックされるとcssメソッドを利用してmySize(新規に作成されたプロパティ)の値を取得し、アラートで表示するようにしています。

$("#get").click(function(){
	var arry = $("div").css("mySize");
	alert(arry);
})

実際にgetボタンをクリックすると、アラートで「50,50」とdiv要素の幅と高さが表示されます。

実際に値を設定する

値を設定する部分はjQueryの以下の部分になります。setのid属性を持つ要素がクリックされるとcssメソッドを利用してmySize(新規に作成されたプロパティ)の値に第2引数で設定した配列[100,200]を設定します。

$("#set").click(function(){
	$("div").css("mySize",[100,200]);
})

結果として、setボタンをクリックするとdiv要素の幅が100px、高さが200pxになります。

メモ

ver1.8ではベンダープレフィックスを自動的に設定します

ベンダープレフィックスなどブラウザ間の差異を吸収するcssプロパティの作成に利用できるcssHooksですが、ver1.8ではデフォルトでベンダープレフィックスをブラウザに合わせて補完してくれるようです。ということでcssHooksを利用する機会は減るのかもしれません。
→本家サイト:JQUERY 1.8 RELEASEDの「Automatic CSS prefixing」を確認してください。