Question

我在asp.net mvc网站上有这些通知，我想知道是否有一种方法可以将通知置于屏幕中间，而不是使用绝对值（在这种情况下为30和3）

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(p => p.Pinned(true).Top(30).Left(3))
    .Stacking(NotificationStackingSettings.Down)
    .AutoHideAfter(0)
    .Templates(t =>
    {
        t.Add().Type("error").ClientTemplateID("errorTemplate");
        t.Add().Type("upload-success").ClientTemplateID("successTemplate");
    })
)

Answer 1

他们在Kendo-UI上有一个关于如何执行此操作的示例，但从我可以看到他们只是在添加新通知时使用JavaScript事件设置它。

为您的通知声明添加on Show事件。

.Events(e => e.Show("onShow"))

然后添加以下JavaScript函数。

function onShow(e) {
  if (!$("." + e.sender._guid)[1]) {
    var element = e.element.parent(),
      eWidth = element.width(),
      eHeight = element.height(),
      wWidth = $(window).width(),
      wHeight = $(window).height(),
      newTop, newLeft;

    newLeft = Math.floor(wWidth / 2 - eWidth / 2);
    newTop = Math.floor(wHeight / 2 - eHeight / 2);

    e.element.parent().css({ top: newTop, left: newLeft });
  }
}

这样做会获取通知的高度和宽度以及浏览器的内部窗口。浏览器高度的一半会将通知的顶部放在页面的中间位置，这样它们就会从该值中获取通知高度的一半，并使其居中。

您可以查看完整示例here

在屏幕上居中显示剑道通知

1 个答案: