ASP.NET AJAX Control Toolkit - CollapsiblePanel -

InputManの各コントロールは、ASP.NET AJAX Control ToolkitのCollapsiblePanelコントロールに配置できます。

collapse テキスト、マスク、数値コントロール
テキスト:
マスク:
数値:
collapse 日付時刻、日付、時刻コントロール
日付時刻:
日付:
時刻:
collapse コンボ、リストコントロール
コンボ:
リスト:
collapse カレンダー、電卓コントロール
カレンダー:
電卓:

ソースコード

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

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

    }
}

Partial Class ControlToolkit_CollapsiblePanel
    Inherits System.Web.UI.Page

End Class

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

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCalculator" TagPrefix="im_calculator" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMList" TagPrefix="im_list" %>
<%@ Register Assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" Namespace="GrapeCity.Web.Input.IMCombo" TagPrefix="im_combo" %>
<%@ 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" %>
<%@ 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.IMCalendar" TagPrefix="im_calendar" %>
<%@ Register assembly="GrapeCity.Web.Input.v80, Version=8.0.2016.1130, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <style type="text/css">
        .title {
            font-size: 90%;
            font-weight: bold;
            color: #5377A9;
            cursor: pointer;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
    <asp:CollapsiblePanelExtender ID="Topic1_CollapsiblePanelExtender" runat="server" Enabled="True" 
        TargetControlID="Topic1_Content" ExpandControlID="Topic1_Header" CollapseControlID="Topic1_Header"
        ImageControlID="Topic1_Image" Collapsed="false">
    </asp:CollapsiblePanelExtender>
    <asp:Panel ID="Topic1_Header" runat="server">
        <asp:Image ID="Topic1_Image" runat="server" ImageUrl="~/images/imImages/expand.jpg" AlternateText="collapse"/>
        <span class="title">テキスト、マスク、数値コントロール</span>
    </asp:Panel>
    <asp:Panel ID="Topic1_Content" runat="server">
        <table>
            <tr>
                <td class="controlsTd">テキスト:</td>
                <td class="controlsTd">
                    <im_edit:GcTextBox ID="GcTextBox1" runat="server" HasLoadFromXml="True" Text="テキストコントロール" Width="200px">
                    </im_edit:GcTextBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">マスク:</td>
                <td class="controlsTd">
                    <im_mask:GcMask ID="GcMask1" runat="server" Width="200px" HasLoadFromXml="True">
                        <Format Pattern="℡ \D{2,4}-\D{2,4}-\D{4}" />
                    </im_mask:GcMask>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">数値:</td>
                <td class="controlsTd">
                    <im_number:GcNumber ID="GcNumber1" runat="server" Width="200px" 
                        HasLoadFromXml="True">
                        <Spin Visible="true" />
                        <DropDown DropDownType="NumericPad" />
                    </im_number:GcNumber>
                </td>
            </tr>
        </table>
    </asp:Panel>

    <asp:CollapsiblePanelExtender ID="Topic2_CollapsiblePanelExtender" runat="server" Enabled="True" 
        TargetControlID="Topic2_Content" ExpandControlID="Topic2_Header" CollapseControlID="Topic2_Header"
        ImageControlID="Topic2_Image" Collapsed="true">
    </asp:CollapsiblePanelExtender>

    <asp:Panel ID="Topic2_Header" runat="server">
        <asp:Image ID="Topic2_Image1" runat="server" ImageUrl="~/images/imImages/expand.jpg" AlternateText="collapse"/>
        <span class="title">日付時刻、日付、時刻コントロール</span>
    </asp:Panel>
    
    <asp:Panel ID="Topic2_Content" runat="server">
        <table>
            <tr>
                <td class="controlsTd">日付時刻:</td>
                <td class="controlsTd">
                    <im_date:GcDateTime ID="GcDateTime1" runat='server' Width="200" 
                        HasLoadFromXml="True">
                        <DropDown DropDownType="Picker" />
                    </im_date:GcDateTime>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">日付:</td>
                <td class="controlsTd">
                    <im_date:GcDate ID="GcDate1" runat='server' Width="200" HasLoadFromXml="True"></im_date:GcDate>
                </td>
            </tr>
            <tr>
                <td class="controlsTd">時刻:</td>
                <td class="controlsTd">
                    <im_date:GcTime ID="GcTime1" runat='server' Width="200" HasLoadFromXml="True">
                        <DropDown DropDownType="Picker"/>
                    </im_date:GcTime>
                </td>
            </tr>
        </table>
    </asp:Panel>

    <asp:CollapsiblePanelExtender ID="Topic3_CollapsiblePanelExtender" runat="server" Enabled="True" 
        TargetControlID="Topic3_Content" ExpandControlID="Topic3_Header" CollapseControlID="Topic3_Header"
        ImageControlID="Topic3_Image" Collapsed="true">
    </asp:CollapsiblePanelExtender>

    <asp:Panel ID="Topic3_Header" runat="server">
        <asp:Image ID="Topic3_Image" runat="server" ImageUrl="~/images/imImages/expand.jpg" AlternateText="collapse"/>
        <span class="title">コンボ、リストコントロール</span>
    </asp:Panel>
    
    <asp:Panel ID="Topic3_Content" runat="server">
        <table>
            <tr>
                <td class="controlsTd">コンボ:</td>
                <td class="controlsTd">
                    <im_combo:GcComboBox ID="GcComboBox1" runat='server' Width="200" 
                        HasLoadFromXml="True">
                        <ListBox AutoWidth="True" />
                        <defaultcolumn autowidth="True"></defaultcolumn>
                        <listcolumn header-text="クラス名"></listcolumn>
                        <listcolumn header-text="コントロール名"></listcolumn>
                        <comboitem image="0"></comboitem>
                        <subitem index="0" value="GcTextBox"></subitem>
                        <subitem index="0" value="テキストコントロール"></subitem>
                        <comboitem image="1"></comboitem>
                        <subitem index="1" value="GcMask"></subitem>
                        <subitem index="1" value="マスクコントロール"></subitem>
                        <comboitem image="2"></comboitem>
                        <subitem index="2" value="GcDatetime"></subitem>
                        <subitem index="2" value="日付時刻コントロール"></subitem>
                        <comboitem image="3"></comboitem>
                        <subitem index="3" value="GcDate"></subitem>
                        <subitem index="3" value="日付コントロール"></subitem>
                        <comboitem image="4"></comboitem>
                        <subitem index="4" value="GcTime"></subitem>
                        <subitem index="4" value="時刻コントロール"></subitem>
                        <comboitem image="5"></comboitem>
                        <subitem index="5" value="GcNumber"></subitem>
                        <subitem index="5" value="数値コントロール"></subitem>
                        <comboitem image="6"></comboitem>
                        <subitem index="6" value="GcComboBox"></subitem>
                        <subitem index="6" value="コンボコントロール"></subitem>
                        <comboitem image="7"></comboitem>
                        <subitem index="7" value="GcListBox"></subitem>
                        <subitem index="7" value="リストコントロール"></subitem>
                        <comboitem image="8"></comboitem>
                        <subitem index="8" value="GcCalendar"></subitem>
                        <subitem index="8" value="カレンダーコントロール"></subitem>
                        <comboitem image="9"></comboitem>
                        <subitem index="9" value="GcCalculator"></subitem>
                        <subitem index="9" value="電卓コントロール"></subitem>
                        <helpvalue ></helpvalue>
                    </im_combo:GcComboBox>
                </td>
            </tr>
            <tr>
                <td class="controlsTd" valign="top">リスト:</td>
                <td class="controlsTd">
                    <im_list:GcListBox ID="GcListBox1" runat="server" Width="370" Height="150" 
                        HasLoadFromXml="True">
                        <ListHeaderPane Font-Name="メイリオ" Font-Size="9pt" Height="28" Visible="True" />
                        <defaultcolumn autowidth="True"></defaultcolumn>
                        <listcolumn header-text="クラス名"></listcolumn>
                        <listcolumn header-text="コントロール名"></listcolumn>
                        <listitem image="0"></listitem>
                        <subitem index="0" value="GcAddress"></subitem>
                        <subitem index="0" value="住所検索エクステンダ"></subitem>
                        <listitem image="1"></listitem>
                        <subitem index="1" value="GcBalloonTip"></subitem>
                        <subitem index="1" value="バルーンチップエクステンダ"></subitem>
                        <listitem image="2"></listitem>
                        <subitem index="2" value="GcShortcut"></subitem>
                        <subitem index="2" value="ショートカットエクステンダ"></subitem>
                        <listitem image="3"></listitem>
                        <subitem index="3" value="GcValidatorAction"></subitem>
                        <subitem index="3" value="検証アクションエクステンダ"></subitem>
                        <listitem image="4"></listitem>
                        <subitem index="4" value="GcCharacterTypeValidator"></subitem>
                        <subitem index="4" value="文字種検証コントロール"></subitem>
                        <listitem image="5"></listitem>
                        <subitem index="5" value="GcTextLengthValidator"></subitem>
                        <subitem index="5" value="文字数検証コントロール"></subitem>
                        <listitem image="6"></listitem>
                        <subitem index="6" value="GcDateRangeValidator"></subitem>
                        <subitem index="6" value="日付範囲検証コントロール"></subitem>
                        <listitem image="7"></listitem>
                        <subitem index="7" value="GcDateDifferenceValidator"></subitem>
                        <subitem index="7" value="日付比較検証コントロール"></subitem>
                        <listitem image="8"></listitem>
                        <subitem index="8" value="GcForbiddenTextValidator"></subitem>
                        <subitem index="8" value="禁止文字列検証コントロール"></subitem>
                        <listitem image="9"></listitem>
                        <subitem index="9" value="GcDataTypeValidator"></subitem>
                        <subitem index="9" value="データ型検証コントロール"></subitem>
                        <helpvalue ></helpvalue>
                    </im_list:GcListBox>
                </td>
            </tr>
        </table>
    </asp:Panel>

    <asp:CollapsiblePanelExtender ID="Topic4_CollapsiblePanelExtender" runat="server" Enabled="True" 
        TargetControlID="Topic4_Content" ExpandControlID="Topic4_Header" CollapseControlID="Topic4_Header"
        ImageControlID="Topic4_Image" Collapsed="true">
    </asp:CollapsiblePanelExtender>

    <asp:Panel ID="Topic4_Header" runat="server">
        <asp:Image ID="Topic4_Image1" runat="server" ImageUrl="~/images/imImages/expand.jpg" AlternateText="collapse"/>
        <span class="title">カレンダー、電卓コントロール</span>
    </asp:Panel>
    
    <asp:Panel ID="Topic4_Content" runat="server">
        <table>
            <tr>
                <td class="controlsTd" valign="top">カレンダー:</td>
                <td class="controlsTd">
                    <im_calendar:GcCalendar ID="GcCalendar1" runat='server' HasLoadFromXml="True"></im_calendar:GcCalendar>
                </td>
                <td class="controlsTd" valign="top">電卓:</td>
                <td class="controlsTd">
                    <im_calculator:GcCalculator ID="GcCalculator1" runat='server' 
                        HasLoadFromXml="True"></im_calculator:GcCalculator>
                </td>
            </tr>
        </table>
    </asp:Panel>
</asp:Content>


このページの先頭へ戻る