开发kendo-ui弹窗组件

来源：互联网发布：网络大电影需要审批吗编辑：程序博客网时间：2024/04/28 12:20

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

　　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>

附录：

属性：

含义类型default例子content弹出内容string，function宿主元素的内容

$("#dialog").kendoGDialog({

content: {

url: "/userDetails",

dataType: "json",

template: "User name: #= data.username #"

}

});

iframe是否已iframe方式显示弹窗boolFALSE 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弹窗最小宽度number500 maxWidth弹窗最大宽度number minHeight弹窗最小高度number200 maxHeight弹窗最大高度number visible弹窗是否可见boolTRUE position弹窗位置Object

$("#dialog").kendoGDialog({

position: {

top: 100,

left: 200

}

})

resizable重置弹窗大小boolTRUE actions弹窗工具组件array（

"Close", "Refresh", "Minimize", and "Maximize"

）['Close'] title弹窗标题string"" autohide自动关闭boolFALSE time自动关闭时间number1000(ms) draggable是否可以拖动boolTRUE 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就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

下载代码

0 0