[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

対象要素

ツアーコンポーネント（GcTour）のステップに追加できる対象要素を以下の方法で指定できます。

InputManJSの入力コントロール

InputManJSの各種コントロールインスタンスを直接指定できます。設定できるコントロールは以下の通りです。

  • テキストコントロール(GcTextBox)

  • 複数行テキストコントロール(GcMultiLineTextBox)

  • マスクコントロール(GcMask)

  • コンボコントロール(GcComboBox)

  • 数値コントロール(GcNumber)

  • 日付時刻コントロール(GcDateTime)

  • タグボックスコントロール(GcTagBox)

次のサンプルコードでは、ステップの対象要素にInputManJSのテキストコントロールを追加する例です。

const username = new InputMan.GcTextBox(document.getElementById('username'), {
  watermarkDisplayNullText: '例）入力太郎',
  width: 250,
  height: 32,
});
const gctour = new InputMan.GcTour({
  steps: [
    {
      target: username,
      title: 'お名前',
      description: 'お名前を入力してください',
    },
  ],
});

CSSセレクタ

対象要素のCSSセレクタを文字列で指定します。

次のサンプルコードでは、ステップの対象要素にCSSセレクタを追加する例です。

<div id="input2"></div>
const gctour = new InputMan.GcTour({
  steps: [
    {
      target: '#input2', 
      title: 'メールアドレス',
      description: 'メールアドレスを入力してください',
    }
  ],
});

DOM要素

DOM要素を直接取得して指定します。document.getElementByIdやdocument.querySelectorなどの標準的なDOM APIを使用して要素を取得できます。

次のサンプルコードでは、ステップの対象要素にDOM要素を直接指定する例です。

<div id="input2"></div>
<div id="input3"></div>
const gctour = new InputMan.GcTour({
  steps: [
    {
      target: document.getElementById('input2'),
      title: '住所',
      description: 'ご住所を入力してください',
    },
    {
      target: document.querySelector('#input3'),
      title: '郵便番号',
      description: '郵便番号を入力してください',
    },
  ],
});

外部のUIライブラリ

InputManJS以外のUIライブラリのコントロールも対象として指定できます。例：wijmoの入力コントロール

import * as input from '@mescius/wijmo.input';

const wijmoInput = new input.InputNumber('#wijmoInput');
const gctour = new InputMan.GcTour({
  steps: [
    {
      target: wijmoInput,
      title: 'InputNumberコントロール',
      description: 'wijmoのInputNumberを使用しています。',
    },
  ],
});

指定しない

targetプロパティを指定しない場合、画面の中央にツールチップを表示します。

const gctour = new InputMan.GcTour({
  steps: [
    {
      title: 'アカウント登録フォームへようこそ',
      description: '会員情報を入力し、送信してください。',
    },
  ],
});

image