【イメージ】
3.<li>タグを入れます。今回は2つのXPagesを切り替えるので2個配置します。
【XPagesソース】
<div data-role="panel" id="menupanel" data-theme="c">
<ul data-role="listview" data-theme="c">
<li>
</li>
<li>
</li>
</ul>
</div>
【イメージ】
4.右のコアコントロールから、リンクコントロールを<li>タグの間に配置します。
【XPagesソース】
<ul data-role="listview" data-theme="c">
<li>
<xp:link escape="true" text="リンク" id="link2"></xp:link>
</li>
<li>
<xp:link escape="true" text="リンク" id="link3"></xp:link>
</li>
</ul>
5.二つ目のリンク(link3)を選択し、別のXPagesを表示するためのリンクを設定します。ラベルに「検索して探す」と入力し、リンクタイプに「ページを開く」、Xpagesに「search.xsp」を選択します。
【XPagesソース】
<li>
<xp:link escape="true" id="link3" text="検索して探す"
value="/search.xsp">
</xp:link>
</li>
【イメージ】
6.一つ目のリンク(link2)を選択し、パネルと閉じるためのリンクを配置し、プロパティを追加します。ラベルに「分類から探す」と入力し、リンクタイプに「アンカー」、アンカーに「#」と入力します。
【XPagesソース】
<li>
<xp:link escape="true" text="分類から探す" id="link2"
value="##{id:#}">
</xp:link>
</li>
【イメージ】
7.一つ目のリンク(link2)を選択し、すべてのプロパティ-基本-attrsの「+」ボタンを押し、属性を追加します。nameに「data-rel」、valueに「close」と入力します。
【XPagesソース】
<li>
<xp:link escape="true" text="分類から探す" id="link2"
value="##{id:#}">
<xp:this.attrs>
<xp:attr name="data-rel" value="close"></xp:attr>
</xp:this.attrs>
</xp:link>
</li>
【イメージ】
8.パネルを呼び出すリンクとアイコンをヘッダーに設定します。右のコアコントロールからリンクコントロールをヘッダーの下に配置します。
【XPagesソース】
<!--ヘッダの設定-->
<div data-role="header">
<xp:link escape="true" text="リンク" id="link4"></xp:link>
<h1>分類</h1>
</div>
9.リンクコントロールを選択し、Panelコントロールを表示するためのリンクを設定します。ラベルを削除し、リンクタイプに「アンカー」、アンカーに「menupanel」を選択します。
【XPagesソース】
<div data-role="header">
<xp:link escape="true" id="link4"
value="##{id:menupanel}">
</xp:link>
<h1>分類</h1>
</div>
【イメージ】
10.リンクコントロールを選択し、すべてのプロパティ-基本-attrsの「+」ボタンを押し、属性を2つ追加します。それぞれ、下記の値を設定します。
name
|
value
|
data-icon
|
bars
|
data-iconpos
|
notext
|
【XPagesソース】
0
【イメージ】
12.切り替わり先となるXPages(search.xsp)にも同様のパネルを配置し、リンク先を設定します。