前几天看到kendoui觉得挺漂亮的,可是没有弹出框,在window基础上扩展一个,用kendoui的ui,可以随着ui变化而变化
使用方法:引入下面js,kendo.message('心肝宝贝!');kendo.confirm('心肝宝贝!'),可以自定义点击确定,取消时的处理方法例如:kendo.message('心肝宝贝!' , {button:function(){console.log('log');}})
(function(kendo){
kendo.message = function(newMessage , option) {
var $ = kendo.jQuery ;
var _kendoMessage = kendo['_kendoMessage'] ;
var _kendoMessageDom = kendo['_kendoMessageDom'] ;
var defaultOption = {
width: "400px",
height: "150px" ,
title: "消息",
actions: [
"Close"
],
modal:true ,
button:{text:'  确定  ',callback:function(kendoMessage){kendoMessage.close();}}
} ;
$.extend(defaultOption , option) ;
if(_kendoMessage){
_kendoMessageDom.children("#msg").html(newMessage) ;
_kendoMessage.center();
_kendoMessage.open() ;
} else {
var html = '<div><div id="msg" style="height: 60%;margin:8px;overflow:hidden;" >' + newMessage +'</div>' +
'<div class="k-edit-buttons k-state-default k-window-action" style="text-align:center;margin: 8px;">'+
'<a href="#" class="k-button">'+defaultOption.button.text+'</a></div></div>' ;
_kendoMessageDom = $(html) ;
_kendoMessageDom.kendoWindow(defaultOption) ;
_kendoMessage = _kendoMessageDom.data("kendoWindow");
_kendoMessage.center() ;
_kendoMessage.open() ;
_kendoMessageDom.find("a").click(function(){defaultOption.button.callback(_kendoMessage);}) ;
kendo['_kendoMessage'] = _kendoMessage ;
kendo['_kendoMessageDom'] = _kendoMessageDom ;
}
} ,
kendo.confirm = function(newMessage , option) {
var $ = kendo.jQuery ;
var _kendoConfirm = kendo['_kendoConfirm'] ;
var _kendoConfirmDom = kendo['_kendoConfirmDom'] ;
var defaultOption = {
width: "400px",
height: "150px" ,
title: "消息",
resizable:false ,
actions: [
"Close"
],
modal:true ,
ok:{text:'  确定  ',callback:function(kendoConfirm){kendoConfirm.close();}} ,
cancel: {text:'  取消  ',callback:function(kendoConfirm){kendoConfirm.close();}}
} ;
$.extend(defaultOption , option) ;
if(_kendoConfirm){
_kendoConfirmDom.children("#msg").html(newConfirm) ;
_kendoConfirm.center();
_kendoConfirm.open() ;
} else {
var html = '<div><div id="msg" style="height: 60%;margin:8px;overflow:hidden;" >' + newMessage +'</div>' +
'<div class="k-edit-buttons k-state-default k-window-action" style="text-align:center;margin: 8px;">'+
'<a href="#" class="k-button" id="confirmOk" style="margin-right:8px;">'+defaultOption.ok.text+'</a>'+
'<a href="#" class="k-button" id="confirmCancel">'+defaultOption.cancel.text+'</a></div></div>' ;
_kendoConfirmDom = $(html) ;
_kendoConfirmDom.kendoWindow(defaultOption) ;
_kendoConfirm = _kendoConfirmDom.data("kendoWindow");
_kendoConfirm.center() ;
_kendoConfirm.open() ;
_kendoConfirmDom.find("#confirmOk").click(function(){defaultOption.ok.callback(_kendoConfirm);}) ;
_kendoConfirmDom.find("#confirmCancel").click(function(){defaultOption.cancel.callback(_kendoConfirm);}) ;
kendo['_kendoConfirm'] = _kendoConfirm ;
kendo['_kendoConfirmDom'] = _kendoConfirmDom ;
}
}
})(kendo) ;