多页面intro.js与Shiny

Question

我正在尝试在Shiny应用程序上实现into.js多页功能。

下面的代码是不成功的尝试。 第一个选项卡工作正常，显示第二页的弹出窗口，但不切换选项卡。

用户界面

library(shiny)


    shinyUI(tagList(
            tags$head(
                    HTML("<link rel='stylesheet' type='text/css' href='css/introjs.min.css'>")
            ),
            navbarPage("Old Faithful Geyser Data",




      tabPanel(id = "fTab", "First tab",
            HTML("<h1 data-step='1' data-intro='This is a tooltip!'>Basic Usage</h1>"),
           sliderInput("bins",
                       "Number of bins:",
                       min = 1,
                       max = 50,
                       value = 30),

           plotOutput("distPlot"),
           HTML("<a id='startButton' class='btn btn-large btn-success' href='javascript:void(0);'>Help</a>")

      ),
      tabPanel(tabName = "sTab", "Second tab", id = "tt", 
               HTML("<h1 data-step='2' data-intro='This is a second tooltip!'>Basic Usage</h1>"),
                  sliderInput("bins2",
                              "Number of bins:",
                              min = 1,
                              max = 50,
                              value = 30),

                  plotOutput("distPlot2")
                  )
    ),
    HTML("<script type='text/javascript' src='js/intro.min.js'></script>"),
    HTML("<script type='text/javascript'>document.getElementById('startButton').onclick = function() {
         introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
         window.location.hash = '#!tt?multipage=true';
         });
         };</script>")  
    ))

服务器

library(shiny)


    shinyServer(function(input, output) {

      output$distPlot <- renderPlot({

        x    <- faithful[, 2] 
        bins <- seq(min(x), max(x), length.out = input$bins + 1)


        hist(x, breaks = bins, col = 'darkgray', border = 'white')

      })
      output$distPlot2 <- renderPlot({


              x    <- faithful[, 2] 
              bins <- seq(min(x), max(x), length.out = input$bins2 + 1)


              hist(x, breaks = bins, col = 'darkgray', border = 'white')

      })

    })

来自intro.js的js和css文件位于www文件夹内的js和css文件夹中。 您可以在此处找到intro.js文件

我的猜测是我在ui.R底部的javascript代码中的函数中做错了。 我试图从适应的例子在这里通过与window.location.hash代替window.location.href和引用这是“TT”的标签ID。

Answer 1

@warmoverflow提供了一个很好的答案。 这是使用rintrojs的相同答案的版本：

library(shiny)
library(rintrojs)

ui = shinyUI(tagList(
  introjsUI(),
  navbarPage(
    "Old Faithful Geyser Data",

    tabPanel(
      id = "fTab",
      "First tab",
      introBox(
        h1("Basic Usage"),
        data.step = 1,
        data.intro = "This is a tooltip"
      ),
      sliderInput(
        "bins",
        "Number of bins:",
        min = 1,
        max = 50,
        value = 30
      ),

      plotOutput("distPlot"),
      actionButton("startButton", "Help")
    ),
    tabPanel(
      tabName = "sTab",
      "Second tab",
      id = "tt",
      introBox(
        h1("Basic Usage 2"),
        data.step = 2,
        data.intro = "This is a second tooltip"
      ),
      sliderInput(
        "bins2",
        "Number of bins:",
        min = 1,
        max = 50,
        value = 30
      ),

      plotOutput("distPlot2")
    )
  )
))

server = shinyServer(function(input, output, session) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)


    hist(x,
         breaks = bins,
         col = 'darkgray',
         border = 'white')

  })
  output$distPlot2 <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins2 + 1)


    hist(x,
         breaks = bins,
         col = 'darkgray',
         border = 'white')

  })

  observeEvent(input$startButton, {
    introjs(
      session,
      events = list(
        "onchange" = "if (this._currentStep==0) {
        $('a[data-value=\"Second tab\"]').removeClass('active');
        $('a[data-value=\"First tab\"]').addClass('active');
        $('a[data-value=\"First tab\"]').trigger('click');
  }
        if (this._currentStep==1) {
        $('a[data-value=\"First tab\"]').removeClass('active');
        $('a[data-value=\"Second tab\"]').addClass('active');
        $('a[data-value=\"Second tab\"]').trigger('click');
        }"
)
      )

})

  })

shinyApp(ui = ui, server = server)

但是，如果您返回到导览的第一步，则选项卡不会切换，因此该代码仅在导览中有效。

注意：在rintrojs 0.1.2.900及更高版本中，原始javascript需要包装在I()

Answer 2

这是有效的解决方案。 请注意，您需要

• 确定当前步骤以切换选项卡。 多页示例不适用于此处，因为您的所有步骤都在一页上（多个选项卡但是一页），因此intro.js将在单击next page之前显示所有步骤。
• 使用JavaScript / JQuery模拟选项卡单击事件。

ui.R（server.R不变）

library(shiny)


shinyUI(tagList(
  tags$head(
    HTML("<link rel='stylesheet' type='text/css' href='css/introjs.min.css'>")
  ),
  navbarPage("Old Faithful Geyser Data",
             tabPanel(id = "fTab", "First tab",
                      HTML("<h1 data-step='1' data-intro='This is a tooltip!'>Basic Usage</h1>"),
                      sliderInput("bins",
                                  "Number of bins:",
                                  min = 1,
                                  max = 50,
                                  value = 30),

                      plotOutput("distPlot"),
                      HTML("<a id='startButton' class='btn btn-large btn-success' href='javascript:void(0);'>Help</a>")

             ),
             tabPanel(tabName = "sTab", "Second tab", id = "tt", 
                      HTML("<h1 data-step='2' data-intro='This is a second tooltip!'>Basic Usage</h1>"),
                      sliderInput("bins2",
                                  "Number of bins:",
                                  min = 1,
                                  max = 50,
                                  value = 30),

                      plotOutput("distPlot2")
             )
  ),
  HTML("<script type='text/javascript' src='js/intro.min.js'></script>"),
  HTML("<script type='text/javascript'>document.getElementById('startButton').onclick = function() {
       introJs().onchange(function(targetElement) {
          if (this._currentStep==0) {
             $('a[data-value=\"Second tab\"]').removeClass('active');
             $('a[data-value=\"First tab\"]').addClass('active');
             $('a[data-value=\"First tab\"]').trigger('click');
          }
          if (this._currentStep==1) {
             $('a[data-value=\"First tab\"]').removeClass('active');
             $('a[data-value=\"Second tab\"]').addClass('active');
             $('a[data-value=\"Second tab\"]').trigger('click');
          }
       }).start();
       };</script>")  
    ))