3

再会！

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

例如，如果游览的当前亮点在一组按钮上，有没有办法让用户在游览时无法点击它们？

任何帮助将非常感激！:)

4

4 回答 4

4

您可以在显示/隐藏步骤时指定回调函数。在这些函数中，您可以访问当前元素，并且可以对其进行操作（请参阅文档：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');
    }
})
于 2013-12-10T14:01:49.810 回答
4

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

您可以将 CSS 应用于 highligthed 元素：

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

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

于 2018-09-25T15:02:30.290 回答
1

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

首先是叠加层的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();
}
于 2017-11-28T18:44:33.230 回答
0

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

于 2018-07-08T06:58:57.457 回答