添加一部分UI元素作为Introjs()教程的一个步骤

发布于12月18日

在使用Introjs()时，是否可以在介绍步骤中添加部分UI(例如，renderDataTable的过滤器部分)？

示例: 我想让用户知道，他们可以使用表的Filter部分来过滤结果.因此，作为附加步骤，我想突出显示DataTable的筛选器部分，作为本教程的一个步骤.

library(shiny)
library(DT)
library(rintrojs)

ui <- fluidPage(
    introjsUI(),  # include introjs
    div(id = "intro", h3("Intro")),
    dataTableOutput("my_table")
)


server <- function(input, output, session) {
    output$my_table <- renderDataTable({
        datatable(iris, filter = 'top')
    })
    
    # Trigger introjs on app start
        introjs(session, options = list(steps = list(
            list(element = "#intro", intro = "Intro"),
            list(element = "#my_table", intro = "This is the table. Now zooming in on filters...")
        )))
}

shinyApp(ui, server)

推荐答案

您可以添加任何有效的CSS Select 器，因此您只需找到一种适当的方法来寻址包含筛选器元素的行.此外，由于数据表是动态呈现的，所以您不应该过早调用introjs，否则您try 以此为目标的元素还不存在.一个不错的 Select 是在第一次刷新系统时呼叫introjs，此时数据表已经填充.

将所有内容放在一起，以下代码片断实现了该功能:

# Trigger introjs on app start but not before the system is flushed
session$onFlushed(function() {
  introjs(session, options = list(steps = list(
    list(element = "#intro", intro = "Intro"),
    list(element = "#my_table", intro = "This is the table. Now zooming in on filters..."),
    ### :nth-of-type will select the second row (<tr>), that is where the filters are
    list(element = "tr:nth-of-type(2)", intro = "Here you can apply filters")
  )))
})