日常的戯言也。

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

スポンサーサイト

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

ツリー表示への道 その2

折角総て作るつもりなので、一般的にやられているカテゴリーのツリー化ロジックをそのまま使う気はなく、カテゴリー名は自由につけた。その分JavaScript側で設定してやる必要があるワケです。ここら辺は汎用性の高いモノを作る気なんて全くないのでお気楽に行きましょう。や、画面表示と簡単な配列だけの知識でコーディングしようというのもお気楽過ぎなんだけど(^^;

まずは自前の配列を作ってそこにカテゴリー情報を格納して表示させるだけのJavaScriptを作ってみますか。配列の要素としては

・カテゴリー名
 これがサブカテゴリー相当となる
・上位カテゴリー名
 第一階層のカテゴリー名
・一言コメント
 そのうちツールチップでも出しますか(^^;
・エントリー表示方法フラグ
 まだ使わないけどこれがミソになる(ハズ)
・エントリー表示件数
 使うかどうか判らんけど(^^;

この位にしておきますか。必要ならあとで変えればいいし、結構いい加減。で、配列を作ってこれらの要素を持たせて表示させるJavaScriptを作ってやる。もうねぇ、ミヨウミマネ(^^;
htmlとして

<html>
<!-- カテゴリー配列を宣言してツリー表示させるテスト -->
<head>
<META Http-Equiv="Content-Style-Type" Content="text/css; charset=ECU">
<LINK Type="text/css" Rel="stylesheet" Href="test1.css">
<title>JavaScriptのTESTその1

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

    //=================================================================
    //カテゴリーの動作設定
    //第一引数:カテゴリー名
    //第二引数:上位カテゴリー名
    //第三引数:説明
    //第四引数:ソート方法(省略時は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("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() {
    var i;
    for(i = 0; i < p.length ; i++) {
        //上位カテゴリーが存在しない場合~上位カテゴリーの位置に下位カテゴリーを表示
        if(p[i].top_category == ""){
            document.write("<p>",p[i].name,"</p>");
        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                document.write("<p>",p[i].top_category,"<br>");
            }
            //最後のカテゴリーでなく、次も同じ上位カテゴリーの場合~続く
            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>");
            }
        }
    }
}

</SCRIPT>
</head>

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

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

</body>
</html>

cssとして

BODY{ /*BODY要素のスタイル指定*/
font-size : 10pt;
text-align : left;
line-height : 1em;
margin : 2em;
}

こんな感じでいいんではないかと。現段階でCSSまでは作る必要無いんだけど、そのうちテンプレートを作る事を考えて今のうちから作っている。
それぞれ"test1.html""test1.css"として保存して同じフォルダに入れてtest1.htmlを表示させると

活動記
├ 正統派天幕生活
├ 自力系顛末記
└ 外道伝

道具箱
├ 野外系品評会
├ 贋自転車愛好者
└ 興味本位珍評

鐵道愛好
├ JR通勤型
├ JR近郊型
├ JR特急型
└ 私鉄等車輌

寫眞展
├ 鐵道
└ 日常

戯言
├ 道具愛好癖
├ 鐵道趣味独白
├ 電脳日記改造
├ 一覧性創生時
└ 日常的出来事

にひひ、一応表示されてますな。配列の扱いはこれでいいらしい。ま、ヘタクソだとか冗長だとか実行速度が....なんてコトはこの際ナシ。動けばいいのよ、動けば(^^;

配列の要素を設定する部分をサブルーチン(関数)化しているのだが、ここで配列の要素の初期化を行なっている。配列の要素はプロパティーのように扱う事が出来るようで、文字でも数字でも配列に押し込めるところが楽。昔のC言語では構造体の定義をしなきゃいけなかったんだけどねぇ....って、トシがバレます(^^;
一つのカテゴリーに名前やら上位カテゴリーやらコメントやら幾つかの要素があり、カテゴリーは複数あるので二次元配列になってるワケですな。あまり意識せずに使ったが、このあたりもCと異なって扱いはかなり楽な気がする。
あ、「//」以下はコメントとして処理されるそうで、ソース内随所に説明を加えております。

本当はブログが持っているカテゴリー情報を取得してこれを加工するのが汎用性も高いんだろうけど、
・カテゴリー名に余計な"[活動]"だとか"モノ:"なんてのを付けたくない。
・カテゴリーの表示順をブログとメニューで独立させたい。
・カテゴリー毎に表示方法など独自情報を持たせたい。
などのワガママを満たすためには致し方ないところ。

色々と面倒なトコロもあるけど、いいじゃない、素人のお遊びなんだから(^^;
ここまでで下調べは完了。と思ったらいらんコト考えちゃいまして....また明日。
  1. 2006/04/12(水) 18:29:59|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0
<<ツリー表示への道の寄り道 その1 | ホーム | 寄り道>>

コメント

コメントの投稿


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

トラックバック

トラックバックURLはこちら
http://boseskinhead.blog2.fc2.com/tb.php/266-89a0f3dc
この記事にトラックバックする(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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。