Kendo UI 的弹框

弹出代码：

"use strict";
(function (kendo) {
    kendo.messageShow = function (message, option) {
        var $ = kendo.jQuery;
        var kendoMessageName = "_For_Message";
        var kendoMessageDomName = "_For_MessageDom";
        var msgId = "For_Message_Id";
        var msgOkId = "For_Message_Ok";
        var _kendoMessage = kendo[kendoMessageName];
        var _kendoMessageDom = kendo[kendoMessageDomName];
        var iconSpan = "";
        var defaultOption = {
            width: "400px",
            height: "150px",
            title: HRWTMS.Lang.ts("Message"),
            actions: [
                "Close"
            ],
            icon: "k-i-info",//k-i-warning,k-i-info,k-i-bell
            modal: true,
            okText: '&nbsp&nbspOK&nbsp&nbsp',
            okClick: function (kendoMessage) { kendoMessage.close(); }
        };

        $.extend(defaultOption, option);
        defaultOption.button = { text: defaultOption.okText, callback: defaultOption.okClick };
        if (defaultOption.icon) {
            iconSpan = '<i class="k-icon ' + defaultOption.icon + '"></i>';
        }
        if (_kendoMessage) {
            _kendoMessage.setOptions(defaultOption);
            _kendoMessageDom.children("#" + msgId).html(iconSpan + message);
            _kendoMessageDom.find("#" + msgOkId).html(defaultOption.okText);
            _kendoMessage.center();
            _kendoMessage.open();
        } else {
            var html = '<div><div id="' + msgId + '" style="height: 60%;margin:8px;overflow:hidden;" >' + iconSpan + message + '</div>' +
                '<div class="k-edit-buttons k-state-default k-window-action" style="text-align:center;margin: 8px;">' +
                '<button id="' + msgOkId + '" type="button" class="k-button">' + defaultOption.button.text + '</button></div></div>';//<a href="#" class="k-button">

            _kendoMessageDom = $(html);
            _kendoMessageDom.kendoWindow(defaultOption);
            _kendoMessage = _kendoMessageDom.data("kendoWindow");
            _kendoMessage.center();
            _kendoMessage.open();
            _kendoMessageDom.find("#" + msgOkId).click(function () { _kendoMessage.options.button.callback(_kendoMessage); });
            kendo[kendoMessageName] = _kendoMessage;
            kendo[kendoMessageDomName] = _kendoMessageDom;
        }
        return _kendoMessageDom;
    },
	kendo.confirmShow = function (message, option) {
	    var $ = kendo.jQuery;
	    var kendoConfirmName = "_For_Confirm";
	    var kendoConfirmDomDomName = "_For_ConfirmDom";
	    var msgId = "For_Confirm_Id";
	    var msgOkId = "For_Confirm_Ok";
	    var msgCancelId = "For_Confirm_Cancel";
	    var _kendoConfirm = kendo[kendoConfirmName];
	    var _kendoConfirmDom = kendo[kendoConfirmDomDomName];
	    var iconSpan;
	    var defaultOption = {
	        width: "400px",
	        height: "150px",
	        title: HRWTMS.Lang.ts("Confirm"),
	        resizable: false,
	        actions: [
                "Close"
	        ],
	        modal: true,
	        okText: '&nbsp&nbspOK&nbsp&nbsp',
	        okClick: function (kendoMessage) { kendoMessage.close(); },
	        cancelText: '&nbsp&nbspCancel&nbsp&nbsp',
	        cancelClick: function (kendoMessage) { kendoMessage.close(); }
	    };

	    $.extend(defaultOption, option);
	    defaultOption.ok = { text: defaultOption.okText, callback: defaultOption.okClick };
	    defaultOption.cancel = { text: defaultOption.cancelText, callback: defaultOption.cancelClick };
	    iconSpan = '<i class="k-icon k-i-question"></i>';
	    if (_kendoConfirm) {
	        _kendoConfirm.setOptions(defaultOption);
	        _kendoConfirmDom.children("#" + msgId).html(iconSpan + message);
	        _kendoConfirmDom.find("#" + msgOkId).html(defaultOption.okText);
	        _kendoConfirmDom.find("#" + msgCancelId).html(defaultOption.cancelText);
	        _kendoConfirm.center();
	        _kendoConfirm.open();
	    } else {
	        var html = '<div><div id="' + msgId + '" style="height: 60%;margin:8px;overflow:hidden;" >' + iconSpan + message + '</div>' +
                '<div class="k-edit-buttons k-state-default k-window-action" style="text-align:center;margin: 8px;">' +
                '<button type="button" class="k-button" id="' + msgOkId + '" style="margin-right:8px;">' + defaultOption.ok.text + '</button>' +
                '<button type="button" class="k-button" id="' + msgCancelId + '">' + defaultOption.cancel.text + '</button></div></div>';

	        _kendoConfirmDom = $(html);
	        _kendoConfirmDom.kendoWindow(defaultOption);
	        _kendoConfirm = _kendoConfirmDom.data("kendoWindow");
	        _kendoConfirm.center();
	        _kendoConfirm.open();
	        _kendoConfirmDom.find("#" + msgOkId).click(function () { _kendoConfirm.options.ok.callback(_kendoConfirm); });
	        _kendoConfirmDom.find("#" + msgCancelId).click(function () { _kendoConfirm.options.cancel.callback(_kendoConfirm); });
	        kendo[kendoConfirmName] = _kendoConfirm;
	        kendo[kendoConfirmDomDomName] = _kendoConfirmDom;
	    }
	    return _kendoConfirmDom;
	}
})(kendo);

　　

使用方式：

var msgOpt = {
};

msgOpt.okClick = function (sender) {
                        sender.close();
                    }

kendo.messageShow("Info", msgOpt);

　　

 var confirmOpt = {
};

confirmOpt.okClick = function (sender) {
    sender.close();
}

kendo.confirmShow("Info", confirmOpt);

　　

在提示内容添加控件

var opt = {};
var msgDom;
var id = "DueDatePicker";
var DueDatePicker;
var msg = "输入Due Date" + '<input id="' + id + '" />';
opt.okText = "Confirm";
opt.icon = "";
opt.okClick = function (sender) {
    if (DueDatePicker.value()) {
              sender.close();
         } else {
                  kendo.messageShow("please input due date");
          }
}
msgDom = kendo.messageShow(msg, opt);
DueDatePicker = $(msgDom.find("#" + id)).kendoDatePicker({
            min: new Date(),
             format: "yyyy-MM-dd"
 }).data("kendoDatePicker");

　　

 

转载于:https://www.cnblogs.com/magic_evan/p/8404138.html