Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > 日本語 - Japanese > jQueryのaccordionを使ってナビゲータを作る➀(固定ナビゲータ)
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

jQueryMobile1.3のPanelウィジェットを使ってビュー用XPagesを切り替える(ナビゲータの代わりを作る)

jQueryMobile1.3で追加されたPanelウィジェットを使って、XPagesを切り替えるメニューを作ります。 ビューを切り替えるナビゲータのようにも使えます。

XPagesとjQueryMoileでモバイル用メニュー紹介アプリを作ってみよう

jQueryMobileを使って、カテゴリを階層表示し、添付ファイル画像をリストビューに表示するモバイルアプリケーションの作り方です。 この方法のメリットは1画面につき1XPagesなのでデバッグが容易な点と、カテゴリの絞り込

jQueryのaccordionを使ってナビゲータを作る➀(固定ナビゲータ)

jQueryのaccordionを使って折りたたみできるナビゲータを作ります。
Community articlejQueryのaccordionを使ってナビゲータを作る➀(固定ナビゲータ)
Added by ~Rebecca Umkipuljip | Edited by ~Rebecca Umkipuljip on October 17, 2012 | Version 16
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
jQueryのaccordionを使って折りたたみできるナビゲータを作ります。
ShowTable of Contents
HideTable of Contents
  • 1 はじめに(完成形と効果)
  • 2 ナビゲータ用カスタムコントロールの作成
  • 3 親となるXpagesの作成
  • 4 ナビゲータの色を変える

はじめに(完成形と効果)

jQueryのaccordionを使って、下記のようなナビゲータを作ってみます。

 

【効果】

・accordionを使って、簡単にナビゲータが作れる

・ナビゲータのデザイン変更がjQueryのHP上にあるツールを使って簡単にできる

・ビューはカスタムコントロールで作らずに、通常のXPageで作り、ページの埋め込みを使って切り替えるので、、ビューの開発生産性が高まると同時に作成するXPageの数を減らせる

 

【事前準備】

切り替えるビューとなるXPageは作成しておいて下さい。ここには切り替える方法のみ記述しています。

 

ナビゲータ用カスタムコントロールの作成

1.カスタムコントロールを作成し、名前をつけます。(サンプルではccNavi1)

 

2.プロパティ-リソースにある[追加]ボタンを押し、JavaScriptライブラリを選択します。

 

3.今回はjQueryをCDN(Contents Delivery Network)から取得しますので、”URLからJavaScriptライブラリへのリンク”を選択し、下記のURLを貼り付けた後、「種類」に”クライアント”を選択し、[OK]ボタンを押します。

種類

URL

内容

JavaScriptライブラリ

http://code.jquery.com/jquery-1.8.2.min.js

jQuery本体

JavaScriptライブラリ

http://code.jquery.com/ui/1.9.0/jquery-ui.min.js

jQueryUI

スタイルシート

http://code.jquery.com/ui/1.9.0/themes/start/jquery-ui.css

jQueryUI用デザインCSS

これで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イベントにjQueryを呼び出すためのコードを記入します。

【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ファイルをダウンロードすれば、オリジナルの色に変更することもできます。


  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (16)
collapsed Versions (16)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (16)Oct 17, 2012, 1:39:15 AM~Rebecca Umkipuljip  
15Oct 16, 2012, 10:21:05 AM~Miriam Quettoomannivu  
14Oct 16, 2012, 10:19:20 AM~Miriam Quettoomannivu  
13Oct 16, 2012, 10:17:26 AM~Miriam Quettoomannivu  
12Oct 16, 2012, 10:16:04 AM~Miriam Quettoomannivu  
11Oct 16, 2012, 10:13:17 AM~Miriam Quettoomannivu  
10Oct 16, 2012, 10:10:11 AM~Miriam Quettoomannivu  
9Oct 16, 2012, 9:58:24 AM~Miriam Quettoomannivu  
8Oct 16, 2012, 9:52:45 AM~Miriam Quettoomannivu  
7Oct 16, 2012, 9:40:16 AM~Miriam Quettoomannivu  
6Oct 16, 2012, 9:36:54 AM~Miriam Quettoomannivu  
5Oct 16, 2012, 9:36:23 AM~Miriam Quettoomannivu  
4Oct 16, 2012, 9:38:39 AM~Miriam Quettoomannivu  
1Oct 16, 2012, 9:33:40 AM~Miriam Quettoomannivu  
1Oct 16, 2012, 9:33:40 AM~Miriam Quettoomannivu  
1Oct 16, 2012, 9:33:40 AM~Miriam Quettoomannivu  
expanded Comments (0)
collapsed Comments (0)
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility
Link to this article x
Copy and paste this wiki markup to link to this article from another article in this wiki.
●Close