ビューで行ごとに色を互い違いに変える方法

ビューで各行の色を互い違いに変えてみよう。

元ネタはXPagesの自習で作成したDBを公開しました で紹介されているサンプル掲示板。

行ごとに背景色を変える仕組み

ビューは<xp:viewPanel>で作るわけだが、こいつにrowClassesというプロパティがあって、これをこんな感じで指定する。rowClasses="rowOdd,rowEven"

こうすると、ビューの各行のクラスがrowClassesで指定したクラスに変わる。

行ごとのクラス指定

あとは、これをCSSで定義してやればいいわけだ。

  .rowOdd {
    background-color: white;
  }
  .rowEven {
    background-color: #f8f8f8;
  }
  

ついでに、以下の設定を追加すると、マウスがビューの行にかぶさると、背景の色を変えることができる。

  .rowOdd:hover {
    background-color: #ffffc8;
  }
  .rowEven:hover {
    background-color: #ffffc8;
  }
  

こんな感じで表示される。

表示例