闪亮的多页 intro.js

Question

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

下面的代码是一种无效的尝试。第一个选项卡很好用，显示了第二页的弹出窗口，但没有切换选项卡。

ui.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().setOption('doneLabel', 'Next page').start().oncomplete(function() {
         window.location.hash = '#!tt?multipage=true';
         });
         };</script>")  
    ))

server.R

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 代码中的函数中做错了什么。我试图通过将 window.location.href 替换为 window.location.hash 并引用 "tt".

的选项卡 ID 来改编 here 中的示例

Answer 1

这是可行的解决方案。请注意，您需要

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

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>")  
    ))

Answer 2

@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()

中

闪亮的多页 intro.js

Multi page intro.js with Shiny

r

shiny

intro.js