日常的戯言也。

08.6より地元食い物屋情報に特化します(^^;

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

ツリー表示への道の寄り道 その1

とっととブログの環境変数をいじって完成させればいいものを、すぐ寄り道したくなる悪い癖が出た。折角だから折りたためるようにしましょう。イランとか言ってた癖にねぇ(^^;

さて、折りたたませるためには

1)開閉したい部分には固有のidを付けておく。
2)上位カテゴリの上にマークを付け、クリックされるとメニューを開閉するJavaScriptを呼び出す。
3)呼び出されたJavaScriptは開閉したい部分を示すidを受け取り、表示状態を逆(開なら閉、閉なら開)にする。

この辺りの変更を加えるのが定石らしい。ってコトはS_top_category関数の中味をいじると共に、開閉ボタンがクリックされた時に呼び出される関数を作ってやればよろしい。

こんな感じでしょうか。

<html>
<!-- メニュー折りたたみのテスト -->
<!-- fc2の作法には従っていない -->
<!-- メニューでliタグ使っていない -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<LINK Type="text/css" Rel="stylesheet" Href="test.css">
<title>JavaScriptのTESTその2</title>

<script type="text/javascript">
    var p = new Array();

    //=================================================================
    //カテゴリーの動作設定
    //第一引数:カテゴリー名
    //第二引数:上位カテゴリー名
    //第三引数:説明
    //第四引数:ソート方法(省略時はN)
    // O:古い順、N:新しい順、C:エントリタイトルのコード順昇順、D:降順
    //第五引数:表示エントリ数 省略時は10
    //=================================================================
    p.push( new Category("正統派天幕生活" ,"活動記","正しいキャンプネタ","O",20));
    p.push( new Category("自力系顛末記" ,"活動記","くだらん自力系" ,"O",20));
    p.push( new Category("外道伝" ,"活動記","何かやりました(^^;","O",20));
    p.push( new Category("野外系品評会" ,"道具箱","無駄遣い?"));
    p.push( new Category("贋自転車愛好者" ,"道具箱","自転車系"));
    p.push( new Category("興味本位珍評" ,"道具箱","いろいろ"));
    p.push( new Category("テスト" ,"","","C",20));
    p.push( new Category("JR通勤型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR近郊型" ,"鐵道愛好","","C",20));
    p.push( new Category("JR特急型" ,"鐵道愛好","含急行型","C",20));
    p.push( new Category("私鉄等車輌" ,"鐵道愛好","","C"));
    p.push( new Category("鐵道" ,"寫眞展","ヘタクソ",""));
    p.push( new Category("日常" ,"寫眞展","ナニ撮ってるの?"));
    p.push( new Category("道具愛好癖" ,"戯言","隣に物欲大魔王(^^;","",5));
    p.push( new Category("鐵道趣味独白" ,"戯言","隣に物欲大魔王(^^;","",5));
    p.push( new Category("電脳日記改造" ,"戯言","カスタマイズ?","",5));
    p.push( new Category("一覧性創生時" ,"戯言","カスタマイズ?","",5));
    p.push( new Category("日常的出来事" ,"戯言","","",5));

//カテゴリー設定の配列化
function Category(name, t_category, txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    if(txt == "" || txt == null){
        this.text = name;
    }else{
        this.text = txt;
    }
    if(sort_method == "" || sort_method == null){
        this.s_m = "N";
    }else{
        this.s_m = sort_method.toUpperCase();
    }
    //初期値=10
    if(number == null){
        this.number = 10;
    }else{
        this.number = number;
    }
}


//ツリー風表示開閉付き
function S_top_category(l1,l2) {
    var top_c_num = 0; //上位カテゴリ数/番号

    document.write("<ul>");
    for(var i = 0; i < p.length ; i++) {
        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
            //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
            if(i != 0 && p[i-1].top_category != p[i-1].name){
                document.write("</div></dl>");
            }
            document.write("<p>",p[i].name,"</p>");
        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //最初でなく、前に下位カテゴリーがあった場合は<div>を閉じる
                if(i != 0 && p[i-1].top_category != p[i-1].name){
                 document.write("</div></dl>");
                }

                //上位カテゴリー表示本体
                document.write("<div>" ,
                 "<a href=javascript:cat_menuClick(\"cat_menu",top_c_num,"\")>(+)</a>",
                 p[i].top_category,"</div>");
                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<div id=\"cat_menu",top_c_num,"\"><dl>");
                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////
            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,p[i].name,"<br>");
            }else{
                document.write(l2,p[i].name,"<br>");
            }
        }
    }
    //上位カテゴリーがあった場合はidを閉じる
    if(p[i-1].top_category != "") document.write("</div></dl>");
    document.write("</ul>");
}


//表示切替
function cat_menuClick(cate_id) {
var catediv = document.getElementById(cate_id);
    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
    } else {
        catediv.style.display = "none";
    }
}



</SCRIPT>
</head>

<body lang=JA link=blue vlink=purple>

<script type="text/javascript">
S_top_category("├ ","└ ");
</script>

</body>
</html>

"test2.html"なんて名前で昨日のファイルが保存されているフォルダに保存して開いてみると....おお、ちゃんと開閉されますな。ここまで来ましたか(^^;
ちなみに、上位カテゴリーを持たないカテゴリーの動作確認用に「テスト」なんてのを加えてます。これは開閉させる必要は無いのでidをつける必要はナシ。本来の動作は上位カテゴリー名なら表示のみ、下位カテゴリーを持たないカテゴリーだったらurlを持たせるようにすればいいワケですな。

もう少し遊びたくなっちゃいました(^^;
  1. 2006/04/13(木) 18:06:52|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0
<<ツリー表示への道の寄り道 その2 | ホーム | ツリー表示への道 その2>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://boseskinhead.blog2.fc2.com/tb.php/267-324c93d8
この記事にトラックバックする(FC2ブログユーザー)

かうんたぁ(06.4.28~)


カレンダー

05| 2017/06 | 07
Sun Mon Tue Wed Thu Fri Sat
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -

プロフィール

ぼうず

私的カテゴリー

最新の記事

私的コメントリスト

私的トラックバック

私的月別アーカイブ

私的リンク

=> 詳しくはコチラ をドーゾ。

タグリスト

Nゲージ 野営 GMキット 鉄道 レイアウト 急行 幕営 電機 列車 時刻表 エアガン キャンプ 外道 特急 Nゲージ バックパック 鉄道模型 小湊 JavaScript  東海道本線 ビュッフェ 東海 

ブログ内検索

RSSフィード

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。