画面にインジケータ（ロード中のアイコン）を表示する

任意の処理を行った際にインジケータを表示する方法をご紹介します。
インジケータは、アイコンを用いて任意の処理中であること（ロード中であること）を画面に表示します。
インジケータを利用することで、任意の処理中に画面を操作されないように制御できます。

インジケータの詳細についてはAPIドキュメントのimuiIndicatorをご参照ください。

今回は例として、こちらのCookBookで作成した登録フォーム画面を利用します。

完成イメージ

＜操作方法＞

1. 商品名に任意の文字を入力します。
2. 金額に任意の数値を入力します。
3. 登録ボタンをクリックします。
4. 登録確認ダイアログの決定ボタンをクリックします。
5. インジケータが表示されることを確認できます。

[iframe width="100%" height="400" src="https://dev-portal.intra-mart.jp/imart/im_cookbook/109004/edit?imui-theme-builder-module=headwithcontainer"]

完成サンプル

以下が完成サンプルです。ダウンロードしてご活用ください。
e builder プロジェクト : im_cookbook_109004.zip
imm ファイル : im_cookbook_109004-1.0.0.imm

お手元の環境で表示させる場合は以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/109004/edit
なお、ベースURLである以下の部分は環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

1. 画面の任意の要素にインジケータを表示する。
2. インジケータを非表示にする。
3. サンプルの登録フォームでの使用例
4. まとめ

1. 画面の任意の要素にインジケータを表示する。

以下の処理を実行することで、インジケータを表示することができます。

$('#register-button').imuiIndicator();

上記はjQueryのId属性を指定して、登録ボタンに対してインジケータを表示しています。
要素の指定方法は任意の方法で問題ありませんが、jQueryオブジェクトである必要があります。

imuiIndicator()では引数に様々なオプションを設定することができます。
上記の例では、オプションに値を設定していません。
オプションが未指定の場合、デフォルトの設定が適応されます。
上記の例を実行すると「読み込み中...」という文字が表示されます。
これは、オプションのtext属性が未指定だったため、デフォルトの設定が適応された結果表示されました。
インジケータ表示中に文字を表示しない場合は以下のようにtext属性を設定することで実現できます。

$('#register-button').imuiIndicator({text: ''});

今回は一例としてtext属性をご紹介しました。
その他のオプションについての詳細はAPIドキュメントのimuiIndicatorをご参照ください。

2. インジケータを非表示にする。

表示中のインジケータは、以下の処理を実行することで非表示にすることができます。

$('#register-button').imuiIndicator('destroy');

インジケータは明示的に非表示にしない限り表示され続けます。
任意の処理が終わったタイミングで、インジケータを非表示にすることを意識してください。

3. サンプルの登録フォームでの使用例

今回使用しているサンプルの登録フォームでは以下の流れでインジケータを表示しています。

1. 登録確認ダイアログの決定ボタンクリック時に、画面全体に対してインジケータを表示する。
2. Ajax処理が終了したコールバック関数で、インジケータを非表示にする。

実際のコードは以下です。
※サンプルのコードでは、インジケータを可視化するために、setTimeout()を利用して処理を1秒遅延させています。本来不要な処理ですので、ご注意ください。

imuiConfirm(
  '登録します。よろしいですか？', // メッセージ
  '登録確認',  // タイトル
  function() { // OKクリック時のコールバック関数
    // インジケータを表示
    $(document.body).imuiIndicator({'text': '登録処理中です。しばらくお待ち下さい', 'opacity': 60});
    setTimeout(function() {
      // Ajaxでのデータ送信
      imuiAjaxSend('#form', 'POST', 'json', function(){
        // インジケータを非表示
        $(document.body).imuiIndicator('destroy');
      });
    }, 1000);
  }
);

4. まとめ

インジケータのメリットとしては、以下が挙げられます。

• 任意の処理中に画面を操作されないようにできること。
• ユーザが、処理中であることをグラフィカルに理解できること。

この記事を参考にimuiIndicator()をご活用してみてはいかがでしょうか。