转自： http://www.itnose.net/detail/6157288.html
摘要：

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

特点：

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

  dialog.js

    1 var dialog = kendo.ui.Window.extend({2     // set options3     options: {4         name              : 'GDialog',    // widget name5         onOk              : $.noop,6         okText            : '确定',7         cancelText        : '取消',8         defaultButtons    : 'OK_CANCEL',  //'OK' || 'OK_CANCEL' || 'CANCEL' || 'NULL'9         extraButtons      : [],           //[ { text:'ok', className: '', click:function(){} }]10         appendTo  : 'body',11         minWidth  : 400,12         minHeight : 100,13         resizable : false,14         actions   : ['Close'],            // ['Minimize', 'Maximize', 'Close']15         autohide  : false,16         time      : 100017     },18     // Init method19     init: function(element, options){20         var me = this;21         // Call super.init22         kendo.ui.Window.fn.init.call(this, element, options);23 24         // Add buttons25         var $buttonsArea = this._addButtons(element, options);26 27         // Set styles28         this.wrapper.addClass('k-dialog');29         $buttonsArea.addClass('k-button-area');30 31         // Set the dialog's position by default32         if (!options || !options.position){ this.center(); }33 34         // if the autohide is setted true that aftering a time auto hide the dialog. default is 1s.35         if(this.options.autohide) {36             setTimeout(function() {37                 kendo.ui.Window.fn.close.call(me);38             },this.options.time);39         }40     },41     open: function(){42         // Call super.open43         kendo.ui.Window.fn.open.call(this);44     },45     minimize: function(){46         // Call super.minimize47         kendo.ui.Window.fn.minimize.call(this);48 49         $(this.buttonsArea).hide();50         this.wrapper.css('padding-bottom', '0');51     },52     restore: function(){53         // Call super.restore54         kendo.ui.Window.fn.restore.call(this);55 56         $(this.buttonsArea).show();57         this.wrapper.css('padding-bottom', '51px');58     },59     center: function(){60 61         if (this.options.isMaximized){ return this; }62 63         // Call super.center64         kendo.ui.Window.fn.center.call(this);65 66         var that           = this,67             position       = that.options.position,68             wrapper        = that.wrapper,69             documentWindow = $(window),70             scrollTop      = 0,71             newTop;72 73         if (!that.options.pinned){ scrollTop = documentWindow.scrollTop(); }74 75         newTop = scrollTop + Math.max(0,76                 (documentWindow.height() - wrapper.height() - 50 - parseInt(wrapper.css("paddingTop"), 10)) / 2);77 78         wrapper.css({ top: newTop });79 80         position.top = newTop;81 82         return that;83     },84     _onDocumentResize: function(){85         if (!this.options.isMaximized){ return; }86 87         // Call super._onDocumentResize88         kendo.ui.Window.fn._onDocumentResize.call(this);89 90         this._fixWrapperHeight();91     },92     _fixWrapperHeight: function(){93         var height = (this.wrapper.height() - 51).toString() + 'px';94         this.wrapper.css('height', height);95     },96     // Add buttons to the dialog97     _addButtons: function(element, options){98 99         var that    = this,
  100             buttons = this.options.extraButtons.slice(0);
  101 
  102         var nullPattern    = /NULL/gi, okPattern = /OK/gi, cancelPattern = /CANCEL/gi,
  103             defaultButtons = {
  104                 buttonOk     : {text: that.options.okText,     className:'ok-btn'   , click:function(e){
  105                     that.options.onOk.call(that, e);
  106                     return false;
  107                 }},
  108                 buttonCancel : {text: that.options.cancelText, className:'close-btn', click:function(e){
  109                     e.preventDefault(); that.close();
  110                 }}
  111             };
  112 
  113         // Append default buttons
  114         if (!nullPattern.test(this.options.defaultButtons)){
  115             okPattern.test(this.options.defaultButtons) &&
  116                buttons.unshift(defaultButtons.buttonOk);
  117             cancelPattern.test(this.options.defaultButtons) &&
  118                buttons.unshift(defaultButtons.buttonCancel);
  119         }
  120 
  121         // Make button area
  122         var buttonsArea  = document.createElement('div'),
  123             $buttonsArea = $(buttonsArea);
  124         this.buttonsArea = buttonsArea;
  125 
  126         // Make buttons and set buttons' attributes
  127         for (var i = buttons.length - 1; i >= 0; --i){
  128             var $aEl = $(document.createElement('a'));
  129             /*eslint no-script-url: 0*/
  130             $aEl.html(buttons[i].text)
  131                 .addClass('k-dialog-button')
  132                 .addClass(buttons[i].className)
  133                 .attr({href:'javascript:;'})
  134                 .on('click', buttons[i].click)
  135                 .kendoButton();
  136             $buttonsArea.append($aEl);
  137         }
  138 
  139         this.wrapper.append($buttonsArea);
  140 
  141         return $buttonsArea;
  142     }
  143 });
  144 
  145 kendo.ui.plugin(dialog);

   

  dialog.html

   1 <!DOCTYPE html>2 <html>3 <head>4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">5     <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css" />6     <link rel="stylesheet" type="text/css" href="style/dialog.css" />7 </head>8 <body>9     <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
  10     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
  11     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
  12     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
  13     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>
  14     <div id="dialog"></div>
  15     <script src="js/dialog.js"></script>
  16     <script>
  17         var dialog = $('#dialog').kendoGDialog({title:"弹窗"}).data('kendoGDialog');
  18     </script>
  19 </body>
  20 </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就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

   

  下载代码