好久没有碰easyUI，打算重新搭一套前后台通用的标准框架，于是重新接触KendoUI，另外有几款轻量的前台展示UI也很不错：chico框架，w2ui，Wijmo（非常棒），抉择了一下，决定用KendoUI。

简单介绍一下KendoUI

1. web版本free

2. 非常专业的Html5 MVVM标准框架，接口统一，绑定丰富

3. 渲染速度很快

4. 报表是亮点

5. ……

好了，废话少说， 框架虽然不错，但是基本的Widget有缺失，比如form，layout，messagebox，进度条等等。

 

 

本章手动写一个messagebox

 

思路：虽然没有messagebox，但我们可以用它本身的window这个插件封装，做为一个messageBox原型

建一个方法定义，返回一个div层

kendo.ui.ExtAlertDialog = {
        show: function (options) {
            return new $.Deferred(function (deferred) {
                var dialog = null;
              
                if ($("#extAlertDialog").length > 0) {
                    $("#extAlertDialog").parent().remove();
                }
              
                options = $.extend({
                    width: "300px",
                    height: "100px",
                    buttons: [{
                        name: "OK",
                        click: function (e) {
                            dialog.close();
                            deferred.resolve({ button: "OK" });
                        }
                    }],
                    modal: true,
                    visible: false,
                    message: "",
                    icon: "k-ext-information"
                }, options);
              
                $(document.body).append(kendo.format("<div id='extAlertDialog' style='position:relative;'><div style='position:absolute;left:10px;top:10px;' class='{0}'></div><div style='display:inline-block;margin-left:45px;'>{1}</div></div>", options.icon, options.message));
                dialog = $("#extAlertDialog").kendoExtDialog(options).data("kendoExtDialog");
                $("#extAlertDialog").parent().find("div.k-window-titlebar div.k-window-actions").empty();
                dialog.center().open();
            });
        },
              
        hide: function () {
            $("#extAlertDialog").data("kendoExtDialog").close();
        }
    };

 

调用：

$.when(kendo.ui.ExtAlertDialog.show({
                title: "Alert!", 
                message: "This is a sample alert box",
                icon: "k-ext-information" })
            ).done(function () {
                alert("click [OK] button");
            });

 

tips：ExtDialog是定义的一个变量，需声明

var ExtDialog = kendo.ui.Window.extend({
        _buttonTemplate: kendo.template('<div class="k-ext-dialog-buttons" style="position:absolute; bottom:10px; text-align:center; width:#= parseInt(width) - 14 #px;"><div style="display:inline-block"># $.each (buttons, function (idx, button) { # <button class="k-button" style="margin-right:5px; width:100px;">#= button.name #</button> # }) # </div></div>'),
        _contentTemplate: kendo.template('<div class="k-ext-dialog-content" style="height:#= parseInt(height) - 55 #px;; width:#= parseInt(width) - 14 #px;overflow:auto;">'),
   
        init: function (element, options) {
            /// <signature>
            ///   <summary>
            ///   Initialize the dialog.
            ///   </summary>
            /// </signature>
   
            var that = this;
   
            options.visible = options.visible || false;
   
            kendo.ui.Window.fn.init.call(that, element, options);
            $(element).data("kendoWindow", that);
   
            var html = $(element).html();
            $(element).html(that._contentTemplate(options));
            $(element).find("div.k-ext-dialog-content").append(html);
   
            $(element).after(that._buttonTemplate(options));
   
            $.each(options.buttons, function (idx, button) {
                if (button.click) {
                    $($(element).parent().find(".k-ext-dialog-buttons .k-button")[idx]).on("click", { handler: button.click }, function (e) {
                        e.data.handler({ button: this, dialog: that });
                    });
                }
            });
   
            that.bind("resize", function (e) {
                that.resizeDialog();
            });
        },
   
        resizeDialog: function () {
            var that = this;
            var $dialog = $(that.element);
            var width = $dialog.width();
            var height = $dialog.height();
            $dialog.parent().find(".k-ext-dialog-buttons").width(width);
            $dialog.parent().find(".k-ext-dialog-content").width(width).height(height - 39);
        },
   
        options: {
            name: "ExtDialog"
        }
    });
    kendo.ui.plugin(ExtDialog);