クルクルするやつをチョット豪華にする

f:id:vzc00525:20190511204543p:plain

メソッドを用意します

    /*
     * ローダー表示、表示中判定
     */
    export function isBusy(value?: boolean): boolean {
        // オフライン
        if (isOffline() === true) {
            return true;
        }

        let loader = $(".ui-loader");

        if (typeof value === "undefined") {
            return loader.isVisible();
        }

        if (value === true) {
            if (loader.isVisible() === true) {
                return true;
            }

            $("body").addClass("ui-disabled").css("opacity", 1);

            let content = "";
            content += "<div class='ui-img-loading'></div>";
            content += "<span class='ui-icon-loading'></span>";
            content += "<h1>Wait…</h1>";

            // html表示、他の設定も必要
            $.mobile.loading("show", {
                html: content
                , textVisible: true
                , textonly: false
            });

            // 中央揃え
            let h = loader.outerHeight();
            let w = loader.outerWidth();
            loader.css({
                "margin-top": -h / 2
                , "margin-left": -w / 2
            });

            return false;

        } else {
            $.mobile.loading("hide");
            $("body").removeClass("ui-disabled");
            return false;
        }
    }
    }

表示文字は面倒なので固定です

cm.isBusy()　表示中か判定します
cm.isBusy(true)　表示します　既に表示中の場合はtrueを返します
cm.isBusy(true)　非表示にします

CSSで体裁を整えます
/Src/cm.css

/*
  Loader
*/
div.ui-loader {
  width: auto;
  min-width: 12.5em;
  border: 1px solid #ccc;
}

  div.ui-loader > div.ui-img-loading {
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: center;
    background-size: contain;
    background-color: white;
    -moz-background-origin: content-box;
    -webkit-background-origin: content-box;
    background-origin: content-box;
  }

表示する画像はCSSで追加、app.cssかhtmlに記述します
/Views/Table/Index.html

<head>

   ....

  <style type="text/css">

    ....

    .ui-loader > .ui-img-loading {
      background-image: url('../imgs/logo.png');
      height: 150px;
      width: 300px;
    }
  </style>
</head>

サンプルです
ツールバーのrefreshアイコンのボタンにcmd='refresh'としておきます
/Src/table.ts

    namespace Page1 {

        ...

	/*
	 * ツールバーボタン押下
	 */
        $(document).on("click", "#page1_toolbar1 .ui-btn", function (event: Event) {
            let cmd = $(this).attr("cmd");

            switch (cmd) {
                case "refresh":
                    if (cm.isBusy(true) === true) {
                        return;
                    }
                    setTimeout(function () {
                        cm.isBusy(false);
                    }, 10000);
                    break;
            }
        });

        ...

    }