ShowTable of Contents
はじめに(完成形と効果)
ｊQueryのaccordionを使って、下記のようなナビゲータを作ってみます。
【効果】
・accordionを使って、簡単にナビゲータが作れる
・ナビゲータのデザイン変更がjQueryのHP上にあるツールを使って簡単にできる
・ビューはカスタムコントロールで作らずに、通常のXPageで作り、ページの埋め込みを使って切り替えるので、、ビューの開発生産性が高まると同時に作成するXPageの数を減らせる
【事前準備】
切り替えるビューとなるXPageは作成しておいて下さい。ここには切り替える方法のみ記述しています。
ナビゲータ用カスタムコントロールの作成
1.カスタムコントロールを作成し、名前をつけます。(サンプルではccNavi1)
2.プロパティ－リソースにある［追加］ボタンを押し、JavaScriptライブラリを選択します。
3.今回はjQueryをCDN(Contents Delivery Network)から取得しますので、”URLからJavaScriptライブラリへのリンク”を選択し、下記のURLを貼り付けた後、「種類」に”クライアント”を選択し、［OK］ボタンを押します。
これでjQueryを使うための準備が出来ました。
※CDNのURLはjQueryUIのホームページの下の方に掲載されています。
※JavaScriptライブラリファイル名にminをつけているのは、改行などが排除されたファイルサイズの小さい圧縮版を使用するためです。
4.計算結果フィールドを配置し、「オプション－コンテンツの種類」に”HTML”を選択します。(コンテンツの種類はテキストでも動くようです.)
5.値タブで、“JavaScript"を選択肢、下記のようなHTMLを書き込みます。＜h3＞タグがナビゲータの分類を表し、＜li＞タグにビューの名前などを指定します。
【HTMLソース】
//メニューとなる階層をHTMLで記述
"<div id='accordion' width='100px'>" +
"<h3><a href='#'>メニュー</a></h3>" +
"<ul>" +
"<li><a href='xpFrame.xsp?ContentsXPageName=xpView1.xsp'>ジャンル別</a></li>" +
"<li><a href='xpFrame.xsp?ContentsXPageName=xpView2.xsp'>分類別</a></li>" +
"<li><a href='#'>詳細</a></li>" +
"</ul>" +
"<h3><a href='#'>メニュー</a></h3>" +
"<ul>" +
"<li><a href='#'>詳細</a></li>" +
"<li><a href='#'>詳細</a></li>" +
"<li><a href='#'>詳細</a></li>" +
"</ul>" +
"</div>"
6.＜a＞タグのhrefに指定しているURLは下記の意味になります。
7.次にカスタムコントロールのイベントタグを表示し、onClientLoadイベントにｊQueryを呼び出すためのコードを記入します。
【JavaScriptソース】
//jQueryのメソッドを呼出し
$(function() {
$('#accordion').accordion({
autoHeight:false
});
$('ul').css({padding:'0px'});
$('li').css({padding:'3px 3px 3px 25px'});
});
親となるXpagesの作成
1.ナビゲータやビューを埋め込むための親となるXpageを作成します。(サンプルではxpFrame)
2.コンテナコントロールから「表」(2x2)を配置し、表の幅を100%にします。
3.①と②のセルを結合し、データベースタイトルなどを記入します。
4.③の位置にカスタムコントロール(ccNavi1)を配置し、セルの幅を200ピクセルに設定します。
5.④の位置にコンテナコントロールから「ページの組み込み」を配置します。ページの組み込みタブの「オプション－ページ名」で“値の計算“を選択し、URL引数から指定したXpage名をページとして呼び出すJavaScriptを記述します。
【JavaScriptソース】
//URL引数からxPage名を取得し、組み込みコントロールに指定する
var defaultPageName = 'xpView1.xsp';
var openPageName = context.getUrlParameter('ContentsXPageName');
if (openPageName==''){
defaultPageName;
}else{
openPageName
}
6.完成するとaccordionメニューを使ってビューを切り替えることが出来るようになります。
ナビゲータの色を変える
1.jQueryUIのHPにあるテーマギャラリーのCSSを適用するには、各テーマの名前をCSSファイルパスのフォルダ名に置き換えます。(赤字部分)
http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css
ex)
ui darknessを適用するには、スペースの部分を半角ハイフンに変換し、赤字部分のフォルダ名として指定します。
http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css
※このHP上で色の変更を行い、カスタマイズしたCSSファイルをダウンロードすれば、オリジナルの色に変更することもできます。