日常的戯言也。

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

スポンサーサイト

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

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

昨日、とりあえずツリー表示、開閉まで来た。ただクリックしても(+)のままだとカワイクない。よし、切り替えるようにして、どうせ可愛くするならテキストではなく画像も使えるようにしよう。更に昨日のバージョンだと最初は全カテゴリーが表示されてしまうのだが、設定してやれば初期状態で開閉をコントロール出来るようにしちまいますか。
うむ、それだけではツマランのでマウスポインタがメニュー上にある時にはツールチップのようにテキストが表示されるようにしますか。
開閉ボタンを表示しているのは昨日のソースの

document.write("<div>" ,
    "<a href=javascript:cat_menuClick(\"cat_menu",top_c_num,"\")>(+)</a>",
    p[i].top_category,"</div>");

この部分。ここで

<div><a href=javascript:cat_menuClick"cat_menu0">(+)</a>活動記</div>

なんてhtmlを作り出しているワケですな。前回はテキストとして"(+)"を使って直打ちしたのだが、何か変数にして、"(+)"か画像ファイル名を指定してやればいい。更に表示切替しているcat_menuClick関数のカテゴリー状態反転部分の中に表示テキスト(or画像)を切り替えるロジックを加えてやれば、クリックするたびに画像が変わるようになるはず。また、最初は表示させておき、もし初期状態非表示フラグが立っていたら表示反転のcat_menuClick関数を呼ぶようにしてやれば指定された初期表示状態にする事が出来る。
また、ツールチップは

<a title="表示したいチップ">画面に表示するテキスト</a>

で表示可能なので、適当な文字が表示されるようにすればよろしい。

さて、こんな改造を加えればOK....なのだが、このあたりでもうひとつ直しておく必要がありそう。
ここまでカテゴリー周りのタグは<p></p>にしたり、<ul><li>~</li>....<li><dl>~</dl></li></ul>タグ使ったり色々だったのだが、そろそろFC2の作法に従っておいた方がいいだろう。標準のカテゴリー表示プラグインでは

<ul>
    <li>カテゴリー</li>
    <li>カテゴリー</li>
    <li>カテゴリー</li>
</ul>

こんな感じになっている。今回、プラグインを公開するつもりも無いのだがこれに沿って

<ul>
    <li><div id="top_cat_menu0">上位カテゴリー</div></li>
        <dl><div id="cat_menu0">
            カテゴリー
            カテゴリー
            カテゴリー
            カテゴリー
        </div></dl>
    <li>カテゴリー(上位なし)</li>
    <li>上位カテゴリー</li>
        <dl><div id="cat_menu1">
            カテゴリー
            カテゴリー
        </div></dl>
</ul>

こんなカタチにしておく事が望ましいかと思う。ちなみにlivedoorなどでは標準状態では

<div class="sidebody">カテゴリー</div>
<div class="sidebody">カテゴリー</div>
<div class="sidebody">カテゴリー</div>

のような感じになっている様子。fc2でsidebodyクラスが使われているかどうか判らないが、怪しげなクラスは使わないのが吉だろう。
この辺りも加味するとこんなカンジになるかな。

<html>
<!-- ツリー表示を折りたたむテスト改造版 -->
<!-- 開閉ボタンの画像・テキスト両対応 -->
<!-- ツールチップも付けた -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<LINK Type="text/css" Rel="stylesheet" Href="test.css">
<title>JavaScriptのTESTその3

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

    //=================================================================
    //開閉ボタン関係
    // open_char 開状態の文字
    // close_char 閉状態の文字
    // hold_char 動作不能(サブカテゴリが無い場合)の文字
    // open_url 開状態の画像
    // close_url 閉状態の画像
    // hold_url 動作不能の画像
    //=================================================================
    var open_char = "(-)";
    var close_char = "(+)";
    var hold_char = "(*)";
    var open_url = "minus.gif";
    var close_url = "plus.gif";
    var hold_url = "hold.gif";
//画像が設定されていれば画像を、設定されていなければテキストを使う
// var open_url = "";
// var close_url = "";
// var hold_url = "";

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
//テキストが指定されなかった時にカテゴリー名をセットするなら以下のコメントを外す
//    if(txt == "" || txt == null){
//        this.text = "";
//    }else{
        this.text = txt;
//    }
    if(disp_flag == "s" || disp_flag == "S"){
        this.init_disp = "S";
    }else{
        this.init_disp = "H";
    }
    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 class=\"tree_cate\"");
    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>");
            }
            if(hold_url == "" || hold_url == null){
             document.write("<li> ",hold_char," <a title=\"",p[i].text,"\">",
             p[i].name,"</a></li>");
            }else{
             document.write("<li><img src=\"",hold_url,"\" border=0> ",p[i].name,"</li>");
            }
        //上位カテゴリーが存在するカテゴリーの場合
        }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>");
                }

                //上位カテゴリー表示本体
                //開閉画像が指定されていなければテキスト表示
                if(open_url == "" || close_url=="" || open_url==null || close_url==null){
                    document.write("<li><div id=\"top_cat_menu" , top_c_num ,"\">" ,
                        "<a href=javascript:cat_menuClick(", top_c_num,")>",open_char,"</a>",
                        p[i].top_category,"</div></li>");
                //開閉画像が指定されていれば画像表示
                }else{
                    document.write("<li><div id=\"top_cat_menu" , top_c_num ,"\">" ,
                        "<a href=javascript:cat_menuClick(", top_c_num,")>",
                        "<img src=\"",open_url,"\" border=0></a>"," ",
                        p[i].top_category,"</div></li>");
                }
                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<div id=\"cat_menu",top_c_num,"\"><dl>");
                //下位カテゴリは表示されている状態、初期表示状態にする
                if(p[i].init_disp == "H"){
                    cat_menuClick(top_c_num);
                }
                ++top_c_num;
            }
            //以上、上位カテゴリーの表示////////////////////////////
            //下位カテゴリーの表示//////////////////////////////////
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            if(i+1 != p.length && p[i].top_category == p[i+1].top_category){
                document.write(l1,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }else{
                document.write(l2,"<a title=\"",p[i].text,"\">",p[i].name,"</a><br>");
            }
        }
    }
    //上位カテゴリーがあった場合はidを閉じる
    if(p[i-1].top_category != "") document.write("</div></dl>");
    document.write("</ul>");
}

//表示切替~上位カテゴリ表示切替付き
function cat_menuClick(cate_id) {
    var catediv = document.getElementById("cat_menu"+cate_id);
    var topcatdiv = document.getElementById("top_cat_menu"+cate_id);

    if( catediv != null && catediv.style.display == "none" ) {
        catediv.style.display = "block";
            //開閉状態は文字
            if(open_url == "" && close_url==""){
                topcatdiv.innerHTML=topcatdiv.innerHTML.replace(close_char,open_char);
            //画像
            }else{
                topcatdiv.innerHTML=topcatdiv.innerHTML.replace(close_url,open_url);
            }
    } else {
        catediv.style.display = "none";
        //開閉状態は文字
        if(open_url == "" && close_url==""){
            topcatdiv.innerHTML=topcatdiv.innerHTML.replace(open_char,close_char);
        //画像
        }else{
            topcatdiv.innerHTML=topcatdiv.innerHTML.replace(open_url,close_url);
        }
    }
}

</SCRIPT>
</head>

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

<style>
ul.tree_cate{
    list-style-type : none;
}
ul.tree_cate a:link{
    text-decoration : none;
}
</style>

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

</body>
</html>


htmlファイルを保存したフォルダにminus.gifだのplus.gifだのhold.gifなんてのを勝手に作って入れてやればその画像がアタマに表示され、minus.gifとplus.gifはトグルで表示が切り替わるハズ....これでひとまずは動くのだがまだまだ美しくない(^^;


先日からソースを載せているが、とにかく面倒なのであります。あ、この辺はネタになりそうだから後日書くとして、そのままコピペしても動かんかも知れないです。悪しからず。

って、わざわざ試してみる程のモンでもないし、そんなモノズキなヒトもいないでしょうけど(^^;
  1. 2006/04/14(金) 12:32:13|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0
<<残念っ! | ホーム | ツリー表示への道の寄り道 その1>>

コメント

コメントの投稿


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

トラックバック

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

かうんたぁ(06.4.28~)


カレンダー

09| 2017/10 | 11
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 31 - - - -

プロフィール

ぼうず

私的カテゴリー

最新の記事

私的コメントリスト

私的トラックバック

私的月別アーカイブ

私的リンク

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

タグリスト

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

ブログ内検索

RSSフィード

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