KendoUI消息提示自定义

本文结合了kendo ui 实现了js 重写alert()方法,实现自定义消息提示

1.消息提示自定义
html

<p id="noti">p>

需要引入的js和css

<script src="<%=basePath%>/mobile/js/jquery.min.js">script>
<script src="<%=basePath%>/mobile/js/kendo.all.min.js">script>

<link href="<%=basePath%>/mobile/styles/kendo.common.min.css" rel="stylesheet" />
<link href="<%=basePath%>/mobile/styles/kendo.default.min.css" rel="stylesheet" />
<link href="<%=basePath%>/mobile/styles/kendo.mobile.ios.min.css" rel="stylesheet" />

js代码

    window.alert = function(info){
        var noti = $('#noti').kendoNotification({
            position:{
              left: 100,
              top:120
            },
            height: 40,
            autoHideAfter: false,
            button: true,
            stacking: 'down'
       }).data('kendoNotification');
        noti.show(info,'info');
}

效果图如下:KendoUI消息提示自定义_第1张图片


2.自定义消息模板

    templates: [{
       type: 'gbinfo',
       template: '
提示信息:#=myinfo#
'
}] noti.show({myinfo:'展示的信息'}, 'gbinfo');

完整代码如下:

var noti = $('#noti').kendoNotification({
                 position:{
                   left: 10,
                   top: 10
                 },
                 autoHideAfter: 5000,
                 button: true,
                 stacking: 'down',
                 templates: [{
                   type: 'gbinfo',
                   template: '
欢迎访问,#=myinfo#
'
}] }).data('kendoNotification'); //noti.show('提示信息!','success'); noti.show({myinfo:'提示信息!'}, 'gbinfo');

你可能感兴趣的:(kendo-ui)