入力補助機能 - スピン機能 -

マスク、日付時刻、日付、時刻、コンボ、数値の各コントロールではスピン機能がサポートされます。スピンボタンは、コントロールの両端か右端、またボタンの並びを垂直か水平方向に配置できます。水平方向に配置した場合は、アップボタンとダウンボタンを左右のどちらに表示するかなど、柔軟な設定が可能です。そのほか、各ボタンには任意の画像を設定することもできるため、利用状況に応じて最適なボタンを配置することが可能です。

ここでは、数値コントロールを例にスピンボタンの配置例およびスピン機能を紹介しています。

デフォルト:
BothSidesUpLeftの配置:
BothSidesDownLeftの配置と任意画像:
HorizontalUpLeftの配置:
HorizontalDownLeftの配置と任意画像:
スピン機能
上下矢印キーでのスピン操作
有効範囲内でのループ
値の増減量
ドロップダウンボタン

ソースコード

別ウィンドウで表示
using System;

public partial class Input_Spin : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        GcNumber1.Spin.Enabled = CheckBox1.Checked;
        GcNumber1.Spin.SpinOnKeys = CheckBox2.Checked;
        GcNumber1.Spin.Wrap = CheckBox3.Checked;
        GcNumber1.Spin.Increment = (int)GcNumber6.Integer;
        GcNumber1.DropDown.Visible = CheckBox4.Checked;

        GcNumber2.Spin.Enabled = CheckBox1.Checked;
        GcNumber2.Spin.SpinOnKeys = CheckBox2.Checked;
        GcNumber2.Spin.Wrap = CheckBox3.Checked;
        GcNumber2.Spin.Increment = (int)GcNumber6.Integer;
        GcNumber2.DropDown.Visible = CheckBox4.Checked;

        GcNumber3.Spin.Enabled = CheckBox1.Checked;
        GcNumber3.Spin.SpinOnKeys = CheckBox2.Checked;
        GcNumber3.Spin.Wrap = CheckBox3.Checked;
        GcNumber3.Spin.Increment = (int)GcNumber6.Integer;
        GcNumber3.DropDown.Visible = CheckBox4.Checked;

        GcNumber4.Spin.Enabled = CheckBox1.Checked;
        GcNumber4.Spin.SpinOnKeys = CheckBox2.Checked;
        GcNumber4.Spin.Wrap = CheckBox3.Checked;
        GcNumber4.Spin.Increment = (int)GcNumber6.Integer;
        GcNumber4.DropDown.Visible = CheckBox4.Checked;

        GcNumber5.Spin.Enabled = CheckBox1.Checked;
        GcNumber5.Spin.SpinOnKeys = CheckBox2.Checked;
        GcNumber5.Spin.Wrap = CheckBox3.Checked;
        GcNumber5.Spin.Increment = (int)GcNumber6.Integer;
        GcNumber5.DropDown.Visible = CheckBox4.Checked;
    }
}

Partial Class Input_Spin
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        With GcNumber1
            .Spin.Enabled = CheckBox1.Checked
            .Spin.SpinOnKeys = CheckBox2.Checked
            .Spin.Wrap = CheckBox3.Checked
            .Spin.Increment = GcNumber6.Integer
            .DropDown.Visible = CheckBox4.Checked
        End With

        With GcNumber2
            .Spin.Enabled = CheckBox1.Checked
            .Spin.SpinOnKeys = CheckBox2.Checked
            .Spin.Wrap = CheckBox3.Checked
            .Spin.Increment = GcNumber6.Integer
            .DropDown.Visible = CheckBox4.Checked
        End With

        With GcNumber3
            .Spin.Enabled = CheckBox1.Checked
            .Spin.SpinOnKeys = CheckBox2.Checked
            .Spin.Wrap = CheckBox3.Checked
            .Spin.Increment = GcNumber6.Integer
            .DropDown.Visible = CheckBox4.Checked
        End With

        With GcNumber4
            .Spin.Enabled = CheckBox1.Checked
            .Spin.SpinOnKeys = CheckBox2.Checked
            .Spin.Wrap = CheckBox3.Checked
            .Spin.Increment = GcNumber6.Integer
            .DropDown.Visible = CheckBox4.Checked
        End With

        With GcNumber5
            .Spin.Enabled = CheckBox1.Checked
            .Spin.SpinOnKeys = CheckBox2.Checked
            .Spin.Wrap = CheckBox3.Checked
            .Spin.Increment = GcNumber6.Integer
            .DropDown.Visible = CheckBox4.Checked
        End With
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Input_Spin, App_Web_fud0ams1" theme="SkinFile" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        // スピン機能を有効にするかどうか設定します。
        function SpinEnabled(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcNumber1.ClientID %>").SetSpinEnabled(obj.checked);
            FindIMControl("<% =GcNumber2.ClientID %>").SetSpinEnabled(obj.checked);
            FindIMControl("<% =GcNumber3.ClientID %>").SetSpinEnabled(obj.checked);
            FindIMControl("<% =GcNumber4.ClientID %>").SetSpinEnabled(obj.checked);
            FindIMControl("<% =GcNumber5.ClientID %>").SetSpinEnabled(obj.checked);
        }
        // 上下矢印キーでのスピン操作を許可するかどうか設定します。
        function SpinOnKeys(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcNumber1.ClientID %>").SetSpinOnKeys(obj.checked);
            FindIMControl("<% =GcNumber2.ClientID %>").SetSpinOnKeys(obj.checked);
            FindIMControl("<% =GcNumber3.ClientID %>").SetSpinOnKeys(obj.checked);
            FindIMControl("<% =GcNumber4.ClientID %>").SetSpinOnKeys(obj.checked);
            FindIMControl("<% =GcNumber5.ClientID %>").SetSpinOnKeys(obj.checked);
        }
        // 有効範囲内でのループするかどうか設定します。
        function SpinWrap(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcNumber1.ClientID %>").SetSpinWrap(obj.checked);
            FindIMControl("<% =GcNumber2.ClientID %>").SetSpinWrap(obj.checked);
            FindIMControl("<% =GcNumber3.ClientID %>").SetSpinWrap(obj.checked);
            FindIMControl("<% =GcNumber4.ClientID %>").SetSpinWrap(obj.checked);
            FindIMControl("<% =GcNumber5.ClientID %>").SetSpinWrap(obj.checked);
        }
        // 値の増減量を設定します。
		function GcNumber6_ValueChanged(sender, eArgs)
		{
		    if (!document.getElementById("isClient").checked) return;

		    FindIMControl("<% =GcNumber1.ClientID %>").SetSpinIncrement(sender.GetInteger());
		    FindIMControl("<% =GcNumber2.ClientID %>").SetSpinIncrement(sender.GetInteger());
		    FindIMControl("<% =GcNumber3.ClientID %>").SetSpinIncrement(sender.GetInteger());
		    FindIMControl("<% =GcNumber4.ClientID %>").SetSpinIncrement(sender.GetInteger());
		    FindIMControl("<% =GcNumber5.ClientID %>").SetSpinIncrement(sender.GetInteger());
		}
        // ドロップダウンボタンの表示を切り替えます。
        function ShowDropDown(obj) {
            if (!document.getElementById("isClient").checked) return;

            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber2.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber3.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber4.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber5.ClientID %>").SetDropDownVisible(obj.checked);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="sample">
    <table>
        <tr>
            <td class="controlsTd">デフォルト:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" 
                    Width="200px" MaxValue="100" MinValue="-100">
                    <DropDown Visible="False" />
                    <Spin Visible="True" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">BothSidesUpLeftの配置:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber2" runat="server" HasLoadFromXml="True" 
                    Width="200px" MaxValue="100" MinValue="-100">
                    <DropDown Visible="False" />
                    <Spin Alignment="BothSidesUpLeft" Visible="True" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">BothSidesDownLeftの配置と任意画像:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber3" runat="server" HasLoadFromXml="True" 
                    Width="200px" MaxValue="100" MinValue="-100">
                    <DropDown Visible="False" />
                    <Spin Alignment="BothSidesDownLeft" Visible="True" 
                    PressedSpinDownImage="~/images/imImages/SpinDownPressed2.png" 
                    PressedSpinUpImage="~/images/imImages/SpinUpPressed2.png" 
                    SpinDownImage="~/images/imImages/SpinDown2.png" 
                    SpinUpImage="~/images/imImages/SpinUp2.png" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">HorizontalUpLeftの配置:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber4" runat="server" HasLoadFromXml="True" 
                    Width="200px" MaxValue="100" MinValue="-100">
                    <DropDown Visible="False" />
                    <Spin Alignment="HorizontalUpLeft" Visible="True" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">HorizontalDownLeftの配置と任意画像:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber5" runat="server" HasLoadFromXml="True" 
                    Width="200px" MaxValue="100" MinValue="-100">
                    <DropDown Visible="False" />
                    <Spin Alignment="HorizontalDownLeft" 
                    PressedSpinDownImage="~/images/imImages/SpinDownPressed1.png" 
                    PressedSpinUpImage="~/images/imImages/SpinUpPressed1.png" 
                    SpinDownImage="~/images/imImages/SpinDown1.png" 
                    SpinUpImage="~/images/imImages/SpinUp1.png" Visible="True" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>

    </table>
    </div>
    <label style="font-size:80%;"><input type="checkbox" id="isClient" checked="checked" /> クライアント側の設定を有効にする</label>
    <table class="inputTable">
        <tr>
            <th class="inputTh">スピン機能</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="True" Text="有効にする" onclick="SpinEnabled(this);"/>
            </td>
        </tr>
        <tr>
            <th class="inputTh">上下矢印キーでのスピン操作</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox2" runat="server" Checked="True" Text="有効にする" onclick="SpinOnKeys(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">有効範囲内でのループ</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox3" runat="server" Checked="True" Text="有効範囲内でループする" onclick="SpinWrap(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">値の増減量</th>
            <td class="inputTd">
                <im_number:GcNumber ID="GcNumber6" runat="server" HasLoadFromXml="True" 
                    MaxValue="100" MinValue="1" Width="80px">
                    <clientevents valuechanged="GcNumber6_ValueChanged"></clientevents>
                    <DropDown Visible="False" Enabled="false" />
                    <Spin Visible="True" /><helpvalue value = "1" ></helpvalue>
                </im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <th class="inputTh">ドロップダウンボタン</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox4" runat="server" Text="ドロップダウンボタンを表示する" onclick="ShowDropDown(this);"/>
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" 
            onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る