2011/02/25

背景色の設定 (Switching background color)

背景色の設定に関する手法を説明します。今回のサンプルの出力結果は以下の通りです。




【1行毎に背景色を切り替える】
1行毎に背景色を切り替えるには、背景色の異なる行をあらかじめテンプレートに作成します。




切り替えは上図の[if1]および[if2]にて設定します。設定は以下の通りです。

[if1]: <?if:position() mod 2 = 1?>
[if2]: <?if:position() mod 2 = 0?>
なお、サンプルのように if で行を囲む場合、「表の内側」で完結させてください。表の外側に if を設定すると、予期せぬエラーが発生することがあります。





【データに応じて背景色を切り替える】
サンプルでは、SALが3000以上のカラムをオレンジに着色しています。設定はセル単位で[if3]にて行っています。[if3]の内容は以下の通りです。
[if3]: <?if:SAL>=3000 ?><?attribute@incontext:background-color;'#ff9900'?><?end if?> 



【背景色のRGB指定】
背景色はRGB関数で指定することもできます。数値での受け渡しが可能になるため、列の値によるグラデーション表現も容易です。以下のサンプルは、SALの値によって背景色のR(赤)の値を変化させます。
<xsl:attribute xdofo:ctx="block" name="background-color">
  rgb(<xsl:value-of select="round(SAL div 20)" />,255,125)
</xsl:attribute>



実行結果は以下の通りです。




[ Summary ]
The example above shows how to change the background color - in every other row, based on certain conditions.
Use position() mod 2 to switch the row background color.
You can use xsl:rgb.  In the last example, background color is determined at runtime based on SAL.  See the last figure.  It's full color.

0 件のコメント:

コメントを投稿