kendo 加載框 菊花 控件

問題：kendo那麼高端大氣上檔次的後臺前端開發框架，競然沒有菊花控件真是讓人大跌眼鏡。

解決辦法：親手集成一個菊花控件。代碼如下：

/*******************************
*
*        author : codec007
*        date   : 20150306
*        email  : [email protected]
*   pluginname  : LoadingMask
*
******************************/
(function ($) {
    // shorten references to variables. this is better for uglification
    var kendo = window.kendo,
        ui = kendo.ui,
        widget = ui.Widget;

    var loadingMask = widget.extend({
        // initialization code goes here
        init: function (element, options) {

            // base call to initialize widget
            kendo.ui.Widget.fn.init.call(this, element, options);
        },
        show: function () {
            var that = this,
                container = that.element;
            var mask = container.find(".k-loading-mask"),
                    support = kendo.support,
                    browser = support.browser,
                    isRtl, leftRight, webkitCorrection, containerScrollLeft;

            isRtl = support.isRtl(container);
            leftRight = isRtl ? "right" : "left";
            containerScrollLeft = container.scrollLeft();
            webkitCorrection = browser.webkit ? (!isRtl ? 0 : container[0].scrollWidth - container.width() - 2 * containerScrollLeft) : 0;

            $("<div class='k-loading-mask'><span class='k-loading-text'>" + that.options.text + "</span><div class='k-loading-image'/><div class='k-loading-color'/></div>")
                .width("100%").height("100%")
                .css("top", container.scrollTop())
                .css(leftRight, Math.abs(containerScrollLeft) + webkitCorrection)
                .appendTo(container);
        },
        hide: function () {
            var that = this;
            that.element.find(".k-loading-mask").remove();
        },
        options: {
            // the name is what it will appear as off the kendo namespace(i.e. kendo.ui.MyWidget).
            // The jQuery plugin would be jQuery.fn.kendoMyWidget.
            name: "LoadingMask",
            // other options go here
            text: '加載中...'
        }
    });
    kendo.ui.plugin(loadingMask);
})(window.kendo.jQuery);

調用代碼：

在指定的區域展示菊花

$("#loginForm").kendoLoadingMask().data("kendoLoadingMask").show();

讓菊花消失

$("#loginForm").data("kendoLoadingMask").hide();

效果圖：我用的此套皮膚的菊花是條型的