- PR -

ADO.NET DataListで140種類のカラー名表示

1
投稿者投稿内容
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2002-04-12 11:01
DataListを利用して140種類のカラー名を表示するには

BackColor, ForeColorプロパティなどで指定するカラー名をデータベースに格納してWeb上に表示するサンプルです。




DEMO1 は、カラーの一覧をシングルカラム（１列）指定で表示します。

コード:
<asp:DataList

  ID="dlstColorNames"

  ItemStyle-Font-Name="FixedSys"

  CellPadding="0"

  CellSpaceing="0"

  Runat="Server">

  

  <HeaderTemplate>

    <h2>140 Color Names and Values:</h2>

  </HeaderTemplate>

  

  <ItemTemplate>

    <table width="300" cellspacing="0" border="0">

      <tr>

        <td width="200" align="center"

          style='background:<%# Container.DataItem("ColorValue") %>'>

          <%# Container.DataItem("ColorName") %>

        </td>          

        <td width="100" align="left">

          <%# Container.DataItem("ColorValue") %>

        </td>     

      </tr>  

    </table>              

  </ItemTemplate>  

</asp:DataList>



DEMO2 は、カラーの一覧を４列指定で表示します。

DataListを利用して複数列で表示するには、RepeatColumns, RepeatDirectionプロパティを使用します。マウスをカラー上に移動すると、ツールチップとしてカラー名と16進のカラーコードが表示されます。

コード:
<asp:DataList

  ID="dlstColorNames"

  RepeatColumns="4"

  RepeatDirection="Horizontal"

  ItemStyle-Font-Name="Arial Narrow"

  ItemStyle-HorizontalAlign="Center"

  CellPadding="0"

  CellSpaceing="0"

  Runat="Server">

  

  <HeaderTemplate>

    <h2>140 Color Names:</h2>

  </HeaderTemplate>

  

  <ItemTemplate>

    <div style='background:<%# Container.DataItem("ColorName") %>'

      title='<%# Container.DataItem("ColorName") %>

　　　(<%# Container.DataItem("ColorValue") %>)'>

      <%# Container.DataItem("ColorName") %>       

    </div>  

  </ItemTemplate>  

</asp:DataList>


このようにデータドリブン型のWebページを作成すると、レイアウトを簡単に変更することができます。

Happy Programming!
Akio Kasai

[ メッセージ編集済み 編集者: Dr ADO.NET 編集日時 2002-04-12 19:32 ]
1

スキルアップ／キャリアアップ（JOB@IT）