开发kendo-ui弹窗组件

摘要：

　　kendo-ui中只是提供了windwo插件，并没有提供页内弹窗插件。现在分享项目中自己定制的基于window组件的弹窗插件，如果你的项目也是用的kendo-ui，只需要将组件代码引到项目中即可。

特点：

• 支持定时自动关闭弹窗
• 按钮自定义
• 支持最大化最小化

代码：

dialog.js

var dialog = kendo.ui.Window.extend({
    // set options
    options: {
        name              : 'GDialog',    // widget name
        onOk              : $.noop,
        okText            : '确定',
        cancelText        : '取消',
        defaultButtons    : 'OK_CANCEL',  //'OK' || 'OK_CANCEL' || 'CANCEL' || 'NULL'
        extraButtons      : [],           //[ { text:'ok', className: '', click:function(){} }]
        appendTo  : 'body',
        minWidth  : 400,
        minHeight : 100,
        resizable : false,
        actions   : ['Close'],            // ['Minimize', 'Maximize', 'Close']
        autohide  : false,
        time      : 1000
    },
    // Init method
    init: function(element, options){
        var me = this;
        // Call super.init
        kendo.ui.Window.fn.init.call(this, element, options);

        // Add buttons
        var $buttonsArea = this._addButtons(element, options);

        // Set styles
        this.wrapper.addClass('k-dialog');
        $buttonsArea.addClass('k-button-area');

        // Set the dialog's position by default
        if (!options || !options.position){ this.center(); }

        // if the autohide is setted true that aftering a time auto hide the dialog. default is 1s.
        if(this.options.autohide) {
            setTimeout(function() {
                kendo.ui.Window.fn.close.call(me);
            },this.options.time);
        }
    },
    open: function(){
        // Call super.open
        kendo.ui.Window.fn.open.call(this);
    },
    minimize: function(){
        // Call super.minimize
        kendo.ui.Window.fn.minimize.call(this);

        $(this.buttonsArea).hide();
        this.wrapper.css('padding-bottom', '0');
    },
    restore: function(){
        // Call super.restore
        kendo.ui.Window.fn.restore.call(this);

        $(this.buttonsArea).show();
        this.wrapper.css('padding-bottom', '51px');
    },
    center: function(){

        if (this.options.isMaximized){ return this; }

        // Call super.center
        kendo.ui.Window.fn.center.call(this);

        var that           = this,
            position       = that.options.position,
            wrapper        = that.wrapper,
            documentWindow = $(window),
            scrollTop      = 0,
            newTop;

        if (!that.options.pinned){ scrollTop = documentWindow.scrollTop(); }

        newTop = scrollTop + Math.max(0,
                (documentWindow.height() - wrapper.height() - 50 - parseInt(wrapper.css("paddingTop"), 10)) / 2);

        wrapper.css({ top: newTop });

        position.top = newTop;

        return that;
    },
    _onDocumentResize: function(){
        if (!this.options.isMaximized){ return; }

        // Call super._onDocumentResize
        kendo.ui.Window.fn._onDocumentResize.call(this);

        this._fixWrapperHeight();
    },
    _fixWrapperHeight: function(){
        var height = (this.wrapper.height() - 51).toString() + 'px';
        this.wrapper.css('height', height);
    },
    // Add buttons to the dialog
    _addButtons: function(element, options){

        var that    = this,
            buttons = this.options.extraButtons.slice(0);

        var nullPattern    = /NULL/gi, okPattern = /OK/gi, cancelPattern = /CANCEL/gi,
            defaultButtons = {
                buttonOk     : {text: that.options.okText,     className:'ok-btn'   , click:function(e){
                    that.options.onOk.call(that, e);
                    return false;
                }},
                buttonCancel : {text: that.options.cancelText, className:'close-btn', click:function(e){
                    e.preventDefault(); that.close();
                }}
            };

        // Append default buttons
        if (!nullPattern.test(this.options.defaultButtons)){
            okPattern.test(this.options.defaultButtons) &&
               buttons.unshift(defaultButtons.buttonOk);
            cancelPattern.test(this.options.defaultButtons) &&
               buttons.unshift(defaultButtons.buttonCancel);
        }

        // Make button area
        var buttonsArea  = document.createElement('div'),
            $buttonsArea = $(buttonsArea);
        this.buttonsArea = buttonsArea;

        // Make buttons and set buttons' attributes
        for (var i = buttons.length - 1; i >= 0; --i){
            var $aEl = $(document.createElement('a'));
            /*eslint no-script-url: 0*/
            $aEl.html(buttons[i].text)
                .addClass('k-dialog-button')
                .addClass(buttons[i].className)
                .attr({href:'javascript:;'})
                .on('click', buttons[i].click)
                .kendoButton();
            $buttonsArea.append($aEl);
        }

        this.wrapper.append($buttonsArea);

        return $buttonsArea;
    }
});

kendo.ui.plugin(dialog);

dialog.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="style/dialog.css" />
</head>
<body>
    <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
    <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>
    <div id="dialog"></div>
    <script src="js/dialog.js"></script>
    <script>
        var dialog = $('#dialog').kendoGDialog({title:"弹窗"}).data('kendoGDialog');
    </script>
</body>
</html>

附录：

属性：

	含义	类型	default	例子
content	弹出内容	string，function	宿主元素的内容	$("#dialog").kendoGDialog({   content: {     url: "/userDetails",     dataType: "json",     template: "User name: #= data.username #"   } });
iframe	是否已iframe方式显示弹窗	bool	FALSE
onOk	点击确定执行的事件	function		var dialog = $('#dialog').kendoGDialog({             onOk: function() {                 dialog.close();             }         }).data('kendoGDialog');
okText	确定按钮文本	string	'确定'
cancelText	取消按钮文本	string	'取消'
defaultButtons	默认显示按钮	string（'OK' || 'OK_CANCEL' || 'CANCEL' || 'NULL'）	'OK_CANCEL'
extraButtons	自定义的按钮	array	空	var dialog = $('#dialog').kendoGDialog({             extraButtons: [{                 text:'按钮', className: '', click:function(){                                    }             }]         }).data('kendoGDialog');
appendTo	将弹窗插入到	string	'body'
height	弹窗高度	number
width	弹窗宽度	number
minWidth	弹窗最小宽度	number	500
maxWidth	弹窗最大宽度	number
minHeight	弹窗最小高度	number	200
maxHeight	弹窗最大高度	number
visible	弹窗是否可见	bool	TRUE
position	弹窗位置	Object		$("#dialog").kendoGDialog({   position: {     top: 100,     left: 200   } })
resizable	重置弹窗大小	bool	TRUE
actions	弹窗工具组件	array（ "Close", "Refresh", "Minimize", and "Maximize" ）	['Close']
title	弹窗标题	string	""
autohide	自动关闭	bool	FALSE
time	自动关闭时间	number	1000(ms)
draggable	是否可以拖动	bool	TRUE
resize	当改变弹窗大小时触发事件	function
refresh	当内容加载完成或者点击刷新按钮内容加载完成时触发事件	function
open	打开弹窗触发事件	function
error	当异步加载内容出错时触发事件	function
dragstart	开始移动弹窗时触发事件	function
dragend	结束移动弹窗时触发事件	function
deactivate	当弹窗关闭结束之后执行事件	function
close	关闭弹窗时执行事件	function
activate	当弹窗打开之后执行的事件	function

方法： 

方法	含义	例子dialog = $('#dialog').data('kendoGDialog')
open	打开弹窗	dialog.open();
center	设置弹窗居中	dialog.center();
close	关闭弹窗	dialog.close();
destroy	销毁弹窗	dialog.destroy();
refresh	刷新弹窗内容	dialog.refresh();
setOptions	设置弹窗参数	dialog.setOptions({             title: '标题' });
content	设置弹窗内容	dialog.content('弹窗内容');
maximize	最大化	dialog.maximize();
minimize	最小化	dialog.minimize();
title	弹窗标题	dialog.title();

注意：

    工具栏的图片是我自己做的，制作了一个关闭按钮，刷新、最大化、最小化没有做。如果项目中引用了kendo-ui就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

下载代码