Question

美好的一天！

我刚开始在我们的项目中使用Bootstrap Tour，我似乎喜欢它，因为它简单而实用的界面。但我只有一个小问题 - 如何让巡回演出突出显示的元素被临时禁用？

例如，如果巡视的当前高亮显示在一组按钮上，是否有办法让用户在巡演时无法点击它们？

任何帮助将不胜感激！：）

Answer 1

您可以在显示/隐藏步骤时指定回调函数。在这些函数中，您可以访问当前元素，并且可以对其执行操作（请参阅文档：Tour Options）：

var tour = new Tour({
    onShown: function(tour) {
        var step = tour._steps[tour._current];
        $(step.element).attr('disabled', true);
    },
    onHidden: function(tour) {
        var step = tour._steps[tour._current];
        $(step.element).removeAttr('disabled');
    }
})

<强> JSFiddle ;

Answer 2

对我来说，最简单的方法是使用CSS。

您可以将CSS应用于高亮元素：

.tour-NameOfYourTour-element {
    pointer-events: none;
}

这不会在视觉上改变任何东西，而clic也不起作用。

Answer 3

使用相同的回调技术，我决定覆盖div而不是将disabled属性添加到step元素。 当打开背景并且元素不是输入字段时，这很有效（即禁用的属性不起作用）。

首先是叠加层的CSS：

.tour-step-backdrop-parent {
    position: absolute;
    z-index: 1100;
}

代码（更新以考虑背景填充和绝对定位的步骤元素）：

onShown: function(tour) {
    var step = tour._options.steps[tour._current];

    /// Overlay a div on the tour contents to prevent clicking
    // Remove any existing overlay divs - accounting for shown event being called on window resize
    $(step.element).siblings('.tour-step-backdrop-parent').remove();
    // Create overlay div
    var disabledOverlay = $('<div class="tour-step-backdrop-parent"></div>');
    // Insert overlay div before step element in DOM
    $(step.element).before(disabledOverlay);
    // Account for step's backdrop padding if any (double it since it surrounds the element)
    var padding = (step.backdropPadding || 0) * 2;
    // Set size of the overlay div to the step element's size and account for rounding by adding 1 pixel
    disabledOverlay.outerHeight(stepElement.outerHeight() + padding + 1).outerWidth(stepElement.outerWidth() + padding + 1);
    // Set position based on element's position and adjust for backdrop padding
    var offset = stepElement.offset();console.log(offset);
    offset.top = offset.top - (step.backdropPadding || 0);
    offset.left = offset.left - (step.backdropPadding || 0);
    disabledOverlay.offset(offset);
},
onHidden: function(tour) {
    var step = tour._options.steps[tour._current];
    // Remove overlay div
    $(step.element).siblings('.tour-step-backdrop-parent').remove();
}

Answer 4

API已更新，在v0.12.0中，您可以通过以下代码实现相同的功能。

var tour = new Tour({
    onShown: function(tour) {
        var step = tour.getStep(tour._current);
        $(step.element).attr('disabled', true);
    },
    onHidden: function(tour) {
        var step = tour.getStep(tour._current);
        $(step.element).removeAttr('disabled');
    }
})

信用转到@zessx

使用Bootstrap Tour时禁用突出显示的区域

4 个答案: