日常的戯言也。

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

スポンサーサイト

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

プラグインエリア表示への道 その3

昨日までで1つのhtmlファイル内でのJavaScript動作とプラグインの動作の確認が出来た。というワケで、この2つを合体させて完成させられるワケ。早速足してプラグインのhtmlに挿入してみると....IEでは思った通りの動きになっているがFirefoxでは下位のカテゴリーが改行されずに表示されている。</br>入れてるんだけどなぁ....1つのhtmlファイルとしてはちゃんと動いたはずなのだが、cssの何かとぶつかってるんでしょうなぁ。css側をいじくるのも一つのやり方なのだが、どこかに不具合が出てくる可能性もあるし、今後ブログデザインを変えないとも限らない。ここはプラグイン側で対処するのが正解でしょう。
というわけで、下位のカテゴリーは<dd>タグで囲い、左にインデントさせるクラスを作って指定するというテキトーな対処をしてみた。ま、<dl>使ってるんだから<dd>使うのがアタリマエなのかも知れないし、もっと上手いやり方があるのかも知れないがソレはソレ(^^;
あと、JavaScriptを有効にしていないと表示されないのは問題、というワケで一応<noscript>で標準のカテゴリ表示も加えておきますか。うむ、JavaScript無効の方にとってはクダらん能書きが半月以上続いたワケだ(^^;

まいっか、最終的なソースはこんなカンジになります。

<style>
ul.tree_cate{
    list-style-type : none;
    list-style-position : outside;
}
dd.tree_cate{
    text-indent :-3em;
}
ul.tree_cate a{
    text-decoration : none;
}
</style>

<script language="JavaScript" type="text/javascript">
<!--
    var o = new Array(); //オリジナルのカテゴリー情報
    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 動作不能(サブカテゴリが無い場合)の文字
    //=================================================================
//簡易テキスト表示の場合
//    var open_char = "(-)";
//    var close_char = "(+)";
//    var hold_char = "(*)";
//画像表示の場合、<img>タグを指定
    var open_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/minus.gif" border="0">';
    var close_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/plus.gif" border="0">';
    var hold_char = '<img src="http://blog-imgs-27.fc2.com/b/o/s/boseskinhead/hold.gif" border="0">';

    //=================================================================
    //ツリーに使うテキスト
    //tree_cnt ツリーが続く場合のテキスト"├ "など
    //tree_end ツリーが終わる場合のテキスト"└ "など
    //=================================================================
    var tree_cnt = "├ ";
    var tree_end = "└ ";

//以上が設定可能定数部分
//以下いじらなくていいはず
    var _open , _close , i , j;
    if(open_char.match( /<img/ ) != null){
        //開いている時の画像以下の文字取得
        for(i=0 ; i < open_char.length-1 ; i++){
            j=open_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = open_char.indexOf("¥"",i) + 1;
        _open = open_char.substring( i, open_char.length - 1);
        j = _open.indexOf("¥"",0);
        _open = _open.substring( 0, j);

        //閉じている時の画像以下の文字取得
        for(i=0 ; i < close_char.length-1 ; i++){
            j=close_char.indexOf("/",i);
            //iが最後の"/"を指している
            if(j == -1){
                break;
            }else{
                i=j;
            }
        }
        if(i == 0) i = close_char.indexOf("¥"",i) + 1;
        _close = close_char.substring( i, close_char.length - 1);
        j = _close.indexOf("¥"",0);
        _close = _close.substring( 0, j);
    }else{
        _open = open_char;
        _close = close_char;
    }

//カテゴリー設定の配列化
function Category(name, t_category, disp_flag , txt, sort_method, number) {
    this.name = name;
    this.top_category = t_category;
    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 get_o_cate( url, name, number ) {
    this.url = url;
    this.name = name;
    this.number = number;
}

//カテゴリー情報の追加
function add_cate() {
    for(var i=0;i < p.length;i++){
        for(var j=0;j < o.length;j++){
            if(p[i].name == o[j].name){
                p[i].enumber = o[j].number;
                p[i].url=o[i].url;
                break;
            }
        }
    }
}

//ツリー風表示 開閉付き
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 == ""){
                document.write("<li> ",hold_char," <a href=¥"",p[i].url,"¥" title=¥""
                    ,p[i].text,"¥">",p[i].name,"</a></li>");

        //上位カテゴリーが存在するカテゴリーの場合
        }else{
            //上位カテゴリーの表示//////////////////////////////////
            //一番最初か、前のカテゴリーとは異なる上位カテゴリーの場合
            if(i==0 || p[i].top_category != p[i-1].top_category){
                //上位カテゴリー表示本体
                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>");

                //ここから上位カテゴリーが変わるので、下位カテゴリーのidを変える
                document.write("<dl><div id=¥"cat_menu",top_c_num,"¥">");

                //下位カテゴリは表示されている状態、初期表示状態にする
                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("<dd class=¥"tree_cate¥">",l1,"<a href=¥"",p[i].url,
                    "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>");
            //最後のカテゴリーの場合~終わり
            }else{
                document.write("<dd class=¥"tree_cate¥">",l2,"<a href=¥"",p[i].url,
                    "¥" title=¥"",p[i].text,"¥">",p[i].name,"</a></dd>");
                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";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_close,_open);
    } else {
        catediv.style.display = "none";
        topcatdiv.innerHTML=topcatdiv.innerHTML.replace(_open,_close);
    }
}

<!--category-->
    o.push( new get_o_cate("<%category_link>" , "<%category_name>" , "<%category_count>"));
<!--/category-->

add_cate();
S_top_category(tree_cnt,tree_end);

//-->
</script>
<noscript>
<ul>
<!--category-->
<li &align><a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a></li>
<!--/category-->
</ul>
</noscript>


現在右側に表示されているのがコレであります。ふむ、まぁいいんでないかな。ひとまずプラグインエリアへの表示はこれで完成かな....と思いきや、また下らんコトが頭を過る....
ってなワケで、まだ続く(^^;

テーマ:ブログのカスタマイズbyド素人 - ジャンル:コンピュータ

  1. 2006/04/21(金) 12:22:27|
  2. 一覧性創生時
  3. | トラックバック:0
  4. | コメント:0
<<リベンジ | ホーム | プラグインエリア表示への道 その2>>

コメント

コメントの投稿


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

トラックバック

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

かうんたぁ(06.4.28~)


カレンダー

04| 2017/05 | 06
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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。