TreeMenu 折畳メニュ表示

TreeMenu 折畳メニュ表示ファイル作成準備

TreeMenu 折畳メニュ表示ファイル作成準備していきます。
ここまで Pear::HTML_TreeMenu の基本的使い方を説明してきました。
ここからは、メニュの階層構造を設定するための HTML_TreeNode コンストラクタで利用可能なパラメ－タのなかの cssClass について説明します。
cssClass を利用するとタイトルに CSS を適用することができます。
また、その他の改善内容についても説明します。

最上位層のツリ－情報に CSS を適用

例として、最上位層のツリ－情報に CSS を適用してみます。
HTML_TreeNode コンストラクタで HTML_TreeNode の基本情報に連想配列の形式で CSS 情報を追加します。
TreeMenu 折畳メニュ表示基本ファイルではこの最上層の配列名は $data_0[0] でした。
$data_0[0] =array(
'text' => 'Styles',
'icon' => 'folder.gif',
'expandedIcon' => 'folder-expanded.gif',
//展開した時のアイコン
'expanded' => 'true'
//起動時にこのフォルダは展開する
);
と既に TreeMenu 折畳メニュ表示基本ファイルでは設定されています。
ここに、
'cssClass' => 'tmenu0text'
を追加します。
そうすると、タイトル名 Styles に tmenu0text CSS クラスで設定された CSS が適用されます。
待ってくださいこの CSS クラスはどこに書いておけばよいのでしょうか。

TreeMenu 折畳メニュ表示用 CSS ファイル作成

CSS ファイルは普通に書きます。
クラス名は tmenu0text としましたので

@charset "utf-8";
/* CSS Document */
.tmenu0text {
font-size: 12pt;
font-weight: bold;
}
フォントサイズは 12pt で太字として見ました。
CSS ファイル名は TreeMenu-1.css としておきましょう。
そしてこの CSS は TreeMenu.js 同様最初に PHP ファイルに読込みます。
<link async rel = "stylesheet" href = "css/TreeMenu-1.css">
async は付けておきましょう。
なお、当然複数のクラス設定も可能です。

メニュ左側の縦点線切れ修正

Chrome で見ると TreeMenu 折畳メニュ左側の縦点線が切れていますね、これを修正します。
実は、 TreeMenu 折畳メニュ表示の準備
の項でダウンロ－ドした images フォルダの中のイメ－ジファイルの高さは 20px しかなくフォントが大きくなると高さ不足になり切れてしまうのです。
高さ不足のイメ－ジファイルは
branch.gif
line.gif
minus.gif
minustop.gif
plus.gif
の５個です。
高さを　24px にしたものを用意しましたので、これを使用してみてください。
TreeMenu 修正 IMG ファイルダウンロ－ド
をクリックし、一旦保存し必ず解凍してから、これらの５個のイメ－ジファイルを images フォルダにあるものと入換えてください。

JavaScript ファイルにリンク

リンク先に JavaScript を設定してリンクしたい時がありますよね。
そんな時、例えば、最上層の下に表示される下位層の配列名を$data[0][1]とすると
$data[0][1] = array(
'icon' => 'folder.gif',
'text' => 'Google',
"link" => "javascript:ImageUp(1)",
//JavaScript Function 名
のように設定すれば ImageUp(1) という JavaScript Function に飛んでくれます。
通常は、リンク時、現在のウィンドウの新しいタブで開くようになっているのが普通です。
それでは、これを強制的に別ウィンドウを立上げて開くような JavaScript Function を作成して、ここに飛ばしてみることにします。

リンク時、強制別ウィンドウ立上 JavaScript Function 作成

それでは、リンク時、強制的に別ブラウザが立上がる(ポップアップ表示) JavaScript Function を作成してみます。
ファイル内容は、
63Pear Village に戻り
左サイドナビ｢TreeMenu 折畳メニュ表示｣の中の
TreeMenu 折畳メニュ表示 JavaScript ファイル
から見てください。
ファイル tree_m.js 自体は単純です。
配列 myArray を作成しここにリンク先を設定します。
myArray = new Array()
myArray[1] = 'https://www.google.co.jp/';
myArray[2] = "http://godollar.fever.jp/index.html";
･･･････
function ImageUp(inx) {
window.open(myArray[inx],"",",");
}
ちなみに、JavaScript で、
window.open(
"リンク先のHTMLファイル",
"google",
"width=ウィンドウの幅, height=ウィンドウの高さ"
);
と書くと、ウィンドウがもう一つ開いてリンク先のHTMLファイル google が開きます。
今回は、リンク先のHTMLファイルのみが指定され、後はヌル指定となっています。
そしてこの JS は TreeMenu.js 同様最初に PHP ファイルに読込みます。
<script async src="js/tree_m.js" type="text/javascript"></script>
async は付けておきましょう。

特定の位置の表示を切換える

たとえはナビの隣に DEV を用意してこの中の表示をメニュをクリックすることにより表示内容を切換えたいと思います。
<div id="main">
<iframe class="keya" src="tree_m_top.html" name="answer" frameborder="0" scrolling ="no">
</iframe>
</div>
とし、メニュから切換える表示画面を設定します。
以下の CSS も用意します。
#main{
width:300px;
background-color:gold;
float:left;
}
.keya{
width:300px;
height:600px;
float:left;
}
.clearfix:after{
content:"";
display:block;
clear:both;
}
そして、メニュの階層を作成します。
特定の位置の表示を切換える階層の配列名を $data_0[1] とすると

$data[0][1] = array(
'icon' => 'folder.gif',
'text' => 'Google',
"link" => "http://www.google.co.jp/",
//リンク先
"linkTarget" => "anser");
のように設定します。
これで、特定の位置の表示を切換えるメニュのでき上がりです。
ここまでで TreeMenu 折畳メニュ表示ファイル作成準備は完了です。
引き続き TreeMenu 折畳メニュ表示ファイルを作成していきます。
長くなりましたのでここで一旦切りたいと思います。

TreeMenu 折畳メニュ表示ファイル作成　に続く
TreeMenu 折畳メニュ表示基本ファイルの確認　に戻る