kendoui 彈出框

前幾天看到kendoui以爲挺漂亮的,但是沒有彈出框,在window基礎上擴展一個,用kendoui的ui,能夠隨着ui變化而變化 html

使用方法:引入下面js,kendo.message('心肝寶貝!');kendo.confirm('心肝寶貝!'),能夠自定義點擊肯定,取消時的處理方法例如:kendo.message('心肝寶貝!' , {button:function(){console.log('log');}})  ui

(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:'&nbsp&nbsp肯定&nbsp&nbsp',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:'&nbsp&nbsp肯定&nbsp&nbsp',callback:function(kendoConfirm){kendoConfirm.close();}} ,
								cancel: {text:'&nbsp&nbsp取消&nbsp&nbsp',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) ;
相關文章
相關標籤/搜索