Question

我想在几个地方使用相同的kendo ui popup。我首先尝试在运行时更改锚元素，这是不允许的，或者我做错了。假设它不被允许（这是有道理的）我的下一次尝试是在我需要它时创建窗口然后销毁它，然后在不同的地方再次重新创建它。但是当调用destroy方法时，widget会完全从DOM中删除，因此尝试重新创建它会失败。

虽然我理解我要求的不仅仅是弹出窗口的设计是否有任何方法可以在不同位置重复使用弹出窗口？

我的蛮力解决方案是拥有n个相同的弹出窗口......呃。

尝试1：

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
...
//not sure if this is possible or how to do it
$("#popup").data("kendoPopup").anchor("#tc2");

尝试2：

$("#popup").kendoPopup({
    anchor: $("#tc1")
});
$("#popup").data("kendoPopup").open();
$("#popup").data("kendoPopup").close();
$("#popup").data("kendoPopup").destroy();
...
//this fails
$("#popup").kendoPopup({
    anchor: $("#tc2")
});

Answer 1

在与Kendo UI打交道的几年里，对我来说，一个很好的教训是：包装你能做的一切。因此，我建议您始终创建自己的包装函数或小部件。

这是一个简单的例子，说明如何使用包装函数实现所需的功能：

var showPopup = function($popupEl, $anchorEl) {
    var popupOptions = {
        anchor: $anchorEl,
        origin: "bottom right",
        position: "bottom right",
        collision: "fit"
    };

    if (!$popupEl.hasClass("k-popup")) {
        $popupEl.kendoPopup(popupOptions);
    } else {
        $popupEl.data("kendoPopup").setOptions(popupOptions);
    }

    $popupEl.data("kendoPopup").open();
};

使用该功能，您可以随时随地调用它：

showPopup($("#popup"), $("#tc1"));

Demo

如何在不同位置重用kendo ui弹出窗口

1 个答案: