TreeMenu 折畳メニュ表示

TreeMenu 折畳メニュ表示オブジェクト作成ファイル

それでは TreeMenu 折畳メニュ表示オブジェクト作成ファイル treemenu-0.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢TreeMenu 折畳メニュ表示｣の中の
TreeMenu 折畳メニュ表示オブジェクト作成 PHP ファイル
から見てください。
このファイルは、ここまでの説明、
TreeMenu 折畳メニュ表示基本ファイル作成
TreeMenu 折畳メニュ表示ファイル作成準備
を理解していれば復習しているようなファイルです。
特に説明はいらないと思います。
要するに、serialize 化されたテキストファイル text/tree_m_store.txt が必要なのです。

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

次ぎに、TreeMenu 折畳メニュ表示ファイル treemenu-1.php を作成します。
作成ファイル内容は、
63Pear Village に戻り
左サイドナビ｢TreeMenu 折畳メニュ表示｣の中の
TreeMenu 折畳メニュ表示 PHP ファイル
から見てください。
このファイルは、erialize 化されたテキストファイル text/tree_m_store.txt から オブジェクトを作り直しメニュを作成します。
<div id="main">
の中にある
<iframe class="keya" src="tree_m_top.html" name="answer" frameborder="0" scrolling ="no"> </iframe>
はメニュから表示を切り換える HTML ファイル表示場所です。
ここには、起動時はスタ－トの HTML ファイルを表示し、その後はメニュからクリックされた HTML ファイル内容を表示します。
ちなみに iframe の属性には

  1. src

    フレーム表示する文書のURL

  2. name

    フレーム名

  3. width

    フレームの横幅

  4. height

    フレームの高さ

を指定するのでしたね。
なお、iframe 要素において HTML5 では frameborder 及び scrolling 属性が廃止されたとの情報 がありますが、現状はまだ有効のようです。

TreeMenu 折畳メニュ表示ファイル動作のために必要なファイル

TreeMenu 折畳メニュ表示ファイル treemenu-1.php を動作させるには多くのファイルが必要です。

  1. pear/HTML/TreeMenu.php

    TreeMenu 折畳メニュ表示ファイル動作のための必須 PEAR ファイルです。
    PEAR をインスト－ルすれば所定の場所に入ります。

  2. treemenu-0.php

    TreeMenu 折畳メニュ表示オブジェクトを作成ファイルするために必要です。
    一度実行して text/tree_m_store.txt が作成されれば、後は実行の必要ありません。

  3. css/tree_m.css

    treemenu-1.php 用 CSS ファイルです。
    レシボンシブ WEB デザインに対応させています。
    ファイル内容は
    treemenu-1.php 用 CSS ファイル
    から見てください。

  4. css/TreeMenu-1.css

    TreeMenu 折畳メニュ表示用 CSS ファイルです。
    メニュのタイトル名に適用されます。
    ファイル内容は
    TreeMenu 折畳メニュ表示用 CSS ファイル
    から見てください。

  5. js/TreeMenu.js

    TreeMenu 折畳メニュ表示ファイルのための必須 JavaScript です。
    github.com/pear/HTML_TreeMenu
    からダウンロ－ドするのでした。

  6. js/tree_m.js

    リンク時、強制的に別ブラウザが立上がる(ポップアップ表示)させるための JavaScript です。
    ファイル内容は
    treemenu-1.php 用 JS ファイル
    から見てください。

  7. images/*.gif ×13 イメ－ジファイル

    images フォルダに置く 13個の gif イメ－ジが必要です。
    詳細は TreeMenu 折畳メニュ表示の準備
    から見てください。
    また、 TreeMenu 修正 IMG ファイルダウンロ－ド も必要でしたね。

  8. リンクファイル tree_m_top.html、tree_m_p-2.html

    メニュからリンクするファイルも必要です。
    ファイル内容は
    リンクトップ html ファイル
    リンク２ndペ－ジ html ファイル
    から見てください。
    どちらも単純な html ファイルです。
    特に説明はありません。

  9. 各 CSS / JS ファイルの設定

    各 CSS / JS ファイルは treemenu-1.php の最初で設定します。
    <link async rel="stylesheet" href="css/tree_m.css">
    <link async rel="stylesheet" href="css/TreeMenu-1.css">
    <script src="js/TreeMenu.js" type="text/javascript">
    </script>
    <script async src="js/tree_m.js" type="text/javascript">
    </script>
    TreeMenu.js は読込まれないと動作が全く進みません。
    よって、async は付けず、TreeMenu.js の読込みが終わったら treemenu-1.php の動作が開始されるようにします。


ここまでで TreeMenu 折畳メニュ表示ファイル作成は完了です。
引き続き TreeMenu 折畳メニュ表示ファイルの動作確認をしていきます。
長くなりましたのでここで一旦切りたいと思います。


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

63PearVillageに戻る