r - 带有 Shiny 的多页 intro.js

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 文件 here

我的猜测是我在 ui.R 底部的 javascript 代码中的函数做错了。我试图改编 here 中的例子通过用 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() 中