4

我尝试制作一个加载屏幕，就像这个很好的例子http://daattali.com:3838/loading-screen/一样。不幸的是，我无法弄清楚如何使用“navbarPage”实现完全相同的效果。

在下面这个稍作修改的应用程序中，有两个名为“开始”和“结束”的选项卡面板。当应用程序启动时，没有任何选项卡面板处于活动状态。必须快速单击第一个选项卡才能看到加载屏幕，但这不是我想要的。有没有办法让它像上面提到的例子一样快速和简单？

感谢您的帮助！

library(shinyjs)

appCSS <- "
#loading-content {
position: absolute;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

shinyApp(
  ui = navbarPage(
    useShinyjs(),
    inlineCSS(appCSS),

    tabPanel(title = "Start",

      # Loading message
      div(
        id = "loading-content",
        h2("Loading...")
      ),

      # The main app code goes here
      div(
        id = "app-content",
        p("This is a simple example of a Shiny app with a loading screen."),
        p("You can view the source code",
          tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
            "on GitHub")
        )
      )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
  ),

  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(2)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)

编辑：加载屏幕应用程序的原始链接已被删除。现在可以在 github 上访问它

4

1 回答 1

5

好吧，我相信您会喜欢这个解决方案，但它并不完美。关键是tagList，你可以在导航栏之前添加任何你想要的东西。

此外，我将填充添加到您的 CSS 代码中，现在导航栏中有一个标题。

不幸的是，navbarPage 无法以不复杂的方式隐藏。

library(shiny)
library(shinyjs)

appCSS <- "
#loading-content {
position: absolute;
padding: 10% 0 0 0;
background: #000000;
opacity: 0.9;
z-index: 100;
left: 0;
right: 0;
height: 100%;
text-align: center;
color: #FFFFFF;
}
"

shinyApp(
  ui =
      tagList(
        useShinyjs(),
        inlineCSS(appCSS), 
      # Loading message
      div(
        id = "loading-content",
        h2("Loading...")
      ),
    navbarPage("Test",
    tabPanel(title = "Start",

             # The main app code goes here
             div(
               id = "app-content",
               p("This is a simple example of a Shiny app with a loading screen."),
               p("You can view the source code",
                 tags$a(href = 'https://github.com/daattali/shiny-server/blob/master/loading-screen',
                        "on GitHub")
               )
             )
    ),

    tabPanel(title = "End",
             h2("Second tab"))
    ) #close navbarPage
    ), #close tagList
  server = function(input, output, session) {
    # Simulate work being done for 1 second
    Sys.sleep(5)

    # Hide the loading message when the rest of the server function has executed
    hide(id = "loading-content", anim = TRUE, animType = "fade")    
  }
)
于 2015-09-03T22:56:53.873 回答