表示機能 - ドロップダウン -

日付ピッカー、カレンダー、数値パッドなどのドロップダウンオブジェクトを表示可能なコントロールでは、さまざまなドロップダウン動作を設定できます。

テキスト: 日付時刻:
数値: 日付:
ドロップダウン機能
ドロップダウンボタンの表示
ドロップダウンオブジェクトの配置
開くときのアニメーション
閉じるときのアニメーション
影の表示

ソースコード

別ウィンドウで表示
using GrapeCity.Web.Input.Core;
using System;

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

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        // ドロップダウン機能の有効無効
        GcTextBox1.DropDown.Enabled = CheckBox1.Checked;
        GcNumber1.DropDown.Enabled = CheckBox1.Checked;
        GcDateTime1.DropDown.Enabled = CheckBox1.Checked;
        GcDate1.DropDown.Enabled = CheckBox1.Checked;

        // フォーカス取得時にドロップダウン
        GcTextBox1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcNumber1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcDateTime1.DropDown.AutoDropDown = CheckBox2.Checked;
        GcDate1.DropDown.AutoDropDown = CheckBox2.Checked;

        // ボタンの表示
        GcTextBox1.DropDown.Visible = CheckBox3.Checked;
        GcNumber1.DropDown.Visible = CheckBox3.Checked;
        GcDateTime1.DropDown.Visible = CheckBox3.Checked;
        GcDate1.DropDown.Visible = CheckBox3.Checked;

        // オブジェクトの配置
        GcTextBox1.DropDownEditor.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcNumber1.DropDownCalculator.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcDateTime1.DropDownCalendar.Align = (AlignEnum)RadioButtonList1.SelectedIndex;
        GcDate1.DropDownCalendar.Align = (AlignEnum)RadioButtonList1.SelectedIndex;

        // 開くときのアニメーション
        GcTextBox1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcNumber1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcDateTime1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;
        GcDate1.DropDown.OpeningAnimation = (DropDownAnimation)DropDownList1.SelectedIndex;

        // 閉じるときのアニメーション
        GcTextBox1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcNumber1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcDateTime1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;
        GcDate1.DropDown.ClosingAnimation = (DropDownAnimation)DropDownList2.SelectedIndex;

        // 影の表示
        GcTextBox1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcNumber1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcDateTime1.DropDown.DropDownShadow = CheckBox4.Checked;
        GcDate1.DropDown.DropDownShadow = CheckBox4.Checked;
    }
}

Partial Class Display_DropDown
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ' ドロップダウン機能の有効無効
        GcTextBox1.DropDown.Enabled = CheckBox1.Checked
        GcNumber1.DropDown.Enabled = CheckBox1.Checked
        GcDateTime1.DropDown.Enabled = CheckBox1.Checked
        GcDate1.DropDown.Enabled = CheckBox1.Checked

        ' フォーカス取得時にドロップダウン
        GcTextBox1.DropDown.AutoDropDown = CheckBox2.Checked
        GcNumber1.DropDown.AutoDropDown = CheckBox2.Checked
        GcDateTime1.DropDown.AutoDropDown = CheckBox2.Checked
        GcDate1.DropDown.AutoDropDown = CheckBox2.Checked

        ' ボタンの表示
        GcTextBox1.DropDown.Visible = CheckBox3.Checked
        GcNumber1.DropDown.Visible = CheckBox3.Checked
        GcDateTime1.DropDown.Visible = CheckBox3.Checked
        GcDate1.DropDown.Visible = CheckBox3.Checked

        ' オブジェクトの配置
        GcTextBox1.DropDownEditor.Align = RadioButtonList1.SelectedIndex
        GcNumber1.DropDownCalculator.Align = RadioButtonList1.SelectedIndex
        GcDateTime1.DropDownCalendar.Align = RadioButtonList1.SelectedIndex
        GcDate1.DropDownCalendar.Align = RadioButtonList1.SelectedIndex

        ' 開くときのアニメーション
        GcTextBox1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcNumber1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcDateTime1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex
        GcDate1.DropDown.OpeningAnimation = DropDownList1.SelectedIndex

        ' 閉じるときのアニメーション
        GcTextBox1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcNumber1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcDateTime1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex
        GcDate1.DropDown.ClosingAnimation = DropDownList2.SelectedIndex

        ' 影の表示
        GcTextBox1.DropDown.DropDownShadow = CheckBox4.Checked
        GcNumber1.DropDown.DropDownShadow = CheckBox4.Checked
        GcDateTime1.DropDown.DropDownShadow = CheckBox4.Checked
        GcDate1.DropDown.DropDownShadow = CheckBox4.Checked
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Display_DropDown, App_Web_12u1owbr" stylesheettheme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMExtenders" tagprefix="im_extenders" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMNumber" tagprefix="im_number" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script type="text/javascript">
        function SetEnabled(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウン機能を有効にするかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownEnabled(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownEnabled(obj.checked);

        }

        function AutoDropDown(obj) {
            if (!document.getElementById("isClient").checked) return;

            // フォーカス取得時にドロップダウンするかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetAutoDropDown(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetAutoDropDown(obj.checked);
        }

        function Visible(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンボタンを表示するかどうか設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownVisible(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownVisible(obj.checked);
        }

        function DropDownAlign(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンオブジェクトの配置を設定します。
            var align;
            var radio = obj.getElementsByTagName("input");
            for (var i = 0; i < radio.length; ++i) {
                if (radio[i].checked) {
                    align = radio[i].value;
                }
            }
            
            FindIMControl("<% =GcTextBox1.ClientID %>").GetDropDownEditor().SetAlign(align);
            FindIMControl("<% =GcDateTime1.ClientID %>").GetDropDownPicker().SetAlign(align);
            FindIMControl("<% =GcNumber1.ClientID %>").GetDropDownNumericPad().SetAlign(align);
            FindIMControl("<% =GcDate1.ClientID %>").GetDropDownCalendar().SetAlign(align);
        }

        function OpenAnimation(animation) {
            if (!document.getElementById("isClient").checked) return;

            // 開くときのアニメーション効果を設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownOpeningAnimation(animation);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownOpeningAnimation(animation);
        }

        function CloseAnimation(animation) {
            if (!document.getElementById("isClient").checked) return;

            // 閉じるときのアニメーション効果を設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownClosingAnimation(animation);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownClosingAnimation(animation);
        }

        function DropDownShadow(obj) {
            if (!document.getElementById("isClient").checked) return;

            // ドロップダウンオブジェクトに影をつけるかどうかを設定します。
            FindIMControl("<% =GcTextBox1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcDateTime1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcNumber1.ClientID %>").SetDropDownShadow(obj.checked);
            FindIMControl("<% =GcDate1.ClientID %>").SetDropDownShadow(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_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" 
                    MultiLine="True" Text="仙台本社:
 仙台市泉区紫山
関東支社:
 川口市本町
大阪支店:
 大阪市北区中之島
名古屋営業所
 名古屋市中村区名駅" Width="170px">
                    <DropDown Visible="True" AutoDropDown="True" />
                    <dropdowneditor width="200px"></dropdowneditor>
                </im_edit:GcTextBox>
            </td>
            <td class="controlsTd">日付時刻:</td>
            <td>
                <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" 
                    Width="170px">
                    <helpvalue value = "2015/01/13 11:06:23" ></helpvalue><DropDown AutoDropDown="True" DropDownType="Picker" />
                </im_date:GcDateTime>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">数値:</td>
            <td>
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="170px">
                    <DropDown AutoDropDown="True" DropDownType="NumericPad" />
                    <helpvalue value = "0" ></helpvalue>
                </im_number:GcNumber>
            </td>
            <td class="controlsTd">日付:</td>
            <td>
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="170px">
                     <DropDown AutoDropDown="True" />
                 </im_date:GcDate>
            </td>
        </tr>
    </table>
    </div>
    <im_extenders:GcShortcut ID="GcShortcut1" runat="server">
        <shortcutitem controlid = "GcTextBox1" value = "Clear,113,DropDown,118"/>
        <shortcutitem controlid = "GcNumber1" value = "Clear,113,DropDown,118"/>
        <shortcutitem controlid = "GcDate1" value = "Clear,113,DropDown,118,Now,119"/>
        <shortcutitem controlid = "GcDateTime1" value = "Clear,113,DropDown,118,Now,119"/>
    </im_extenders:GcShortcut>
    <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="SetEnabled(this);"/> 
                <asp:CheckBox ID="CheckBox2" runat="server" Checked="True" Text="フォーカス取得時にドロップダウンする" onclick="AutoDropDown(this);" /> 
            </td>
        </tr>
        <tr>
            <th class="inputTh">ドロップダウンボタンの表示</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox3" runat="server" Checked="True" Text="表示する" onclick="Visible(this);" />
            </td>
        </tr>
        <tr>
            <th class="inputTh">ドロップダウンオブジェクトの配置</th>
            <td class="inputTd">
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" 
                    RepeatDirection="Horizontal" onchange="DropDownAlign(this);">
                    <asp:ListItem Selected="True" Value="left">左揃え</asp:ListItem>
                    <asp:ListItem Value="right">右揃え</asp:ListItem>
                </asp:RadioButtonList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">開くときのアニメーション</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList1" runat="server" onchange="OpenAnimation(this.value)">
                    <asp:ListItem Selected="True" Value="none">なし</asp:ListItem>
                    <asp:ListItem Value="scroll">Scroll</asp:ListItem>
                    <asp:ListItem Value="slide">Slide</asp:ListItem>
                    <asp:ListItem Value="fade">Fade</asp:ListItem>
                    <asp:ListItem Value="center">Center</asp:ListItem>
                    <asp:ListItem Value="extend">Extend</asp:ListItem>
                    <asp:ListItem Value="drag">Drag</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">閉じるときのアニメーション</th>
            <td class="inputTd">
                <asp:DropDownList ID="DropDownList2" runat="server" onchange="CloseAnimation(this.value)">
                    <asp:ListItem Selected="True" Value="none">なし</asp:ListItem>
                    <asp:ListItem Value="scroll">Scroll</asp:ListItem>
                    <asp:ListItem Value="slide">Slide</asp:ListItem>
                    <asp:ListItem Value="fade">Fade</asp:ListItem>
                    <asp:ListItem Value="center">Center</asp:ListItem>
                    <asp:ListItem Value="extend">Extend</asp:ListItem>
                    <asp:ListItem Value="drag">Drag</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <th class="inputTh">影の表示</th>
            <td class="inputTd">
                <asp:CheckBox ID="CheckBox4" runat="server" Text="ドロップダウンオブジェクトに影をつける" onclick="DropDownShadow(this);" />
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" CssClass="button_nowidth" Text="サーバー側で設定" onclick="Button1_Click" />
    </center>
</asp:Content>


このページの先頭へ戻る