开发kendo

2023-12-25 14:17| 来源: 网络整理| 查看: 265

摘要：

　　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 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 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var dialog = $('#dialog').kendoGDialog({title:"弹窗"}).data('kendoGDialog'); 18 19 20

附录：属性：含义类型 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就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

下载代码

【本文地址】

开发kendo

开发kendo

今日新闻

推荐新闻