CSS+jQueryで、ファイル一覧を作る

　階層構造がわかりやすいファイル一覧をHTML+CSS+jQueryで作ります。最終的には、こんな感じにできる予定。ここで使用したアイコンは、

HoHoHo! : Design : Brand Spanking New

こちらから頂きました。ありがとうございます。

【要件】

ファイル一覧をわかりやすく表示したい
アイコンは、拡張子ごとに分けてみたい
親子関係を表す線を表示したい

【方針】

　親子関係を表す線は、CSSのbackground-colorと、imgタグを組み合わせて作ります。

　あと、nth-childの擬似セレクタとかを使えば、CSSオンリーでも作れそうですが、一応、IEでも見れるように、jQueryでそこらへんを選択することにします。

【準備】

線とアイコンの画像を準備します。基本、横は、10px、縦は、20pxに統一したんですが、いかんせん、適当な性格なもので、あとからCSSで調整すればいいかって感じになっちゃっています。

「base_line.png」

親子関係を表す背景画像は、こんな感じ。repeat-yで、たてに敷き詰めます。黄緑色の部分は、透過しておきます。

「branch_line.png」

親子関係を表す画像その２。たて線は、CSSで描画するので、よこ線だけです。黄緑は透過。

「branch_line-last.png」

親子関係を表す画像その３。ディレクトリ内で一番下の要素の先頭につけます。

ディレクトリアイコン

「folder.png」「folder2.png」

ディレクトリを表すアイコン。空ディレクトリを表示する用と中身がはいっている時用で2種類用意しました。

拡張子別アイコン

あとは、拡張子別に出し分けるアイコンも用意。今回は、画像とテキストファイル用に2種類用意しました。

【HTML】

<div class=" dir_container" style="float:left;">
<ul>
<li class="dir">webroot
    <ul>
        <li class="dir">img
            <ul>
                <li class="file">base_line.png</li>
                <li class="file">branch_line.png</li>
                <li class="file">branch_line-last.png</li>
                <li class="file">folder.png</li>
                <li class="file">folder2.png</li>
                <li class="file">image.png</li>
                <li class="file">script.png</li>
            </ul>
        </li>
        <li class="file">dir_view.html</li>
     </ul>
</li>
</ul>
</div>

　HTMLは、こんな感じに用意しました。ファイルは、クラスに「file」を指定。ディレクトリには、「dir」を指定しました。あとは、ulタグとliタグの組み合わせです。

【CSS】

.dir_container
{
    border:1px solid #eee;
    padding:10px;
}
.dir_container li,
.dir_container ul
{
    margin:0;
    padding:0;
}
.dir_container li{
    list-style-type: none;
    line-height:20px;
    font-size:16px;
    letter-spacing:1px;
}

.dir_container li.dir,
.dir_container li.file
{
    /* 親子関係を表すたて線画像 */
    background-image:url("./img/base_line.png");
    background-repeat:repeat-y;
}

.dir_container li.dir ul
{
    padding-left:12px;
}

.dir_container img.icon,
.dir_container img.line
{
    vertical-align:top;
    margin:0;
    padding:0;
}
.dir_container img.icon
{
    margin-right:3px;
}

　CSS部分はこんな感じになりました。ポイントは、特にないですね。特殊な指定はしていないかと思います。

【JavaScript】

$(function(){
    // イメージタグをあらわす文字列
    // この二つは、親子関係を表す線のよこ線。
    var bl   = '<img class="line" src="./img/branch_line.png">';
    var bll  = '<img class="line" src="./img/branch_line-last.png">';

    // アイコンたち
    // folderは、空ディレクトリ用の画像です。
    // folder2が中身があるディレクトリ用なんですが、
    // これは後ほど中身があるか判断してから差し替えます 
    var dir  = '<img class="icon" src="./img/folder.png">';
    var file = '<img class="icon" src="./img/script.png">';
    var img  = '<img class="icon" src="./img/image.png">';
    var RegImg = /.*\.(png|jpg|jpeg|jpe|bmp|gif).*$/;

    // アイコン・ラインの要素をディレクトリに追加する。
    $('.dir_container li.dir')
        .not(':last-child').prepend(bl+dir);
    $('.dir_container li.dir:last-child')
        .prepend(bll+file);

    // ファイルは、アイコンを拡張子によって変える
    $('.dir_container li.file').each(function(){    
        var line;
        if ($(this).eq(':last-child')) {
            line = bll;
        } else {
            line = bl;
        }
        if ($(this).html().match(RegImg)){
            $(this).prepend(line+img);
        } else {
            $(this).prepend(line+file);
        }
    });

    // 最後の要素は、背景がいらない
    $('.dir_container li.file:last-child')
        .css('background-image','none');
    $('.dir_container li.dir:last-child')
        .css('background-image','none');

    // 空ディレクトリじゃない場合は、下に線が
    // 伸びてる画像に差し替える。
    $('.dir_container li.dir ul').parent()
        .children('img.icon').attr('src', './img/folder2.png');
    
    // バッドノウハウ..なきがするけど。
    if (navigator.userAgent.match('/.*MSIE.*/')){
        $('.dir_container>ul>li.dir:first>ul')
            .css({'position':'relative','top': '-2px'});
    }
});

JavaScript部分は、こんな感じ。

IEでみると、最初のリスト要素だけ2pxだけ下マージンがあった。それが、気持ち悪かったので、IEだけちょこっとCSS変えてみました。

【ソース】

dir_view.zip

anybody's game

日々感じたこと、艦隊これくしょん、千年戦争アイギス、読書記録