Javascript r简介

我试图用intro.js的r包装器突出显示我的bsModal的元素，但是无法让它工作。我也尝试过包含自定义js脚本，但我的js很糟糕

我还设置了多个不同的测试，希望它能找到一些东西，但是intro.js似乎找不到modal的div或其中的任何元素。我正在使用rintrojs

下面是一些让它在javascript中工作的示例：

但我个人对Javascript了解不够，无法自己集成定制解决方案。我已经试过了：(

以下是我主持的一个关于该问题的示例的链接：

有人知道我如何让下面的虚拟示例工作吗

library(rintrojs)
library(shiny)
library(shinydashboard)


intro_df <- data.frame(element = c('#plot_box', '#bttn2', '#box', '#modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'test modal'))

ui <- shinyUI(fluidPage(
    introjsUI(), 
    mainPanel(
        bsModal('modal', '', '', uiOutput('plot_box'), size = 'large'),
        actionButton("bttn", "Start intro")
    )))
server <- shinyServer(function(input, output, session) {

    output$plot <- renderPlot({
        plot(rnorm(50))
    })

    output$plot_box <- renderUI({
        box(id = 'box',
            actionButton('bttn2', 'dummy'),
            plotOutput('plot'), width = '100%'
        )
    })

    observeEvent(input$bttn,{

        toggleModal(session, 'modal', toggle = 'toggle')
        introjs(session, options = list(steps = intro_df))
    })

})
shinyApp(ui = ui, server = server)

库（rintrojs）
图书馆（闪亮）
图书馆（shinydashboard）
intro_df最终，我认为这个请求可以在
rintrojs
库中提供一些有用的功能。无论如何，您的问题有两个方面：

introjs
在模式在HTML中可用之前不应启动。最简单的方法是使用模式中的按钮启动教程。如果希望它是自动启动的，则需要一些JavaScript等待模式准备就绪后再启动
introjs
希望灰显背景并突出显示教程中的当前项目。这意味着它需要“交错”使用模态子级。由于模态是其自身的堆叠上下文，因此需要从模态内部激发
introjs
，以查看模态子级。如果要查看整个模态，则从父级激发
introjs
就足够了。此功能似乎不在
rintrojs
包中但是，它在JavaScript库中
为了完成#1，我添加了一个JavaScript函数在模式加载时启动introjs（在HTML元素加载的可配置延迟之后）。这需要
shinyjs
包。注意
introjs（Modal_id）
，这确保了教程在模式内启动。在纯JavaScript中，它将是
introjs（“#Modal”）
：

还有一行CSS需要修复模态背景，以避免过度渴望和接管DOM：

.modal-backdrop { z-index: -10;}

以及一个（大型/非小型）具有多个模态的工作示例

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyjs)

intro_df <- data.frame(element = c('#plot_box', '#bttn2', '#box', '#modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'test modal'))

intro_df2 <- data.frame(element = c('#plot_box2'),
                       intro = c('test plot_box'))

    run_introjs_on_modal_up <- function(
      modal_id
      , input_data
      , wait
    ) {
      runjs(
        paste0(
          "$('"
          , modal_id
          , "').on('shown.bs.modal', function(e) {
          setTimeout(function(){
            introJs('", modal_id, "').addSteps("
          , jsonlite::toJSON(input_data, auto_unbox=TRUE)
          , ").start()
          }, ", wait, ")
          })"
        )
      )
    }

    introjs_exit <- function(){
      runjs("introJs().exit()")
    }

ui <- shinyUI(fluidPage(
  useShinyjs(),
  tags$head(tags$style(".modal-backdrop { z-index: -10;}")),
  introjsUI(), 
  mainPanel(
    bsModal('modal', '', '', uiOutput('plot_box'), size = 'large'),
    bsModal('modalblah', '', '', uiOutput('plot_box2'), size = 'large'),
    actionButton("bttn", "Start intro")
  )))
server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })
  output$plot2 <- renderPlot({
    plot(rnorm(50))
  })

  output$plot_box <- renderUI({
    box(id = 'box',
        actionButton('bttn2', 'dummy'),
        plotOutput('plot'), width = '100%'
    )
  })
  output$plot_box2 <- renderUI({
    box(id = 'box2',
        plotOutput('plot2'), width = '100%'
    )
  })

    run_introjs_on_modal_up("#modal",intro_df, 1000)
    run_introjs_on_modal_up("#modalblah",intro_df2, 1000)

  observeEvent(input$bttn,{

    toggleModal(session, 'modal', toggle = 'toggle')
  })

  observeEvent(input$bttn2, {
    toggleModal(session, 'modal', toggle = 'toggle')
    introjs_exit()

    toggleModal(session, 'modalblah', toggle = 'toggle')
  })

})
shinyApp(ui = ui, server = server)

库（rintrojs）
图书馆（闪亮）
图书馆（shinydashboard）
图书馆（shinyBS）
图书馆（shinyjs）
intro_df我通过添加

.introjs-fixParent.modal {
  z-index:1050 !important;  
}

到我的CSS

工作示例：

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyjs)

intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal'))

ui <- shinyUI(fluidPage(
  dashboardPage(dashboardHeader(title = "Test"),
                dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
                dashboardBody(tabItems(tabItem("item1", actionButton("bttn", "start intro"))))),
  useShinyjs(),
  tags$head(tags$style(".introjs-fixParent.modal {
                          z-index:1050 !important;  
                        }")),
  introjsUI()
  ))

server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })

  output$plot_box <- renderUI({
    box(id = 'box',
        div(id = "bttn2_intro", actionButton('bttn2', 'dummy')),
        plotOutput('plot'), width = '100%'
    )
  })

  observeEvent(input$bttn,{
    showModal(modalDialog(uiOutput('plot_box')))
  })

  observeEvent(input$bttn2, {
    introjs(session, options = list(steps = intro_df))
  })

})
shinyApp(ui = ui, server = server)

库（rintrojs）
图书馆（闪亮）
图书馆（shinydashboard）
图书馆（shinyBS）
图书馆（shinyjs）
介绍
.introjs-fixParent.modal {
  z-index:1050 !important;  
}

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyjs)

intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal'))

ui <- shinyUI(fluidPage(
  dashboardPage(dashboardHeader(title = "Test"),
                dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
                dashboardBody(tabItems(tabItem("item1", actionButton("bttn", "start intro"))))),
  useShinyjs(),
  tags$head(tags$style(".introjs-fixParent.modal {
                          z-index:1050 !important;  
                        }")),
  introjsUI()
  ))

server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })

  output$plot_box <- renderUI({
    box(id = 'box',
        div(id = "bttn2_intro", actionButton('bttn2', 'dummy')),
        plotOutput('plot'), width = '100%'
    )
  })

  observeEvent(input$bttn,{
    showModal(modalDialog(uiOutput('plot_box')))
  })

  observeEvent(input$bttn2, {
    introjs(session, options = list(steps = intro_df))
  })

})
shinyApp(ui = ui, server = server)