Question

我正在申请中创建一般化通知。因为我必须花时间以不同的时间间隔显示剑道通知。

<div id="appendNotification" class="k-animation-container k-state-border-down" style="margin: 0px; padding: 0px 0px 4px; overflow: visible; position: fixed; top: 5%; z-index: 10002; right: 2%;"></div>
<span id="popupNotification"></span>

＆安培;我的剑道通知代码在

下面

var notificationElement = $("#popupNotification");
        window.notificationElement.kendoNotification({
            appendTo: "#appendNotification",
            autoHideAfter: 5000,
            templates: [{
                    type: "success",
                    template: GetNotificationTemplate("#= notificationHeader #","#= notificationMessage #")
                },
                {
                    type: "warning",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                },
                {
                    type: "info",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                },
                {
                    type: "error",
                    template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                }]
        });
        var nspSendCommonNotification = window.notificationElement.data("kendoNotification");
        var container = $(nspSendCommonNotification.options.appendTo);
        container.scrollTop(container[0].scrollHeight);


function GetNotificationTemplate(headerTextValue, contentTextValue) {
            return "<div style=\"padding:5px\"><span class='k-icon k-i-close nspNotificationClose nspNotificationCross' style=\"float: right;\"></span><h3>" + headerTextValue + "</h3><p style='margin:0px;width: 250px;'>" + contentTextValue + "</p></div>";
        }

所以我需要动态传递autoHideAfter是否可能

您可以在http://jsfiddle.net/Ks8nF/

找到问题

Answer 1

您可以尝试这样的事情：

将数据属性设置为时间间隔并附加到定位范围中的值（在此情况下，目标范围为popupNotification）

<div id="appendNotification" class="k-animation-container k-state-border-down" style="margin: 0px; padding: 0px 0px 4px; overflow: visible; position: fixed; top: 5%; z-index: 10002; right: 2%;"></div>
<span id="popupNotification" data-time="3000" data-appendto="appendNotification"></span>

修改你的jquery：

    var notificationElement = $("#popupNotification");
            window.notificationElement.kendoNotification({
                appendTo: $(this).data('appendto'),// read append to data
                autoHideAfter: $(this).data('time'),// read time interval data
                templates: [{
                        type: "success",
                        template: GetNotificationTemplate("#= notificationHeader #","#= notificationMessage #")
                    },
                    {
                        type: "warning",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    },
                    {
                        type: "info",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    },
                    {
                        type: "error",
                        template: GetNotificationTemplate("#= notificationHeader #", "#= notificationMessage #")
                    }]
            });
            var nspSendCommonNotification = window.notificationElement.data("kendoNotification");
            var container = $(nspSendCommonNotification.options.appendTo);
            container.scrollTop(container[0].scrollHeight);


    function GetNotificationTemplate(headerTextValue, contentTextValue) {
                return "<div style=\"padding:5px\"><span class='k-icon k-i-close nspNotificationClose nspNotificationCross' style=\"float: right;\"></span><h3>" + headerTextValue + "</h3><p style='margin:0px;width: 250px;'>" + contentTextValue + "</p></div>";
}

尝试使用类似的逻辑动态配置Kendo Notification。

如何在kendo通知中传递autoHideAfter

1 个答案: