2011/11/18 19:08:10

VisualforceページでjQueryをお気軽に使う

このエントリーをはてなブックマークに追加

VisualforceページJavaScriptライブラリのjQueryを使う場合のサンプルを紹介します。以下は Visualforce ページのドキュメントにサンプルとして載っていた取引先入力フォームに jQuery で視覚効果を追加したサンプルです。

<apex:page standardController="Account">
	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script type="text/javascript">
		$(function() { $('.sampleform').effect('bounce', '', 500); });
	</script>
	<apex:form styleClass="sampleform">
		<apex:pageBlock title="My Content" mode="edit">
			<apex:pageBlockButtons >
				<apex:commandButton action="{!save}" value="Save"/>
			</apex:pageBlockButtons>
			<apex:pageBlockSection title="My Content Section" columns="2">
				<apex:inputField value="{!account.name}"/>
				<apex:inputField value="{!account.site}"/>
				<apex:inputField value="{!account.type}"/>
				<apex:inputField value="{!account.accountNumber}"/>
			</apex:pageBlockSection>
		</apex:pageBlock>
	</apex:form>
</apex:page>

2, 3行目で jQuery のライブラリを読み込ませています。VisualforceページJavaScriptライブラリを利用する場合、ライブラリを構成するファイルをZIP圧縮して静的リソースにアップロードしておけば利用可能になりますが、jQuery 他数種類のライブラリはGoogle等のサーバでホスティングされており、このようにパスを記述すれば、先ほどの手順は不要になります。少なくともプロトタイプを作る時はこれで十分ですね。

4~8行目は jQuery UIを利用して、画面表示直後にフォームのブロック要素に対してエフェクトをかけています(画面表示直後数秒間入力フォーム部分が上下に揺れます)。10行目以降は元のサンプルのままです。DOMを操作する場合には注意点があり、セレクタで特定要素を指定する場合はタグにIDを振って使うのが効率的ですが、<apex:xxx>のタグにIDをつけた場合、VisualforceがHTMLに変換する際にIDの値が変わってしまうため、そのままのIDを使えません(方法はあるのですが、それについてはまた改めて書きたいと思います)。今回はエフェクトをかける要素に styleClass でクラス名('sampleform')をセットしておき、指定できるようにしています。

(今回のサンプルは何の役にも立ちませんが)JavaScript ライブラリを利用すればユーザの利便性をより向上させる機能を簡単に実装することができます。試してみてはいかがでしょうか。

「スタッフブログ」へのコメントやご意見等ありましたら、 Facebookページまでお願いします。
twitterでもつぶやいてますので、ご興味のある方はぜひフォローをお願いします。

(小島)

admin
Page topへ