タッチ機能 - タッチツールバー -

タッチ操作により表示されるタッチツールバーを提供します。
※この機能はInternet Explorer 10以降、およびタッチデバイス使用時に動作します。

テキスト: マスク:
日付時刻: 数値:
日付: コンボ:
時刻: 郵便番号:
タッチツールバーの表示方法

ソースコード

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

public partial class Touch_TouchToolBar : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // 初期値を設定します。
            GcComboBox1.SelectedIndex = 0;
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        // タッチツールバーの表示方法を設定します。
        int option = 0;

        if (CheckBox1.Checked)
        {
            option = option | (int)TouchToolBarDisplayOptions.PressAndHold;
        }
        if (CheckBox2.Checked)
        {
            option = option | (int)TouchToolBarDisplayOptions.TapSelection;
        }

        GcTextBox1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcMask1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcDateTime1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcDate1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcTime1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcNumber1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcComboBox1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
        GcPostal1.ShowTouchToolBar = (TouchToolBarDisplayOptions)option;
    }
}
Imports GrapeCity.Web.Input.Core

Partial Class Touch_TouchToolBar
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            ' 初期値を設定します
            GcComboBox1.SelectedIndex = 0
        End If
    End Sub

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim DisplayOption As Integer = 0

        If CheckBox1.Checked Then
            DisplayOption = DisplayOption Or TouchToolBarDisplayOptions.PressAndHold
        End If
        If CheckBox2.Checked Then
            DisplayOption = DisplayOption Or TouchToolBarDisplayOptions.TapSelection
        End If

        GcTextBox1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcMask1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcDateTime1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcDate1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcTime1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcNumber1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcComboBox1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
        GcPostal1.ShowTouchToolBar = CType(DisplayOption, TouchToolBarDisplayOptions)
    End Sub
End Class

<%@ page title="" language="C#" masterpagefile="~/MasterPage.master" autoeventwireup="true" inherits="Touch_TouchToolBar, App_Web_tz1sshx0" theme="SkinFile" %>

<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMEdit" tagprefix="im_edit" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMCombo" tagprefix="im_combo" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMDate" tagprefix="im_date" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMMask" tagprefix="im_mask" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, Culture=neutral, PublicKeyToken=c3bd7c1dccef5128" namespace="GrapeCity.Web.Input.IMPostal" tagprefix="im_postal" %>
<%@ Register assembly="GrapeCity.Web.Input.v100, Version=10.0.4006.2012, 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 SetTouchToolBar() {
            if (!document.getElementById("isClient").checked) return;

            var param = "";
            if (document.getElementById("<% =CheckBox1.ClientID %>").checked && !document.getElementById("<% =CheckBox2.ClientID %>").checked) {
                param = "pressandhold";
            }
            else if (!document.getElementById("<% =CheckBox1.ClientID %>").checked && document.getElementById("<% =CheckBox2.ClientID %>").checked) {
                param = "tapselection";
            }
            else if (document.getElementById("<% =CheckBox1.ClientID %>").checked && document.getElementById("<% =CheckBox2.ClientID %>").checked) {
                param = "pressandhold, tapselection";
            }
            FindIMControl("<%= GcTextBox1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcMask1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcDateTime1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcNumber1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcDate1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcComboBox1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcTime1.ClientID %>").SetShowTouchToolBar(param);
            FindIMControl("<%= GcPostal1.ClientID %>").SetShowTouchToolBar(param);
        }
    </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" Text="テキストコントロール" Width="200px"></im_edit:GcTextBox>
            </td>
            <td class="controlsTd">マスク:</td>
            <td class="controlsTd">
                <im_mask:GcMask ID="GcMask1" runat="server" HasLoadFromXml="True" Width="200px"><Format Pattern="TEL \D{2,4}-\D{2,4}-\D{4}" /></im_mask:GcMask>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">日付時刻:</td>
            <td class="controlsTd">
                <im_date:GcDateTime ID="GcDateTime1" runat="server" HasLoadFromXml="True" Width="200px"></im_date:GcDateTime>
            </td>
            <td class="controlsTd">数値:</td>
            <td class="controlsTd">
                <im_number:GcNumber ID="GcNumber1" runat="server" HasLoadFromXml="True" Width="200px"></im_number:GcNumber>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">日付:</td>
            <td class="controlsTd">
                <im_date:GcDate ID="GcDate1" runat="server" HasLoadFromXml="True" Width="200px"></im_date:GcDate>
            </td>
            <td class="controlsTd">コンボ:</td>
            <td class="controlsTd">
                <im_combo:GcComboBox ID="GcComboBox1" runat="server" HasLoadFromXml="True" Width="200px"><comboitem></comboitem>
                    <subitem index="0" value="項目1"></subitem>
                    <comboitem></comboitem>
                    <subitem index="1" value="項目2"></subitem>
                    <comboitem></comboitem>
                    <subitem index="2" value="項目3"></subitem>
                    <comboitem></comboitem>
                    <subitem index="3" value="項目4"></subitem>
                    <helpvalue ></helpvalue>
                </im_combo:GcComboBox>
            </td>
        </tr>
        <tr>
            <td class="controlsTd">時刻:</td>
            <td class="controlsTd">
                <im_date:GcTime ID="GcTime1" runat="server" HasLoadFromXml="True" Width="200px"></im_date:GcTime>
            </td>
            <td class="controlsTd">郵便番号:</td>
            <td class="controlsTd">
                <im_postal:GcPostal ID="GcPostal1" runat="server" HasLoadFromXml="True" Width="200px">
                </im_postal:GcPostal>
            </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="SetTouchToolBar();" /><br />
                <asp:CheckBox ID="CheckBox2" runat="server" Text="選択テキストのタップで表示" onclick="SetTouchToolBar();" />
            </td>
        </tr>
    </table>
    <center>
        <asp:Button ID="Button1" runat="server" Text="サーバー側で設定"  
            onclick="Button1_Click" CssClass="button_nowidth" />
    </center>
</asp:Content>


このページの先頭へ戻る