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

     }) 

    }) 

的JS和CSS文件从intro.js是在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来模拟选项卡单击事件。

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) 

，如果你回到旅游的第一步，虽然，这样的代码只能通过旅游去转发标签不切换。

注：0.1.2.900和更高版本rintrojs，生JavaScript需要被包裹在I()