开发kendo-ui弹窗组件

2024-04-27 14:16:28

字体：大中小

来源：转载

供稿：网友

开发kendo-ui弹窗组件

摘要：

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

特点：

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

代码：

dialog.js

  1 var dialog = kendo.ui.Window.extend({  2     // set options  3     options: {  4         name              : 'GDialog',    // widget name  5         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      : 1000 17     }, 18     // Init method 19     init: function(element, options){ 20         var me = this; 21         // Call super.init 22         kendo.ui.Window.fn.init.call(this, element, options); 23  24         // Add buttons 25         var $buttonsArea = this._addButtons(element, options); 26  27         // Set styles 28         this.wrapper.addClass('k-dialog'); 29         $buttonsArea.addClass('k-button-area'); 30  31         // Set the dialog's position by default 32         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.open 43         kendo.ui.Window.fn.open.call(this); 44     }, 45     minimize: function(){ 46         // Call super.minimize 47         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.restore 54         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.center 64         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._onDocumentResize 88         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 dialog 97     _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 buttons114         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 area122         var buttonsArea  = document.createElement('div'),123             $buttonsArea = $(buttonsArea);124         this.buttonsArea = buttonsArea;125 126         // Make buttons and set buttons' attributes127         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>