DevExpress の ASPxTrackBar での色選択設定（JavaScript）

DevExpress の ASPxTrackBar での色選択設定（JavaScript）のサンプルです。

実際の画面はこのような感じです。

サンプル作成までの大きな手順は7点です。
・ASPxTrackBar を3個生成
・ASPxTrackBar のメモリ表示を設定
・ASPxTrackBar のカーソル移動量を設定
・ASPxTrackBar を縦表示に変更
・ASPxTrackBar を逆表示に変更
・ASPxTrackBar の最大値を設定
・ASPxTrackBar イベントで値を取得

他は、ASPxTrackBar のサイズ、ハイライト等の細かい変更

では、手順を説明していきます。

＜色選択設定（JavaScript）＞

・ASPxTrackBar を3個生成

ASPxTrackBar生成は、過去ブログの「DevExpress のサンプル作成（ASPxTrackBar）」を参照して下さい。

・ASPxTrackBar のメモリ表示を設定

メモリ表示は、過去ブログの「DevExpress の ASPxTrackBar でのメモリ表示設定」を参照して下さい。

別画面でリンク表示：DevExpress の ASPxTrackBar でのメモリ表示設定

・ASPxTrackBar のカーソル移動量を設定

カーソル移動量は、過去ブログの「DevExpress の ASPxTrackBar でのカーソル移動量設定」を参照して下さい。

・ASPxTrackBar を縦表示に変更

縦表示は、過去ブログの「DevExpress の ASPxTrackBar での縦表示設定」を参照して下さい。

・ASPxTrackBar を逆表示に変更

逆表示は、過去ブログの「DevExpress の ASPxTrackBar での逆表示設定」を参照して下さい。

・ASPxTrackBar の最大値を設定

最大値設定は、過去ブログの「DevExpress の ASPxTrackBar での最小値、最大値設定」を参照して下さい。

・ASPxTrackBar イベントで値を取得

「>」をクリックします。

↓

「Designer…」を選択します。

↓

「Client-Side Events」を選択します。

↓

「ValueChanged」を選択します。

↓

色設定処理を記載します。

【サンプルプログラム】

<body>
    <script type="text/javascript">
        function SetColor() {
            var myColor_R = 0;
            var myColor_G = 0;
            var myColor_B = 0;
            var myColor_RGB = "";
            myColor_R = TB_R.GetPositionStart();
            myColor_G = TB_G.GetPositionStart();
            myColor_B = TB_B.GetPositionStart();
            var myColor_RGB = 'rgb(' + myColor_R + ',' + myColor_G + ',' + myColor_B + ')';
            L_C.GetMainElement().style.backgroundColor = myColor_RGB;
        }
    </script>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>
                <dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="赤（R）" 
                    LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight" 
                    ScalePosition="Both" Step="1" Theme="RedWine"
                    LargeTickEndValue="255" Height="350px" 
                    Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_R" 
                    Position="0" PositionStart="0">
                    <ClientSideEvents ValueChanged="function(s, e) {
	                    SetColor();
                    }" />
                    <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" 
                        VerticalAlign="Middle" />
                    <CaptionStyle Font-Bold="True" Font-Size="Medium" ForeColor="Red">
                    </CaptionStyle>
                </dx:ASPxTrackBar>
            </td>
            <td width="50"></td>
            <td>
                <dx:ASPxTrackBar ID="ASPxTrackBar2" runat="server" Caption="緑（G）" 
                    LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight" 
                    ScalePosition="Both" Step="1" Theme="RedWine"
                    LargeTickEndValue="255" Height="350px" 
                    Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_G">
                    <ClientSideEvents ValueChanged="function(s, e) {
	                    SetColor();
                    }" />
                    <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" 
                        VerticalAlign="Middle" />
                    <CaptionStyle Font-Bold="True" Font-Size="Medium" ForeColor="Green">
                    </CaptionStyle>
                </dx:ASPxTrackBar>
            </td>
            <td width="50"></td>
            <td>
                <dx:ASPxTrackBar ID="ASPxTrackBar3" runat="server" Caption="青（B）" 
                    LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight" 
                    ScalePosition="Both" Step="1" Theme="RedWine"
                    LargeTickEndValue="255" Height="350px" 
                    Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_B">
                    <ClientSideEvents ValueChanged="function(s, e) {
	                    SetColor();
                    }" />
                    <CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False" 
                        VerticalAlign="Middle" />
                    <CaptionStyle Font-Bold="True" Font-Size="Medium" ForeColor="Blue">
                    </CaptionStyle>
                </dx:ASPxTrackBar>
            </td>
        </tr>
        <tr>
            <td colspan="5" height="50"></td>
        </tr>
        <tr>
            <td colspan="5" align="center">選択色</td>
        </tr>
        <tr>
            <td colspan="5">
                <dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="COLOR" ClientInstanceName="L_C" 
                    Width="100%">
                </dx:ASPxLabel>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>

<body>

function SetColor() {

var myColor_R = 0;

var myColor_G = 0;

var myColor_B = 0;

var myColor_RGB = "";

myColor_R = TB_R.GetPositionStart();

myColor_G = TB_G.GetPositionStart();

myColor_B = TB_B.GetPositionStart();

var myColor_RGB = 'rgb(' + myColor_R + ',' + myColor_G + ',' + myColor_B + ')';

L_C.GetMainElement().style.backgroundColor = myColor_RGB;

}

</script>

<div>

<table>

<tr>

<td>

<dx:ASPxTrackBar ID="ASPxTrackBar1" runat="server" Caption="赤（R）"

LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight"

ScalePosition="Both" Step="1" Theme="RedWine"

LargeTickEndValue="255" Height="350px"

Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_R"

Position="0" PositionStart="0">

<ClientSideEvents ValueChanged="function(s, e) {

SetColor();

}" />

<CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False"

VerticalAlign="Middle" />

</CaptionStyle>

</dx:ASPxTrackBar>

</td>

<td>

<dx:ASPxTrackBar ID="ASPxTrackBar2" runat="server" Caption="緑（G）"

LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight"

ScalePosition="Both" Step="1" Theme="RedWine"

LargeTickEndValue="255" Height="350px"

Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_G">

<ClientSideEvents ValueChanged="function(s, e) {

SetColor();

}" />

<CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False"

VerticalAlign="Middle" />

</CaptionStyle>

</dx:ASPxTrackBar>

</td>

<td>

<dx:ASPxTrackBar ID="ASPxTrackBar3" runat="server" Caption="青（B）"

LargeTickInterval="25" MaxValue="255" ScaleLabelHighlightMode="AlongBarHighlight"

ScalePosition="Both" Step="1" Theme="RedWine"

LargeTickEndValue="255" Height="350px"

Orientation="Vertical" Direction="Reversed" ClientInstanceName="TB_B">

<ClientSideEvents ValueChanged="function(s, e) {

SetColor();

}" />

<CaptionSettings HorizontalAlign="Center" Position="Top" ShowColon="False"

VerticalAlign="Middle" />

</CaptionStyle>

</dx:ASPxTrackBar>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<dx:ASPxLabel ID="ASPxLabel1" runat="server" Text="COLOR" ClientInstanceName="L_C"

Width="100%">

</dx:ASPxLabel>

</td>

</tr>

</table>

</div>

</form>

</body>

それでは、実行して動作確認を行います。

↓

「赤（R）」ボタンで値を上げます。

※「COLOR」の背景色が指定したRBGで変更されています。
↓

「緑（G）」ボタンで値を上げます。

※「COLOR」の背景色が指定したRBGで変更されています。

↓

「青（B）」ボタンで値を上げます。

※「COLOR」の背景色が指定したRBGで変更されています。

無事に色選択設定が出来ました。

MENU

最近の投稿

人気記事

MENU

DevExpress の ASPxTrackBar での色選択設定（JavaScript）

関連記事はこちら:

最近の投稿

人気記事