KendoUI消息提示自定义

最新推荐文章于 2024-10-09 09:31:07 发布

有魔力的豆角

最新推荐文章于 2024-10-09 09:31:07 发布

阅读量3.7k

点赞数

分类专栏： kendo-ui 文章标签： kendoUI javascript

本文链接：https://blog.csdn.net/culous/article/details/78862929

版权

kendo-ui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

通过KendoUI和JavaScript，本文展示了如何重写alert()方法以创建自定义的消息提示。内容包括消息提示的自定义实现以及自定义消息模板的完整代码示例。

摘要由CSDN通过智能技术生成

本文结合了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');