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');}

效果图如下：

---

2.自定义消息模板

    templates: [{       type: 'gbinfo',       template: '<div class="gbinfo">提示信息：#=myinfo#</div>'    }]    noti.show({myinfo:'展示的信息'}, 'gbinfo');

完整代码如下：

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