关注用户体验，分享前端技术

开发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 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就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

 

下载代码

 

posted @ 2014-11-21 17:04  夕阳白雪  阅读(9656)  评论(4)  编辑  收藏  举报