主页 / coding / 问题 / 78997295
Accepted
Quinten
Asked: 2024-09-18 16:40:48 +0800 CST

使用不同的标签禁用按钮 5 秒，然后进行更改

  • 772

我正在尝试使用rintrojs带有该introjs功能的包在我的 Shiny 应用程序中创建简介。我的目标是创建一个简介，其中第一个下一个按钮被禁用 5 秒，并带有不同的标签，如“等待 5 秒...”。它目前等待 5 秒并从标签更改，但在 5 秒内不会被禁用。所以你仍然可以点击它。这是一个可重现的示例：

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  actionButton("start_intro", "Start Intro"),
  h1("Welcome to the Shiny App"),
  p("This is some description of the app.")
)

server <- function(input, output, session) {
  
  steps <- reactive({
    data.frame(
      element = c(NA, "#start_intro"),
      intro = c("Welcome to the app! This first step has a custom button.",
                "This is the start button for the intro tour."),
      position = c("bottom", "bottom")
    )
  })
  
  observeEvent(input$start_intro, {
    introjs(session, 
            options = list(
              steps = steps(),
              nextLabel = "Wait 5 seconds..." 
            ),
            events = list(
              "onbeforechange" = I("
                if (this._currentStep === 0) {
                  var that = this;
                  var nextButton = document.querySelector('.introjs-nextbutton');
                  
                  if (nextButton) {
                    nextButton.innerHTML = 'Wait 5 seconds...';  // Initial label
                    nextButton.disabled = true;                  // Disable the button
                  }
                  
                  setTimeout(function() {
                    that._options.nextLabel = 'next'; // Change label after 5 seconds
                    that._introItems[0].nextLabel = 'next';
                    var nextButton = document.querySelector('.introjs-nextbutton');
                    if (nextButton) {
                      nextButton.innerHTML = 'next';  // Update the label to 'next'
                      nextButton.disabled = false;    // Enable the button after 5 seconds
                    }
                  }, 5000); // 5 seconds delay
                }
              ")
            )
    )
  })
}
 
shinyApp(ui = ui, server = server)

输出：

在此处输入图片描述

如您所见，它创建了“等待 5 秒...”按钮，该按钮也显示 5 秒，但在 5 秒内不会被禁用。所以我想知道我们如何创建一个按钮，该按钮在 5 秒后从标签更改，并在 5 秒内被禁用？

1 个回答

  1. Best Answer

    第一个问题是<a>元素没有属性disabled。第二个问题nextButton总是NULL因为 html 最初没有被渲染 - 弹出一个console.log('boop')来了解我的意思。因此，您需要在渲染完成后查找它。

    将其代入之后var that = this;：

    function waitForButton() {
  var nextButton = document.querySelector('.introjs-nextbutton');

if (nextButton) {
    nextButton.innerHTML = 'Wait 5 seconds for real now...';
    nextButton.classList.add('introjs-disabled');
    nextButton.style.pointerEvents = 'none'; // Disable click
  } else {
    setTimeout(waitForButton, 100); // Retry after 100ms if button is not found
  }
}
waitForButton()

setTimeout(function() {
  that._options.nextLabel = 'next'; // Change label after 5 seconds
  that._introItems[0].nextLabel = 'next';
  var nextButton = document.querySelector('.introjs-nextbutton');
  if (nextButton) {
    nextButton.innerHTML = 'next';  // Update the label to 'next'
    nextButton.classList.remove('introjs-disabled');   // Enable the button after 5 seconds
    nextButton.style.pointerEvents = 'auto'; // Enable click
  }
}, 5000); // 5 seconds delay
    • 3

相关问题