 |
|
|
|
|
データ項目のオプション
データ項目は、第1番目から第3番目までが必須 ( 空白 "" の場合もあり ) で、第4番目から第11番目までがオプションです。
第4番目から第10番目までは、指定がないときには、形状を決める連想配列 ( 設置方法のステップ 4 で設定 ) に従います。
第11番目は、foliole 2.23 以降で有効で、セルにコメント ( URL の説明文など ) を持たせるためのオプションです。現在、 fo_get_sitemap() のみでデフォルトで表示 (非表示も可) するようになってます。
いっぱんに、形状を決める連想配列では、全体または層ごとに設定し、データ項目のオプションでは、その設定を個別のセルごとに上書き ( 書き換え ) するものです。ただし、除外される ( 設定しても無視される ) 要素もあります。
途中の要素を指定せずに、とびとびで指定するような場合は、指定しない要素は、空白 ( '' ) か 0 で埋めてください。( '' ) はなくてもいいのですが、ある方が見やすいので。
たとえば、第6番目 ( セルの幅 ) だけを指定するときは、そのデータ項目は、次のようにしてください。
['識別名','ラベル','ＵＲＬ','','',150]
たとえば、第5番目 ( セルの高さ ) 、第9番目 ( 横方向オフセット ) 、第10番目 ( 縦方向オフセット ) を指定するときは、そのデータ項目は、次のようにしてください。
['識別名','ラベル','ＵＲＬ','',50,'','','',30,60]
- 第1番目 ( 必須 )
-
[ 識別名 ]
 コンテナ内で一意な文字列。セルを識別する。パンくずリストを出力するためには、メニュー全体で重複不可。
- 第2番目 ( 必須 )
-
[ ラベル ]
セルの上に貼るHTML。一般にはテキスト。画像・テーブル・リスト・フォームなども可。ただし、ラベル全体を値としてシングルクォート ( ' ) で囲みますので、ラベル中の HTML には、シングルクォートは使わず、 ダブルクォート ( " ) などを適当に使用してください。また、フォームを置く場合は、沈黙セルか紹介セル ( 次の第3番目参照 ) にしないと、マウスフォーカスが入っただけでジャンプしてしまいます。
以下に、マウスロールオーバー・アウトに対応させた画像の HTML をラベルに使った例を示します。
'<img src="../img/btn_fo_smp_av.png" alt="AV" onmouseover=\'this.src="../img/btn_fo_smp_av_r.png";\' onmouseout=\'this.src="../img/btn_fo_smp_av.png";\' \/>'
- 第3番目 ( 必須 )
-
[ ＵＲＬ ]
セルをクリックしたときのジャンプ先 URI ( url ) 。この値を空白 ( '' ) とすることで沈黙セル、ハイフン ( - ) とすることで自分自身にリンクのない紹介セルとする。
- 第4番目 ( オプション )
-
[ 出力先 ]
ジャンプ先のウインドウ名またはフレーム名。デフォルトは設置方法のステップ 4 の TARGET_WINDOW で指定した場所。指定がなければ、メニューのあるウインドウ ( フレーム ) 自身。
- 第5番目 ( オプション )
-
[ セルの高さ ]
セルの高さは、セルごとに指定できます。指定のないときは、 CELL_HEIGHT で指定した値。
- 第6番目 ( 第1層目のみ有効 ： オプション )
-
[ セルの幅 ]
第1層目に限り、セルごとにセルの長さを自由に決められます。指定のないときは、 CELL_WIDTH で指定した値。
- 第7番目 ( 沈黙セルのみ有効 ： オプション )
-
[ ラベル背景色 ]
マウスに無反応の沈黙セルのみ、ラベルの背景色をセル独自に決められます。
- 第8番目 ( 沈黙セルのみ有効 ： オプション )
-
[ ラベル文字色 ]
マウスに無反応の沈黙セルのみ、ラベルの文字色をセル独自に決められます。
- 第9番目 ( 第1層目のみ有効 ： オプション )
-
[ 横方向位置オフセット ]
第1層目に限り、セルごとにその横位置を自由に決められます。このオフセット量は、次の順番のセルに引き継がれます。
- 第10番目 ( 第1層目のみ有効 ： オプション )
-
[ 縦方向位置オフセット ]
第1層目に限り、セルごとにその縦位置を自由に決められます。このオフセット量は、次の順番のセルに引き継がれます。
- 第11番目 ( オプション / FOLIOLE 2.23 以降 )
-
[ セルのコメント ]
セルごとにコメントを保持させることができます。たとえば、サイトマップで飛び先 URL の簡単な説明文などに使えます。関数 fo_get_sitemap()を 参照してください。
|
|
|
関数
FOLIOLE で使用している関数をご説明します。データ項目さえあれば、階層メニューの実体とは無関係に JavaScript の中から呼び出せるものがほとんどです。
以下にいうデータ項目の配列とは、識別名・ラベル・ＵＲＬの三者を要素とする配列であるデータ項目がひとつ以上集まってできた配列のことで、形としては次のようになります。
[[id1,label1,url1],[id2,label2,url2],[id3,label3,url3],・・・]
データ項目がひとつだけなら、[[id,label,url]]という形です。 [id,label,url] ではありませんので念のため。
- object fo_get_coordinates(string id_name) FOLIOLE 2.7 以降
-
FOLIOLE と直接関係はありませんが、 タグの id 属性値 id_name で指定された HTML 要素のブラウザ上の座標を得ます。第1層目の下方向の位置 xxxxx.position_y を、HTML 要素に依存したいときなどに使えるのではないでしょうか。
ページのどこかで、
<div id="somewhere">何か要素</div>
などと記述したあとの JavaScript 文で、
var cod = fo_get_coordinates("somewhere");
とすれば、cod.x , cod.y がそれぞれこの要素の x座標 、 y座標 ( ピクセル ) となります。
このページの HTML ソースの終わりごろで使っています。
- array fo_get_tsv_data(array ary) FOLIOLE 2.7 以降
-
FOLIOLE のデータ項目 ary を引数に取り、各項目ごとに各層識別名、ラベル、URL 以下各要素をタブ ( '\t' ) で連結した文字列の配列を返す。識別名が最終層まで満たないときは、0 で埋めます。データ項目の第4番目以降のオプショナルな要素は、未定義など偽を返せば 0 か空白 ( "" ) で埋めます。データ項目名 ( 下の例では 'areadata' ) という情報は捨て去られます。
以後、設置方法のページで使ったサンプルのデータ項目 areadata を使います。
( 例 ) var tsv_data = fo_get_tsv_data(areadata);
- string fo_put_tsv_tbl(array ary [, bool bdr]) FOLIOLE 2.7 以降
-
FOLIOLE のデータ項目 ary を引数に取り、各項目ごとに各層識別名、ラベル、URL 以下各要素を表にして書き出す HTML を返す。fo_get_tsv_data() の返り値である配列 ( 上の例では tsv_data ) を視覚化したようなものです。データ項目の第4番目以降のオプショナルな要素は、未定義など偽を返せば 0 か空白 ( "" ) で埋めます。第2引数 bdr に true を与えると枠線も表示します。
ブラウザに出力するのが目的なので、アンパサンド ( & ) 、タグ記号 ( < , > ) とダブルクォーテーション ( " ) は、実体参照に変換されます。
以下に、設置方法のページで使ったサンプルのデータ項目 areadata をもちいて出力を例示します。ブラウザによっては、テーブルの <td> タグ の内容が空白の場合、セルがつぶれて見えます。
( 例 ) document.write(fo_put_tsv_tbl(areadata,true));
( 出力結果 )
表を丸ごと左上から右下までマウスドラッグで Microsoft Excel などにコピー＆ペーストするとデータ項目の編集が楽にできます。
- ary fo_get_ary_data(array tsv, int lay) FOLIOLE 2.7 以降
-
各層識別名、ラベル、URL をタブ ( '\t' ) で連結した文字列の配列 tsv を引数に取り、FOLIOLE のデータ項目 ( 配列 ) を返す。上の fo_get_tsv_data() と逆の働きをします。
引数の配列 tsv の各要素は、文字列をタブで連結した文字列なので、そのデータ項目が何層のメニューを作るのかという情報 ( 最終識別名とラベルとの区別 ) がありません。したがって、層数を第2引数 lay に与えてください。
( 例 )
var ary_data = fo_get_ary_data(tsv_data, 3);
//タブ連結文字列 ( 上の tsv_data を流用 ) から 3層のメニュー用のデータ項目を得る
- string fo_put_fo_item(array tsv, int lay [, string name]) FOLIOLE 2.8 以降
-
各層識別名、ラベル、URL をタブ ( '\t' ) で連結した文字列の配列 tsv および層数の指定 lay を引数に取り、FOLIOLE の各データ項目を作成する JavaScript 文を返します。fo_get_ary_data() の返り値である配列 ( 上の例では ary_data ) を視覚化したようなものです。これをブラウザに出力したテキストは、 ( 書き方はともかく ) FOLIOLE のデータ項目をつくる JavaScript 文そのものです。ブラウザに出力するのが目的なので、アンパサンド ( & ) 、タグ記号 ( < , > ) とダブルクォーテーション ( " ) は、実体参照に変換されます。また、改行タグも含まれています。 JavaScript 文として丸ごとエディタにコピペすれば、データ項目の一丁上がりです。
かならず層数を第2引数 lay に与えてください。データ項目の配列の名前は、 name の指定がないときには、'foliole_data' と名づけられます。
( 例 )
document.write(fo_put_fo_item(tsv_data, 3, 'ary_data'));
//タブ連結文字列 ( 上の tsv_data を流用 ) から 3層のデータ項目をつくる JavaScript 文を書き出す。
( 出力結果 )
- void fo_scroll_menu(object obj) FOLIOLE 2.4 以降
-
縦スクロールの動きに合わせてメニューを縦方向に移動させるプロシージャ。やり方は簡単で、<body>タグの属性として
onscroll="fo_scroll_menu(メニューの名前);"
のように記述します。動作サンプルとして、更新情報のページを使いましたので参考にしてください。
- array fo_get_numby_lay(array ary [, bool lnk] [, bool itr]) FOLIOLE 2.27 以降
-
引数のデータ項目の配列 ary に含まれる階層ごとのデータ項目数を配列で返す。返り値を NUM とすると、NUM[k] には第k+1層目のデータ項目数が入る。 lnk に false を明示すると沈黙セルまたは紹介セル用の ( したがってリンクするページを持たない ) データ項目を省く。デフォルトは true 。
FOLIOLE 2.29 からはさらに、itr に true を明示すると沈黙セル用のデータ項目のみを省き、紹介セル用のデータ項目はカウントするようになります。
- bool fo_get_search(array ary, string id, string val [, bool exp]) FOLIOLE 2.24 以降
-
フォームのテキストボックスの値 val をキーワードとして、データ項目の配列 ary のコメントを全部走査して検索し、ヒットしたデータ項目のリンクを id という名の <div> コンテナに出力する。FOLIOLE 2.24 からの新機能です。くわしくは、更新情報の FOLIOLE 2.24 をごらんください。
FOLIOLE 2.25 以降は、val としてスペースではさんだ複数後による AND検索を可能とし、また、第4引数として明示的に false を与えると、データ項目のリンクに続けてコメントを表示することがなくります。
FOLIOLE 2.28 以降は、データ項目のコメントのNOT検索を追加しました。たとえば、 A -B C は、AとCを含みかつBを含まないコメントを探します。その他の書式には対応していません。
- string fo_get_sitemap(array ary [, bool exp [, bool blt]])
-
引数のデータ項目の配列 ary を得て、全データ項目のリンクを樹形図に表したリストを書き出す HTML を返す。
データ項目の第11番目 ( コメント ) があれば、それをリンクの後に続けて表示するが、exp が false なら表示しない。また、blt が false なら、各リストの頭のマークを付けない。
FOLIOLE 4.2 （2010年5月4日）以降は、以下のような設定が可能です。
引数の第１番目〜第３番目までの要素は従来どおりです。
これに見栄えをよくするための要素として、第４番目〜第９番目までの引数を設定可能にしました。スカラー値で指定することも、各層に対応させた配列で指定することも可能です。必須のものではありません。
【注】
第Ｎ番目（Ｎ≧３）以降の引数を設定するときは、引数の順番を確保するために、（Ｎ−１）番目までの引数の値も何らかの形（true なり false なりで、または、スカラー値・配列、もしくは "0" なり "''" なりで）で指定してください。
【第２番目の引数】
true （デフォルト） ： データ項目の第11番目 ( コメント ) の表示をする ／ false ： 表示をしない （表示をしないときには false と明示する）
【第３番目の引数】
true （デフォルト） ： <li> タグで表示されるマーカーを付ける ／ false ： 付けない （付けないときには false と明示する）
【第４番目の引数】
各ラベルの文字列の頭におく任意の文字（ ◆ や ★ など）が指定可能です。指定しないときは、 "''" と明示します。
[例１] '◆' …… 全層のラベルの前に ◆ を付ける。
[例２] ['■',null,'★'] …… 第一層目、第二層目のラベルの前には ■ 、第三層目以下のラベルの前には ★ を付ける。
【第５番目の引数】 （ border-width ）
各ラベルの枠線の太さ（ピクセル）の指定です。枠線を付けないときは、 "0" と明示します。
[例１] '2px' …… 全層のラベルの枠を 2ピクセルにする。
[例２] ['1px','1px 2px','0px'] …… 第一層目のラベルの枠線幅は1ピクセル、第二層目は上下が1ピクセル・左右が2ピクセル、第三層目以下は枠線を付けない。
【第６番目の引数】 （ border-color ）
各ラベルの枠線の色の指定です。指定しないときは、 "''" と明示します。
[例１] 'Gray' …… 全層のラベルの枠の色を灰色にする。
[例２] ['Silver Gray Gray Silver','Red Blue'] …… 第一層目のラベルの枠線の色は、上・右・下・左の順に銀・灰・灰・銀で、第二層目以下は上下を赤に左右を青に指定する。
【第７番目の引数】 （ background-color ）
各ラベルの背景色の指定です。指定しないときは、 "''" と明示します。
[例１] 'Yellow' …… 全層のラベルの枠の色を黄色にする。
[例２] ['Silver',null,null,'Pink'] …… 第一層目から第三層目までのラベルの背景色は銀色、第四層目以下は桃色に指定する。
【第８番目の引数】 （ padding ）
各ラベルの枠線と文字の間隔（ピクセル）の指定です。間隔を取らないときは、 "0" と明示します。
[例１] '3px 5px' …… 全層で上下を3ピクセル、左右を5ピクセル分間隔を取る。
[例２] ['10px','3px 5px'] …… 第一層目は上下左右に10ピクセル、第二層目以下は上下に3ピクセル・左右に5ピクセル分間隔を取る。
【第９番目の引数】 （ margin ）
各ラベルの枠線同士の間隔（ピクセル）の指定です。間隔を取らないときは、 "0" と明示します。
[例１] '3px 5px' …… 全層で上下を3ピクセル、左右を5ピクセル分間隔を取る。
[例２] ['10px','3px 5px'] …… 第一層目は上下左右に10ピクセル、第二層目以下は上下に3ピクセル・左右に5ピクセル分間隔を取る。
くどいですが、もう一度【注】
第Ｎ番目（Ｎ≧３）以降の引数を設定するときは、引数の順番を確保するために、（Ｎ−１）番目までの引数の値も何らかの形（"0" なり "''" なりで）で指定してください。
■最後に、このページで使われているデータ項目のサンプルを使って、サイトマップの表示例を示します。
[例１]
document.write(fo_get_sitemap(areadata,true,false,['■ ','・ '],'1px',['Gainsboro Silver Silver Gainsboro',null,'Silver Gainsboro Gainsboro Silver'],['White','#EEEEEE','#DDDDDD'],['10px 20px','5px','2px 5px'],['5px 0px','2px 0px']));
この場合、以下のような表示になります。
[例２]
document.write(fo_get_sitemap(areadata,true,false,['◆','●','★'],['1px','2px'],['Orange','Aqua Teal Teal Aqua','Red'],['Yellow','Skyblue','Pink'],['10px','3px'],['10px','3px']));
この場合、以下のような表示になります。
[例３]
document.write(fo_get_sitemap(areadata,true,true,'',0,'','',0,['0px 20px']));
この場合、以下のような表示になります。
- string fo_get_bread_crumbs(array ary, string id [, string div])
-
引数のデータ項目の配列 ary と、識別名 id を得て、第1層目から当該識別名の所属する層までのパンくずリストを書き出す HTML を返す。
階層間の区切り文字 div は、特殊文字の場合は文字参照または実体参照を使用する。省略時は '>' ( > )。ただし前後に半角スペースをとる。
- array fo_bread_crumbs(array ary, string id)
-
引数のデータ項目の配列 ary と、識別名 id を得て、第1層目から当該識別名の所属する層までのパンくずリストとなるべき要素の集合を配列で返す。
戻り値を a とすると、 a[i][1] にはパンくずリストの第 i 層目のラベルが、 a[i][2] には同 URL が入る。第 0 層目は、参照不可。
上の fo_get_bread_crumbs() は、定型的な HTML しか返さないので、他の HTML となじませるためにはこちらをお使いください。
- string fo_get_list(array ary [, string div])
-
引数のデータ項目の配列 ary を得て、その全データ項目へのリンクの一覧表を書き出す HTML を返す。出現は前順走査で得た順による。
項目間の区切り文字 div は、特殊文字の場合は文字参照または実体参照を使用する。省略時は '/' ( 半角スラッシュ ) 。ただし前後に半角スペースをとる。改行させるときは '<br \/>' 。
fo_get_sitemap() と違い、樹形図を描かないので、引数にするデータ項目の配列は、末端のコンテナ単位に小分けした方がわかりやすい。
- array fo_list_ary(array ary)
-
引数のデータ項目の配列 ary を得て、その全データ項目へのリンクの集合を配列で返す。
戻り値を a とすると、 a[i][1] には第 i 番目の項目のラベルが、 a[i][2] には同 URL が入る。
上の fo_get_list() は、定型的な HTML しか返さないので、他の HTML となじませるためにはこちらをお使いください。
- int fo_get_xposition(int width, int proportion)
-
ウインドウ幅から width を引いた残りを proportion の百分率で内分した数値を返す。一般に width ピクセルの幅のコンテンツをウインドウの任意の位置に置くときの、右方向の座標を求めるときに使う。
たとえば、fo_get_xposition(700, 50) は、幅700ピクセルのコンテンツを中央寄せにする場合の、style の left 属性に代入すべき値を返す。
- void fo_adjust_pos(object obj, int proportion)
-
ウインドウのリサイズイベント時に、階層メニュー obj およびその POSITION_ID に登録した全要素の右方向の座標を、ウインドウ幅の増加分に対する百分率 proportion の分だけ増加させるプロシージャ。
- void fo_hideMenu(string objname)
-
objname という名前の階層メニューの全コンテナを不可視にさせるプロシージャ。同一ページに階層メニューが複数あって、同時に不可視にしたいときは、手続きを並べる。
( 例 ) onmouseover = "fo_hideMenu('menu1');fo_hideMenu('menu2');"
- int fo_getWidth(void)
-
ウインドウ幅の値 ( ピクセル ) を返す。
( 注 ) 階層メニューが存在するときは、メニュー名.WIDTH が同じ値を返すので、この関数は非推奨。
- int fo_getLay(array ary)
-
データ項目配列 ary の層数を返す。
( 注 ) 階層メニューが存在するときは、メニュー名.LAY が同じ値を返すので、この関数は非推奨。
|
|
|
用語集
( F ) ： FOLIOLE で使う解釈
- リテラル
- 変数の対義語で、文中の即値のこと。整数値リテラル、文字列リテラル、関数リテラルなど。
- 外部JavaScript
- 別ファイルとして定義された JavaScript。拡張子は通常 .js 。
- 連想配列
- 添字のかわりに文字列などで指定し、要素の出現順位を放棄した配列。
- パンくずリスト
- トップページからそのページに至るまでの階層ごとのノードリスト。
- 階層 ( F )
- 組織を樹形図で区分するときの縦方向のレベルのこと。
- セル ( F )
- コンテナの要素でメニューの最小単位。ラベルとは１対１で対応。
- コンテナ ( F )
- ひとつ以上のセルからなるテーブル。現れたり消えたりする最小単位。
- 識別名 ( F )
- ひとつのデータ項目の最初の要素。同じコンテナ内では重複不可。
- ラベル ( F )
- ひとつのデータ項目の2番目の要素。セルの表面に貼る名札。
- ＵＲＬ ( F )
- ひとつのデータ項目の3番目の要素。セルをクリック時のジャンプ先。
- 沈黙セル ( F )
- マウスにまったく反応せず、ラベルとしての働きのみのセル。
- 紹介セル ( F )
- 子セルがあれば出すが、自分自身へのリンクは持たないセル。このサイトで使われている紹介セルとしては、第1層目の CONTACT があります。
- 不透明度 ( F )
- セルの不透明性の尺度。1で ( ほぼ ) 完全透明。100で完全不透明。
|
|
|
|
|
