【问题标题】:navebarMenu is always highlightednavebarMenu 始终突出显示
【发布时间】:2017-10-16 19:48:37
【问题描述】:

我有一个navbarPage,其中我有三个navbarMenu。但是第一个navbarMenu,即“帮助”总是默认突出显示,而navbarMenu tabpanel“手动”也总是突出显示。如何避免这种情况。示例代码如下所示

ui.r

shinyUI(fluidPage(theme = "bootstrap.css",
                  (navbarPage("B Version",
                              position = c("fixed-top"),
                              fluid=TRUE,
                              navbarMenu("Help",
                                         tabPanel(
                                           a("Manual",
                                             target="_blank", href="Manual.pdf")
                                         ),
                                         tabPanel(
                                           a("Supporte",
                                             target="_blank", href="gpl.pdf")
                                         ),
                                         tabPanel(
                                           a("Tutorials",
                                             downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                             downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                           )
                                         )
                              ),
                              navbarMenu("Sample Data",
                                         tabPanel(
                                           downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                         )
                              ),
                              navbarMenu("Stand-Alone Version",
                                         tabPanel(
                                           downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           a("Stand-alone Manual",
                                             target = "_blank", href= "Stand-alone.pdf")
                                         )
                              )

                  )
                  )
)
)

server.r

shinyServer(function(input, output,session) {
})

----------------------------------------------- --------------------

*编辑

这部分展示了它对@amrrs 提供的答案的反应。按下光标时显示数据,然后再次消失。

ui.r

shinyUI(fluidPage(theme = "bootstrap.css",
                  tags$script("setInterval(function(){
                              $('.active').removeClass('active');//remove class active
                              },1000);"),
                  (navbarPage("B Version",
                              position = c("fixed-top"),
                              fluid=TRUE,selected = "none",
                              navbarMenu("Help", 
                                         tabPanel(
                                           a("Manual",
                                             target="_blank", href="Manual.pdf")
                                         ),
                                         tabPanel(
                                           a("Supporte",
                                             target="_blank", href="gpl.pdf")
                                         ),
                                         tabPanel(
                                           a("Tutorials",
                                             downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                             downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                           )
                                         )
                              ),
                              navbarMenu("Sample Data",
                                         tabPanel(
                                           downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                         )
                              ),
                              navbarMenu("Stand-Alone Version",
                                         tabPanel(
                                           downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                         ),
                                         tabPanel(
                                           a("Stand-alone Manual",
                                             target = "_blank", href= "Stand-alone.pdf")
                                         )
                              )


)
),

br(),
br(),



sidebarLayout(
  sidebarPanel(
    h5("Upload Data Files",style="bold"),
    fileInput("files", 
              "Choose CSV/txt processed files or raw files",
              multiple = "TRUE",
              accept=c('text/csv',
                       'text/comma-separated-values,
                       text/plain', '.csv','.cel','.TXT','.txt'))

                      ),

                    mainPanel(
                      tabsetPanel(id = "MaTabs",
                        tabPanel("Source-data", dataTableOutput("sourced"))
                      )

                    )
                    )))

server.r

shinyServer(function(input, output,session) {

  output$sourced <- renderDataTable(mtcars)
})

【问题讨论】:

    标签: r shiny


    【解决方案1】:

    基于这个answer添加一个小sn-p的js会有所帮助。

    更新的代码仅对导航有效:

     shinyUI(fluidPage(theme = "bootstrap.css",
                      tags$script("setInterval(function(){
                                  $('.nav').removeClass('active');//remove class active
                                  },1000);"),
                      (navbarPage("B Version",
                                  position = c("fixed-top"),
                                  fluid=TRUE,selected = "none",
                                  navbarMenu("Help", 
                                             tabPanel(
                                               a("Manual",
                                                 target="_blank", href="Manual.pdf")
                                             ),
                                             tabPanel(
                                               a("Supporte",
                                                 target="_blank", href="gpl.pdf")
                                             ),
                                             tabPanel(
                                               a("Tutorials",
                                                 downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                                 downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                               )
                                             )
                                  ),
                                  navbarMenu("Sample Data",
                                             tabPanel(
                                               downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                             ),
                                             tabPanel(
                                               downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                             ),
                                             tabPanel(
                                               downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                             )
                                  ),
                                  navbarMenu("Stand-Alone Version",
                                             tabPanel(
                                               downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                             ),
                                             tabPanel(
                                               a("Stand-alone Manual",
                                                 target = "_blank", href= "Stand-alone.pdf")
                                             )
                                  )
    
    
    )
    ),
    
    br(),
    br(),
    
    
    
    sidebarLayout(
      sidebarPanel(
        h5("Upload Data Files",style="bold"),
        fileInput("files", 
                  "Choose CSV/txt processed files or raw files",
                  multiple = "TRUE",
                  accept=c('text/csv',
                           'text/comma-separated-values,
                           text/plain', '.csv','.cel','.TXT','.txt'))
    
                  ),
    
      mainPanel(
        tabsetPanel(id = "MaTabs",
                    tabPanel("Source-data", dataTableOutput("sourced"))
        )
    
      )
    )))
    

    【讨论】:

    • 我有tabpanel 显示数据,如果我移除光标,它不会显示数据
    • 它应该只禁用navbarPage
    • 抱歉,您的意思是只有当您将光标打开时才会显示标签面板?
    • 我的意思是tabpanel上的数据只有在光标打开时才会显示
    • 能否更新一下代码以及tabpanel数据如何显示的截图?
    【解决方案2】:

    要从第一个 navbarMenu 中删除突出显示,您可以在 navbarPage 函数中添加参数 selected = "none"。要从 navbarMenu tabpanel 中删除突出显示,您可以使用以下 css:

    tags$style(type = 'text/css', ".navbar-default .navbar-nav .open .dropdown-menu .active a{color : #333; background-color:#f5f5f5;}")

    所以在你的代码中应该是这样的:

    shinyUI(fluidPage(theme = "bootstrap.css",
                                 tags$style(type = 'text/css', ".navbar-default .navbar-nav .open .dropdown-menu .active a{color : #333; background-color:#f5f5f5;}"),
    
                                (navbarPage("B Version",
                                            position = c("fixed-top"),
                                            fluid=TRUE,selected = "none",
                                            navbarMenu("Help", 
                                                       tabPanel(
                                                         a("Manual",
                                                           target="_blank", href="Manual.pdf")
                                                       ),
                                                       tabPanel(
                                                         a("Supporte",
                                                           target="_blank", href="gpl.pdf")
                                                       ),
                                                       tabPanel(
                                                         a("Tutorials",
                                                           downloadLink("AbE", "Expression", class=" fa fa-cloud-download"),
                                                           downloadLink("DiEx", "Expression", class=" fa fa-cloud-download")
                                                         )
                                                       )
                                            ),
                                            navbarMenu("Sample Data",
                                                       tabPanel(
                                                         downloadLink("AData", " Aff", class=" fa fa-cloud-download")
                                                       ),
                                                       tabPanel(
                                                         downloadLink("CData", " Code", class=" fa fa-cloud-download")
                                                       ),
                                                       tabPanel(
                                                         downloadLink("IData", " Il", class=" fa fa-cloud-download")
                                                       )
                                            ),
                                            navbarMenu("Stand-Alone Version",
                                                       tabPanel(
                                                         downloadLink("CodeandData", " app", class=" fa fa-cloud-download")
                                                       ),
                                                       tabPanel(
                                                         a("Stand-alone Manual",
                                                           target = "_blank", href= "Stand-alone.pdf")
                                                       )
                                            )
    
                                )
                                )
        )
        )
    

    这样你得到的输出是:

    【讨论】:

    • 感谢您的尝试。它变得更可怕 1) Help 的突出显示消失了,但对于 navebarMenu,它变成灰色并且看起来一点也不好看。
    • 那么,您不希望navbarMenu 即使在被点击时也被突出显示?
    • 我也想突出显示navbarMenu,但在您的代码中,每个navbarMenu 的第一个tabpanel 变为灰色,而其他颜色相同。编辑:我也有引导程序bootstrap.css,它不包含在代码中。
    • 在我的例子中,如屏幕截图所示,所有tabpanel 都是相同颜色(黑色)。
    • 每个navbarMenu 中的第一个tabpanel 始终保持突出显示。
    猜你喜欢
    • 2015-03-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-03
    • 1970-01-01
    • 2017-03-09
    • 2014-01-04
    • 2013-01-09
    相关资源
    最近更新 更多