階層メニュー FOLIOLE サンプル

フレーム対応サンプル ( FOLIOLE 3.0 以降 )

フレーム対応サンプルで正常動作を確認したブラウザは，現在までに以下のとおりです。

ブラウザ	バージョン	ＯＳ		備考
Opera	7～8	Win 98	○	おおまかにいって，普通の FOLIOLE が動く環境ならフレーム対応にしても問題ないです。シェアはほとんどありませんが，Netscape 6.2 では，Windows / Mac とも，第2層目以降のメニューがスクロールに追随しませんでした。また， Netscape は 7系でも，マウスホイールによるスクロールではメニューが移動してしまいましたが，スクロールバーを少し動かすと正常動作に戻ります。
Opera	9	Win XP	○
Firefox	1.0	Win 98	○
Firefox	1.5～3.0	Win XP	○
Microsoft Internet Explorer	5	Win 98	○
	6～8Beta	Win XP	○
	5系	Mac OS9	○
Netscape	6.2	Win 98 / Mac OS9	×
Netscape	7系	Win 98 / Win XP / Mac OS9	△

データ項目のリソース別

sample 3 / 4 / 5		ビュー表 ( データベース )
FVS データベース版		データベース
sample 1 / 2 / 7 / 8 / 9		直書き。外部スクリプトも可 ( 注 )
sample 10 / 11 / 12		テキストファイル ( CSV形式 )
FVS テキストファイル版		テキストファイル ( CSV形式 )

第2層目以降がヨコ方向に並ぶ

sample G / H / J / L		FOLIOLE 3.2 から正式にサポート

番外編 ( 直書き )

sample 14 / 15 / 16		動作を見るためのサンプル

応用編 ( 直書き )

sample K2 / k3		第2層目の位置を固定。

しくみ特長設置方法ノートFAQ動作サンプルアピアランス更新情報ダウンロード

( 注 ) 外部スクリプトも可
外部スクリプトの中 ( 含コメント ) に日本語を使用する場合は，文字コード・ブラウザおよびそのバージョンの組み合わせによっては，文字化けが生ずることがあります。
一般的には，本体・外部スクリプトの文字コードが一致すれば，生じないことが多いのですが，たとえば本体・外部スクリプトともに EUC-JP や UTF-8 に統一しても，あるブラウザのあるバージョンでは，避けることができないようです。
現実的な対策としては，外部JavaScript の中 ( 含コメント ) に日本語を含む場合は，HTML と外部JavaScript の文字コードを SHIFT_JIS に統一することをおすすめします。

sample 3 / 4 / 5 ( ビュー表 → データ項目 )

sample 3 の１層目をのぞき，データ項目は，SQL サーバーと PHP スクリプトをもちいてデータベースから取得し，これを JavaScript の配列の形に加工したものです。内容はすべて架空です。

sample 3 / 4 / 5	方向	層数	項目数	ラベル
sample 3	→	4	29	画＋和
sample 4	→	4	29	英
sample 5	↓	4	29	英

FVS データベース版 ( データベース → データ項目 )

このサイトの検索ボックスでの検索キーワードと検索結果をデータベースに記録したものを， PHP スクリプトをもちいて JavaScript の配列の形に加工したものです。

FVS データベース版	方向	最大層数	項目数	ラベル
FVS データベース版	↓	4	-	-

sample 1 / 2 / 7 / 8 / 9 ( データ項目は，HTMLファイルに直書き )

すべてのデータ項目は，HTMLファイルに直書き ( 手書き ) 。内容はすべて架空です。外部 JS ファイルから本体やデータ項目を読み込む方法も可 ( 注 )。ファイルを FTP でアップロードしない限りデータ項目は固定されてしまいますが，この方法がもっとも手軽です。

sample 1 / 2 / 7 / 8 / 9	方向	層数	項目数	ラベル
sample 1	→	2	10	画像
sample 2	↓	4	60	和
sample 7	非整列	4	60	和
sample 8	→	4	60	英
sample 9	混在	4	60	英

sample 10 / 11 / 12 ( テキストファイル ( CSV ) → データ項目 )

実戦的なサンプルです。データ項目は，まず全データ項目を書きこんだテキストファイルを作成し，PHP スクリプトをもちいて JavaScript の配列の形に加工したものです。内容はすべて架空です。

sample 10 / 11 / 12	方向	層数	項目数	ラベル
sample 10	→	3	88+3	和
sample 11	→	3	82	和
sample 12	→	4	122	和

FVSテキストファイル版 ( テキストファイル ( CSV ) → データ項目 )

このサイトの検索ボックスでの検索キーワードと検索結果をテキストファイル ( CSV ) に記録 ( 現在中断 ) したものを， PHP スクリプトをもちいて JavaScript の配列の形に加工したものです。

FVSテキストファイル版	方向	最大層数	項目数	ラベル
FVSテキストファイル版	↓	4	-	-

sample G / H / J / L ( 第2層目以降がヨコ方向に並ぶ )

FOLIOLE 3.2 から第2層を， FOLIOLE 3.32 からは第3層目以降もヨコ方向に並べるやり方を正式にサポートしました。たったひとつの設定で，早変わりです。子セルの項目数が多い場合には不向きですが，きれいに飾ればとてもおしゃれなメニューになります。データ項目は，HTMLファイルに直書き。内容はすべて架空です。

sample G / H / J / L	方向	層数	項目数	ラベル
sample G	→	2	20	英
sample H	混在	2	20	英
sample J	↓	2	20	英
sample L	混在	4	34	英

sample 14 / 15 / 16

実用性のない，非常に多層化したサンプルです。データ項目は，各層あたりひとつないし２つにとどめ，HTMLファイルに直書き。内容はすべて架空です。

sample 14 / 15 / 16	方向	層数	項目数	ラベル
sample 14	↓	10	20	英
sample 15	-	16	16	英
sample 16	-	32	32	英

sample K2 / k3

第2層目の位置を固定しました。普通のラベルに代えて，表，リンク，フォームをラベルとして設置したものです。

sample K2 / k3	方向	層数	項目数	ラベル
sample K2	→	2	9	混在
sample K3	↓	2	9	混在
sample K4 半透明	↓	2	14	混在
sample K5 半透明	↓	2	14	混在
sample K6 半透明	→	2	14	混在
sample K7 クリックで展開	→	2	6	混在

Copyright (C) 2004 Nakagawa Hiroyuki All rights reserved