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