TreeView応用編のページ

ホーム

実験

TreeView(YUI:Yahoo! User Interface Library)に付属しているスタイルを全て表示してみました。

解説

1つのページ内にいろいろな外観のTreeViewを同時に表示するためには個々のTreeに対し、 CSSにてClass(または、ID)によるスタイル設定を行います。
具体的にはyui/examples/treeview/css/multi/tree.cssを以下のように改造して使います。

/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */

/* Defaults */
.ygtvtn { width:16px; height:22px; background: url(../../img/default/tn.gif) 0 0 no-repeat; }
.ygtvtm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tm.gif) 0 0 no-repeat; }
.ygtvtmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tmh.gif) 0 0 no-repeat; }
.ygtvtp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tp.gif) 0 0 no-repeat; }
.ygtvtph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/tph.gif) 0 0 no-repeat; }
.ygtvln { width:16px; height:22px; background: url(../../img/default/ln.gif) 0 0 no-repeat; }
.ygtvlm { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lm.gif) 0 0 no-repeat; }
.ygtvlmh { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lmh.gif) 0 0 no-repeat; }
.ygtvlp { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lp.gif) 0 0 no-repeat; }
.ygtvlph { width:16px; height:22px; cursor:pointer ; background: url(../../img/default/lph.gif) 0 0 no-repeat; }
.ygtvloading { width:16px; height:22px; background: url(../../img/default/loading.gif) 0 0 no-repeat; }
.ygtvdepthcell { width:16px; height:22px; background: url(../../img/default/vline.gif) 0 0 no-repeat; }
.ygtvblankdepthcell { width:16px; height:22px; }
.ygtvitem { }
.ygtvchildren { }
* html .ygtvchildren { height:2%; }
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
/* background-color: white; */
}
.ygtvspacer { height: 10px; width: 10px; margin: 2px; }

/* via css class selector */
/* class No.1 check style view */
.check .ygtvspacer { height: 10px; width: 18px; }
.check .ygtvcheck0 { background: url(../../img/check/check0.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.check .ygtvcheck1 { background: url(../../img/check/check1.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }
.check .ygtvcheck2 { background: url(../../img/check/check2.gif) 0 0 no-repeat; width:16px; height:22px; cursor:pointer }

/* class No.2 default style view */
.default .ygtvtn { width:16px; height:22px; background: url(../../img/default/tn.gif) 0 0 no-repeat; }
.default .ygtvtm { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tm.gif) 0 0 no-repeat; }
.default .ygtvtmh { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tmh.gif) 0 0 no-repeat; }
.default .ygtvtp { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tp.gif) 0 0 no-repeat; }
.default .ygtvtph { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tph.gif) 0 0 no-repeat; }
.default .ygtvln { width:16px; height:22px; background: url(../../img/default/ln.gif) 0 0 no-repeat; }
.default .ygtvlm { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lm.gif) 0 0 no-repeat; }
.default .ygtvlmh { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lmh.gif) 0 0 no-repeat; }
.default .ygtvlp { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lp.gif) 0 0 no-repeat; }
.default .ygtvlph { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lph.gif) 0 0 no-repeat; }
.default .ygtvloading { width:16px; height:22px; background: url(../../img/default/loading.gif) 0 0 no-repeat; }
.default .ygtvdepthcell { width:16px; height:22px; background: url(../../img/default/vline.gif) 0 0 no-repeat; }
.default .ygtvblankdepthcell { width:16px; height:22px; }
.default .ygtvitem { }
.default .ygtvchildren { }
* html .ygtvchildren { height:2%; }
.default .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
.default .ygtvspacer { height: 10px; width: 10px; margin: 2px; }

/* class No.3 folders style view */
.folders .ygtvtn { background: url(../../img/folders/tn.gif) 0 0 no-repeat; width:17px; height:22px; }
.folders .ygtvtm { background: url(../../img/folders/tm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvtmh { background: url(../../img/folders/tmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvtp { background: url(../../img/folders/tp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvtph { background: url(../../img/folders/tph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvln { background: url(../../img/folders/ln.gif) 0 0 no-repeat; width:17px; height:22px; }
.folders .ygtvlm { background: url(../../img/folders/lm.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvlmh { background: url(../../img/folders/lmh.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvlp { background: url(../../img/folders/lp.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvlph { background: url(../../img/folders/lph.gif) 0 0 no-repeat; width:34px; height:22px; cursor:pointer }
.folders .ygtvloading { background: url(../../img/folders/loading.gif) 0 0 no-repeat; width:16px; height:22px; }
.folders .ygtvdepthcell { background: url(../../img/folders/vline.gif) 0 0 no-repeat; width:17px; height:22px; }
.folders .ygtvblankdepthcell { width:17px; height:22px; }
.folders .ygtvitem { height:1%; } /* ここに何か設定しないと破線が途切れる */
.folders .ygtvchildren { height:1%; } /* ここに設定した色はTreeViewの背景色になる background-color: #ffffff; */
* html .ygtvchildren { height:1%; }
.folders .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}

/* class No.4 local style view */
.local .ygtvtn { width:16px; height:22px; background: url(../../img/default/tn.gif) 0 0 no-repeat; }
.local .ygtvtm { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tm.gif) 0 0 no-repeat; }
.local .ygtvtmh { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tmh.gif) 0 0 no-repeat; }
.local .ygtvtp { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tp.gif) 0 0 no-repeat; }
.local .ygtvtph { width:16px; height:22px; cursor:pointer; background: url(../../img/default/tph.gif) 0 0 no-repeat; }
.local .ygtvln { width:16px; height:22px; background: url(../../img/default/ln.gif) 0 0 no-repeat; }
.local .ygtvlm { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lm.gif) 0 0 no-repeat; }
.local .ygtvlmh { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lmh.gif) 0 0 no-repeat; }
.local .ygtvlp { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lp.gif) 0 0 no-repeat; }
.local .ygtvlph { width:16px; height:22px; cursor:pointer; background: url(../../img/default/lph.gif) 0 0 no-repeat; }
.local .ygtvloading { width:16px; height:22px; background: url(../../img/default/loading.gif) 0 0 no-repeat; }
.local .ygtvdepthcell { width:16px; height:22px; background: url(../../img/default/vline.gif) 0 0 no-repeat; }
.local .ygtvblankdepthcell { width:16px; height:22px; }
.local .ygtvitem { }
.local .ygtvchildren { }
* html .ygtvchildren { height:2%; }
.local .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
/* background-color: white; */
}
.local .ygtvspacer { height: 22px; width: 16px; }

/* class No.5 menu style view */
.menu .ygtvtn { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:20px; cursor:pointer } /* 2007/12/26 transparent; → url(../../img/menu/expand.gif) 0 6px no-repeat; へ変更 */
.menu .ygtvtm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvtmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvtp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvtph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvln { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:20px; cursor:pointer } /* 2007/12/26 transparent; → url(../../img/menu/expand.gif) 0 6px no-repeat; へ変更 */
.menu .ygtvlm { background: url(../../img/menu/collapse.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvlmh { background: url(../../img/menu/collapseh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvlp { background: url(../../img/menu/expand.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvlph { background: url(../../img/menu/expandh.gif) 0 6px no-repeat; width:1em; height:22px; cursor:pointer }
.menu .ygtvloading { background: url(../../img/menu/loading.gif) 0 6px no-repeat; width:1em; height:22px; }
.menu .ygtvdepthcell { background: transparent; width:1em; height:20px; }
.menu .ygtvblankdepthcell { background: transparent; width:1em; height:20px; }
.menu .ygtvitem { border: 0px solid grey; }
.menu .ygtvchildren { }
.menu .ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
font-size: 12px;
}

/* class No.6 Yahoo!UI default style view */
.dflt .ygtvtn{width:18px;height:22px;background:url(../../img/dflt/treeview-sprite.gif) 0 -5600px no-repeat;}
.dflt .ygtvtm{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -4000px no-repeat;}
.dflt .ygtvtmh{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -4800px no-repeat;}
.dflt .ygtvtp{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -6400px no-repeat;}
.dflt .ygtvtph{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -7200px no-repeat;}
.dflt .ygtvln{width:18px;height:22px;background:url(../../img/dflt/treeview-sprite.gif) 0 -1600px no-repeat;}
.dflt .ygtvlm{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 0px no-repeat;}
.dflt .ygtvlmh{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -800px no-repeat;}
.dflt .ygtvlp{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -2400px no-repeat;}
.dflt .ygtvlph{width:18px;height:22px;cursor:pointer;background:url(../../img/dflt/treeview-sprite.gif) 0 -3200px no-repeat;}
.dflt .ygtvloading{width:18px;height:22px;background:url(../../img/dflt/treeview-loading.gif) 0 0 no-repeat;}
.dflt .ygtvdepthcell{width:18px;height:22px;background:url(../../img/dflt/treeview-sprite.gif) 0 -8000px no-repeat;}
.dflt .ygtvblankdepthcell{width:18px;height:22px;}
.dflt .ygtvitem{ height:1%; }
.dflt .ygtvchildren{*zoom:1;}/* background-color: #ffffff;*/
.dflt .ygtvlabel,.ygtvlabel:link,.ygtvlabel:visited,.ygtvlabel:hover
{
margin-left:2px;
text-decoration:none;
/* background-color:white; */
}
.dflt .ygtvspacer{height:22px;width:18px;}

TreeView(YUI:Yahoo! User Interface Library)インストールや、HTMLへの組み込み については JavaScript 基本例 1.TreeView をご参照ください。