文档章节

kendoui 弹出框

旺旺_c
 旺旺_c
发布于 2013/08/15 21:01
字数 339
阅读 3632
收藏 0

前几天看到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:'&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) ;

© 著作权归作者所有

旺旺_c

旺旺_c

粉丝 28
博文 26
码字总数 8838
作品 2
杭州
架构师
私信 提问
kendoUi的网站仿的是开源中国撒

今天在使用kendoui,遇到了一些问题,在搜索问题的时候,无意中发现kendoui的网站仿的是开源中国,我以为开源中国改版了,随便问一下,论坛里有多少人在使用kendoui http://www.kendoui.io/...

嘣猪嗤痴
2015/12/30
487
1
kendoui 在线文档如何现在到本地

kendoui 的在线文档 如何下载到本地啊 现在需要使用kendoui 发现没有离线文档的下载- -求红薯老大 指点迷津@红薯 或者弄到osc的api文档中心也好啊

Mrzeta
2013/09/02
1K
4
【全网独家】Kendo UI培训正式上线,抢先预约有惊喜!

Telerik中国区总代理——慧都整合国内一线讲师资源,全新开发的Kendo UI培训已经正式上线!Kendo UI for jQuery线下研修班 与 Kendo UI企业内训双拳出击,总有一款适合你! Kendo UI for jQu...

Miss_Hello_World
2017/10/18
0
0
Kendo UI 排版

使用Kendo UI(使用kendoGrid加载)数据显示下面类型的排版样式,该如何做?

時間會抹平那些皺褶遺
2017/04/19
318
0
kendo ui core开源的,有人用过没?

今天无意间看到的新闻Kendo UI Core:开源跨平台HTML5开发框架发布 开源包包含: 40+与HTML5和JS开发相关的部件和构架 Apache v2的授权许可 适用于商业和开源的项目...

MonkeyDev
2014/05/07
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 常用注解说明

实体类 @Entity (实体类注解) @Table(可指定表名) @Data(可缺省get/set) @Id (指定属性主键) @GeneratedValue(指定主键生成规则)

兜兜毛毛
今天
3
0
局域网能互相ping通,ubuntu虚拟机不能上外网

【问题】 桥接模式老是无法上网,查看本机IP发现被分配了一个私网地址,猜测应该是虚拟DHCP服务器没有打开,于是查看Ubuntu的网络配置: /etc/network/interfaces 发现没有dhcp配置的信息,只...

tahiti_aa
今天
2
0
以太坊助记词PHP开发包简介

以太坊助记词PHP开发包用来为PHP以太坊应用增加助记词和层级确定密钥支持能力。下载地址:以太坊助记词php开发包 。 1、开发包概述 以太坊助记词PHP开发包主要包括以下特性: 生成符合BIP39...

汇智网教程
昨天
2
0
系统监控-分布式调用链Skywalking

1. 为什么要使用分布式调用链技术? 随着公司业务的高速发展,公司服务之间的调用关系愈加复杂,如何理清并跟踪它们之间的调用关系就显的比较关键。线上每一个请求会经过多个业务系统,并产生...

秋日芒草
昨天
6
0
告诉自己的一些建议

摆脱学生心态 尽快发挥自己价值,让公司感知自己的存在,才是王道 选择比努力重要 自己附着的平台的经济体要是一个快速崛起的行业 转行趁早,年龄越大选择成本越高 趁早大量试错,学习新领域...

林怡丰
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部