レスポンシブデザインサポートの一部として jQuery を使用する

jQuery は、Web アプリケーション開発で使用される HTML 文書のナビゲート、イベント処理、アニメーション、Ajax 対話を簡素化する JavaScript ライブラリです。

jQuery は、XPage レスポンシブ Bootstrap プラグインの一部としてパッケージされています。 jquery-2.1.1.js は、Bootstrap3 テーマと Bootstrap3_flat テーマのリソースとして提供されています。

Bootstrap とは別に XPage アプリケーションで jQuery を使用する

XPage アプリケーションで Bootstrap とは別に jQuery を使用したい場合、いくつかの方法で実現できます。

最初の方法として、以下のようにしてリソースを XPage に追加できます。

<xp:this.resources>
<xp:script 
	src="/.ibmxspres/.extlib/responsive/jquery/jquery.min.js" clientSide="true">
</xp:script>
</xp:this.resources>

使用できるもう 1 つの方法は、jQuery リソースを XPage アプリケーションのリソースのカスタムテーマに追加し、そのテーマを使用するようにアプリケーションを設定することです。この方法を使用すると、アプリケーション内のすべての XPage で jQuery が使用可能になります。例:

<theme extends="Bootstrap3"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
<resource>
	<content-type>application/x-javascript</content-type>
	<href>/.ibmxspres/.extlib/responsive/jquery/jquery.js</href>
</resource>
</theme>

スクリプトブロック内に jQuery を追加することにより XPage で jQuery を使用することもできます。

<xp:scriptBlock id="script1">
			<xp:this.value><![CDATA[XSP.addOnLoad( function() {
					$("*[id$='myText']").html("This is JQUERY!");
				});]]&gt;
			</xp:this.value>
		</xp:scriptBlock>
<xp:div id="myText"></xp:div>

また、jQuery を XPage またはカスタムコントロールの onClientLoad イベントに追加したり、または以下の例のようにボタンの onClick イベントなどのクライアントサイドイベントとして追加することもできます。

<xp:button value="Click me" id="button1">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script>
				<![CDATA[
					$("*[id$='myText']").html("This is JQUERY!");
				]]&gt;
			</xp:this.script>
		</xp:eventHandler>
	</xp:button>
<xp:div id="myText">No jquery :(</xp:div>

jQuery を XPage で使用することによる問題の回避

XPage で jQuery を使用する際の問題の 1 つは、コロンを含む ID を jQuery セレクターとして渡せないことです。これは、コロンが特殊文字のためです。そのため、標準の jQuery メソッドを使用して、XPage 上の要素をその ID を使用して選択することはできません。

この問題を回避するにはいくつかの方法があります。jQuery に ID を渡す際にコロンを回避する方法の 1 つは、次のように円記号を 2 つ各コロンの前に付加します。

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $('#view¥¥:_id1¥¥input1)

jQuery に ID を渡す際にコロンを回避するために使用できるもう 1 つの方法は、次のように代わりに CSS クラス名をセレクターをとして使用することです。

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $('.inputClass1')

ID の末尾を指定するためにワイルドカード文字を使用することもできます。以下のセレクターは、末尾が特定の ID 値である ID (セレクターの「id$=」で示されています) を持つすべての要素 (セレクターの「*」で示されています) を指定しています。

HTML: <xp:inputText id="view:_id1:input1" class="inputClass1"></xp:inputText>

jQuery Selector: $("*[id$='input1']")

最後に、OpenNTF で使用可能な XSnippet は、XPage 用のカスタム jQuery セレクター機能を提供します。この機能は、コロンの前に二重の円記号エスケープ文字を自動的に付加します。このスニペットは、XPage レスポンシブ Bootstrap プラグインに組み込まれています。これは、2 つの Bootstrap3 テーマにより提供される以下のリソース内にあり、アプリケーションにリソースとして追加できます。

<resource>
			<content-type>application/x-javascript</content-type>
			<href>/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js</href>
</resource>