JavaScript: 2006年6月アーカイブ

現在の状態

UL, OL 要素は入れ子にする事が出来ます。この時、項目数や入れ子が多くになるにつれて、項目同士の親子・兄弟関係が見辛くなるかもしれません。
fig1.png

親兄弟関係を表す線を入れる

そこで、項目同士の関係を表すを入れます。線の表現は CSS でやりたいと思います。その為にルートとなるリスト要素に treeView というクラス名を付け、各リストの最後の LI 要素にも last というクラス名を割り振ります。
fig2.png

<ul class="treeView">
  <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      <li>11月</li>
      <li class="last">12月</li>
    </ul>
  </li>
  <li class="last">2006年
    <ul>
      <li>1月</li>
      <li>2月</li>
      <li>3月</li>
      <li>4月
        <ul>
          <li>1日</li>
          <li>3日</li>
          <li>4日</li>
          <li>20日</li>
          <li class="last">28日</li>
        </ul>
      </li>
      <li>5月</li>
      <li class="last">6月</li>
    </ul>
  </li>
</ul>

適用する CSS は以下の通りです。

.treeView
{
  background-color: white;
  
  font-family: "ヒラギノ角ゴ Pro W3", Osaka, Tahoma, Verdana, "MS UI Gothic", "MS Pゴシック", sans-serif;
  font-size: small;
  color: black;
}

.treeView,
.treeView ul,
.treeView ol
{
  margin: 0 0 0 20px;
  padding: 0;

  background-image: url("line_vertical.png");
  background-repeat: repeat-y;
}

.treeView li
{
  margin: 0;
  padding: 0;
  
  background-image: url("line_diverge.png");
  background-repeat: no-repeat;

  text-indent: 20px;
  line-height: 160%;

  list-style-type: none;
  list-style-position: outside;
}

.treeView li.last
{
  background-color: white;
  background-image: url("line_terminal.png");
}

項目最後の要素にクラス名を振るのが大変

更新が多い部分で用いる場合、クラス名を手作業で振り直すのはかなりの作業量です。許されるなら JavaScript でクラス名を割り振ります。

function setTreeViewStyle(list)
{
  list.className = "treeView";
  
  setTreeViewItemStyle(list);
}

function setTreeViewItemStyle(list)
{
  var items = list.childNodes;
  var marked = false;
  
  for (var i = items.length - 1; i >= 0; i--)
  {
    var element = items[i];
    
    if (element.tagName && element.tagName.toLowerCase() == "li")
    {
      if (!marked)
      {
        element.className = "last";
        marked = true;
      }

      var subItems = element.childNodes;
      
      for (var j = subItems.length - 1; j >= 0; j--)
      {
        var element = subItems[j];
        
        if (element.tagName)
        {
          switch (element.tagName.toLowerCase())
          {
            case "ul":
            case "ol":
              setTreeViewItemStyle(element);
              
              break;
          }
        }
      }
    }
  }
}

実際に利用する場合は以下のようにします。

<body onload="setTreeViewStyle(document.getElementById('tree'));">
  <ul id="tree">
    <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      ...後略

このアーカイブについて

このページには、2006年6月以降に書かれたブログ記事のうちJavaScriptカテゴリに属しているものが含まれています。

前のアーカイブはJavaScript: 2005年9月です。

次のアーカイブはJavaScript: 2006年9月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.12