开发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 returnthat;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 <html> 3 <head> 4 <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> 5 <linkrel="stylesheet"type="text/css"href="kendo/styles/kendo.common.min.css" /> 6 <linkrel="stylesheet"type="text/css"href="style/dialog.css" /> 7 </head> 8 <body> 9 <scripttype="text/javascript"charset="utf-8"src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> 10 <scripttype="text/javascript"charset="utf-8"src="kendo/js/kendo.chopper.min.js"></script> 11 <scripttype="text/javascript"charset="utf-8"src="kendo/js/kendo.chopper.min.js"></script> 12 <scripttype="text/javascript"charset="utf-8"src="kendo/js/cultures/kendo.messages.zh-CN.js"></script> 13 <scripttype="text/javascript"charset="utf-8"src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script> 14 <divid="dialog"></div> 15 <scriptsrc="js/dialog.js"></script> 16 <script> 17 vardialog=$('#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就不需要这个了。同一个弹窗不能多次创建,可以先销毁在创建。
下载代码
开发kendo-ui弹窗组件相关推荐
- 【实用】一个移动端简单的UI弹窗组件,虽算不上高大上,但至少耐看
点击图片放大看效果 上代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http: ...
- Kendo UI Crack,完整的 JavaScript UI 组件库
Kendo UI Crack,完整的 JavaScript UI 组件库 Kendo UI 为当今所有流行的框架提供无缝支持,包括 jQuery.Angular.AngularJS.React 和 V ...
- Kendo UI:概述(*)
简介 虽说如今业界的各种前端框架层出不穷,但在为后台管理系统选择前端框架的时候却经常陷入纠结. 而从笔者实践经验来看,KendoUI算是一个不错的选择,总结起来其优点有三 各种组件和功能都比较完善 文 ...
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- 界面组件Kendo UI for React R3 2022新版,让Web应用更酷炫
Kendo UI致力于新的开发,来满足不断变化的需求,通过React框架的Kendo UI JavaScript封装来支持React Javascript框架.Kendo UI for React能够 ...
- Kendo UI开发教程 2 准备Kendo UI开发环境
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 首先你需 ...
- UI组件Kendo UI for jQuery数据管理入门指南 - TaskBoard/卡片
Kendo UI TaskBoard将任务.笔记.项目或其他类型的项目显示为按列(通道)中特定标准分组的卡片,卡片可以重新排序.放到另一列.编辑或删除. Kendo UI for jQuery最新官方 ...
- 【Telerik和Kendo UI组件】上海道宁与progress为您提供Web、移动和桌面构建功能更丰富的现代体验
Telerik和Kendo UI是 Progress产品组合的一部分 建造Telerik和Kendo UI组件 可以比以往更快地为 Web.移动和桌面提供良好体验 DevCraft适用于 所有.NET ...
- UI组件库Kendo UI for Vue原生组件中文 - 按钮概述
Kendo UI for Vue Buttons包提供了代表用户可以采取的简单操作的触发器组件. Buttons package是Kendo UI for Vue库的一部分,它为Vue生态系统提供原生 ...
最新文章
- opencv sgbm 三维重建_图像三维重建方法综述
- java 短链接实现方案_java利用百度短网址api实现URL长短互换工具类分享
- 提取验证码到winform上webbroswer和axwebbroswer
- 爬虫的增量式抓取和数据更新
- Python学习第一天-第2节
- python怎么从数组中提取连续的数字_从numpy数组中删除连续的数字
- 2.微型计算机系统的基本结构及计算机各个部件的功能
- Microsoft SQL Server 2008 All-in-One Desk Reference For Dummies 读书笔记之六
- 维修手册 html 打开,汽车维修手册大全.pdf
- 动物基因组测序基础分析流程总结(GWAS全流程第一部分:WGS基础流程)
- sql查询大于平均得分的球员的名字和得分,并追加显示平均得分的列
- jsp页面如何调用本机的应用程序?例如c:/netterm.exe?
- 为什么程序员都很排斥面试时做题?答不出题的程序员会是大牛吗?
- HDU 3105 Fred's Lotto Tickets(数学题)
- ABAP根据程序去查询透明表
- 诚之和:小鹏汽车财报里的难言之隐
- 可替代Adobe Reader的pdf阅读器下载
- 【Linux进程、线程、任务调度】三 CPU/IO消耗型进程 吞吐率/响应 SCHED_FIFO算法与SCHED_RR算法 SCHED_NORMAL算法和CFS算法 nice与renic chrt
- Oracle I/O问题解析
- 从浮华的管理驾驶舱,到务实的企业信息化