使用 ShinyJS 初始化隐藏元素

Posted

技术标签:

【中文标题】使用 ShinyJS 初始化隐藏元素【英文标题】:Initalising hidden elements with ShinyJS 【发布时间】:2020-02-12 18:25:17 【问题描述】:

我想在闪亮的应用程序启动时隐藏一个元素,但与this example 不同的是,要隐藏的元素是可见的较大元素的一部分。

在此示例中,要在开始时隐藏的元素是绘图控件,它是传单地图的一部分。有一个按钮可以切换绘图控件的可见性 - 我怎样才能让它从隐藏的绘图控件开始?该应用的完整代码如下。

library(rbgm)
library(leaflet)
library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  leafletOutput("mymap"),
  actionBttn("toggle_button", "Toggle drawing")
)

server <- function(input, output, session) 

  output$mymap <- renderLeaflet(
    set.seed(2)
    fs <- sample(bgmfiles::bgmfiles(), 1)

    model <- boxSpatial(bgmfile(fs))
    model <- spTransform(model, "+init=epsg:4326")

    m <- leaflet() %>% addTiles() 

    m <- m %>% addPolygons(data = model, group = 'model') %>%     
      addDrawToolbar(targetGroup = 'model',
                     editOptions = editToolbarOptions(
                       selectedPathOptions = selectedPathOptions()))
    m
  )

  observe(
    shinyjs::hide(selector = "div.leaflet-draw") # <---- this doesn't hide the draw controls at the start!!
  )

  observeEvent(input$toggle_button, 
    shinyjs::toggle(selector = "div.leaflet-draw")
  )



shinyApp(ui, server)

我尝试使用observe 在开始时隐藏元素,但它没有做任何事情,大概是因为在观察事件触发后加载绘图控制元素。

【问题讨论】:

【参考方案1】:

你可以的

shinyjs::delay(0, shinyjs::hide(selector = "div.leaflet-draw"))

(没有观察者)。


编辑

另一种解决方案:

js <- "
$(document).on('shiny:value', function(e)
  if(e.name === 'mymap')
    setTimeout(function()$('div.leaflet-draw').hide();, 0);
  
);
"

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$script(js)),
  leafletOutput("mymap"),
  ...

【讨论】:

这很有效——直到我将它应用到我的在线数据源应用程序中——增加延迟时间是偶然的。有没有办法确保它在地图或页面加载后触发而不考虑加载时间? @Vlad 嗯...我不能那样说。你能分享一个在线获取数据的例子吗? @Vlad 我刚刚编辑了我的答案以添加另一个解决方案。你能试试这个吗? 您编辑的解决方案即使延迟很长时间也能正常工作。

以上是关于使用 ShinyJS 初始化隐藏元素的主要内容,如果未能解决你的问题,请参考以下文章

使用shinydashboard和shinyjs在tabBox中启动时隐藏tabPanel

使用 shinyjs 和 flexdashbord 动态显示/隐藏输入

使用 shinyjs 切换表单水平输入及其标签

animate.css动画初始状态隐藏

jQuery将元素拖动到初始状态为隐藏的可排序列表中

初始jQuery