关键词：
【中文标题】用shinyjs改变shinydashboard框的样式【英文标题】：Change style of shinydashboard box with shinyjs 【发布时间】：2021-06-13 19:11:37 【问题描述】：我正在尝试根据用户所在的选项卡更改闪亮仪表板框的颜色。 为此，我从 tabsetPanel 获取输入值，并尝试使用 shinyjs 更改 box-header 类的 css。不幸的是，我的试验都没有成功。这是一个可重现的示例（颜色尚未适应选项卡，但我会在第二部分中这样做）
library(shiny)
ui <- fluidPage(
shinyWidgets::useShinydashboard(),
tabsetPanel(
id = "mytab",
tabPanel("First",
shinydashboard::box(status = "primary",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
)),
tabPanel("Second", p("Second tab"))))
server <- function(input, output)
observeEvent(input$mytab,
shinyjs::runjs("$('.box-header').css('background', 'red');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
)
shinyApp(ui = ui, server = server)
我尝试了第一次和第二次 runjs 调用之间的所有组合，但都失败了。
【问题讨论】：
【参考方案1】：您只是在ui 中缺少useShinyjs()。试试这个
library(shiny)
ui <- fluidPage(
useShinyjs(),
shinyWidgets::useShinydashboard(),
#tabBox( id = "mytab", width=6, title = "My Test Plot",
tabsetPanel(id = "mytab",
tabPanel("First", value="tab1",
shinydashboard::box(status = "primary",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders", "Orders", min = 1, max = 2000, value = 650)
)),
tabPanel("Second", value="tab2", p("Second tab"),
shinydashboard::box(status = "warning",
title = "mybox",
solidHeader = TRUE, collapsible = TRUE,
sliderInput("orders2", "Orders", min = 1, max = 2000, value = 950)
))
)
)
server <- function(input, output)
observeEvent(input$mytab,
if (input$mytab=="tab1")
shinyjs::runjs("$('.box-header').css('background', 'red');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:red !important');")
else if (input$mytab=="tab2")
shinyjs::runjs("$('.box-header').css('background', 'blue');")
shinyjs::runjs("$('.box.box-solid.box-primary > .box-header').attr('style', 'background:blue !important');")
)
shinyApp(ui = ui, server = server)
【讨论】：
我们不需要运行多个runjs。多行可以包裹在一个runjs中【参考方案2】：https://rstudio.github.io/shinydashboard/appearance.html#css
## ui.R ##
dashboardPage(
dashboardHeader(title = "Custom font"),
dashboardSidebar(),
dashboardBody(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
)
)
【讨论】：
如何使用shinyjs从服务器更改shinydashboard中的标题颜色
】如何使用shinyjs从服务器更改shinydashboard中的标题颜色【英文标题】：Howtochangethetitlecolorinshinydashboardfromserverusingshinyjs【发布时间】：2021-11-1918:16:47【问题描述】：我想从服务器部分更改闪亮仪表板中标题的标题。简单的文本，... 查看详情
Shinydashboard 使下载按钮变灰？
】Shinydashboard使下载按钮变灰？【英文标题】：ShinydashboardgrayedoutdownloadButton?【发布时间】：2016-07-1819:23:06【问题描述】：如何修复这个简单示例中的下载按钮？library(shiny)library(shinydashboard)library(shinyjs)header<-dashboardHeader()sidebar&... 查看详情
将垂直滚动条添加到 shinyjs 下拉按钮 - 闪亮
...单添加垂直滚动条。请检查我的代码，library(shiny)library(shinydashboard)libra 查看详情
R shinyDashboard 自定义框状态颜色
】RshinyDashboard自定义框状态颜色【英文标题】：RshinyDashboardcustomizeboxstatuscolor【发布时间】：2016-07-0423:31:46【问题描述】：我想自定义闪亮应用的框状态颜色。我找到了一种css方法来更改这些框的框背景颜色但不自定义状态颜色... 查看详情
无法将元素放置到内联块
...我需要元素并排放置，而不是在块中。library(shiny)library(shinydashboard)library(shinyjs)ui<-dashboardPage(das 查看详情
如何在 Shiny Dashboard 的框中将表格居中
】如何在ShinyDashboard的框中将表格居中【英文标题】：HowtocentertableinboxinShinyDashboard【发布时间】：2019-01-2822:28:18【问题描述】：我很难将我在ShinyDashboard中制作的表格放在一个盒子中。我使用了一个.csv文件，但这里有一些假数据... 查看详情
Shinyjs 无法正确启用/禁用 UI 元素
】Shinyjs无法正确启用/禁用UI元素【英文标题】：Shinyjscantenable/disableUIelementproperly【发布时间】：2019-11-1423:02:02【问题描述】：我有以下闪亮的应用程序library(shiny)runApp(shinyApp(ui=fluidPage(shinyjs::useShinyjs(),selectizeInput(inputId="aaa",label=N... 查看详情
启用/禁用不使用 flexdashboard+shinyjs
】启用/禁用不使用flexdashboard+shinyjs【英文标题】：Enable/disablenotworkingwithflexdashboard+shinyjs【发布时间】：2020-01-2404:00:57【问题描述】：我知道thisissue并且它显然已经解决了，但我仔细检查了我是否有相关软件包的最新版本，disable... 查看详情
将公司徽标添加到 ShinyDashboard 标题
】将公司徽标添加到ShinyDashboard标题【英文标题】：AddingacompanyLogotoShinyDashboardheader【发布时间】：2015-10-0502:14:44【问题描述】：很好奇，有没有办法在ShinyDashboard的标题中添加公司徽标？当我查看documentation时，它描述了更改CSS中... 查看详情
错误：shinyjs：extendShinyjs：必须提供`functions`参数
】错误：shinyjs：extendShinyjs：必须提供`functions`参数【英文标题】：Error:shinyjs:extendShinyjs:`functions`argumentmustbeprovided【发布时间】：2021-07-1218:20:36【问题描述】：我对Shiny很陌生，所以这可能是一个直截了当的答案。数据可视化应... 查看详情
用css改变下拉框样式
...>其他编程语言问题描述:就像文本输入框<input>样式改变一样我要改变的是<select><option></option></select>标签下拉框的样式另外补充一点我不要作成模拟下拉框不要看且麻烦（除非你有很简单的模拟下拉框~HOHO... 查看详情
使用 shinyjs 和 flexdashbord 动态显示/隐藏输入
】使用shinyjs和flexdashbord动态显示/隐藏输入【英文标题】：Dynamicallyshow/hideinputwithshinyjsandflexdashbord【发布时间】：2017-05-1823:25:18【问题描述】：点击标签时尝试更新flexdashboard中的侧边栏。无法让它工作。---title:"TestSidebar"output:flex... 查看详情
使用 shinyjs 切换表单水平输入及其标签
】使用shinyjs切换表单水平输入及其标签【英文标题】：Togglingaform-horizontalinputanditslabelusingshinyjs【发布时间】：2019-11-0720:56:36【问题描述】：下面的应用程序有两个selectInputs（month_abbr和month_full）和一个checkboxInput（abbr）。我想在... 查看详情
shinyjs 不会隐藏使用 renderUI 创建的按钮
】shinyjs不会隐藏使用renderUI创建的按钮【英文标题】：shinyjswon\'thidebuttoncreatedwithrenderUI【发布时间】：2021-06-2616:14:02【问题描述】：我有一个使用shinyproxy制作的闪亮应用程序。在server.R上，我使用renderUI创建了一些UI元素，如下... 查看详情
ggplotly 和 shinydashboard 框的布局问题
】ggplotly和shinydashboard框的布局问题【英文标题】：Layoutproblemswithggplotlyandshinydashboardboxes【发布时间】：2021-11-1903:30:55【问题描述】：我遇到了ggplotly对象的问题，它根本没有留在带有闪亮和闪亮仪表板的盒子里。在绘制某些东西... 查看详情
使用 ShinyJS 初始化隐藏元素
】使用ShinyJS初始化隐藏元素【英文标题】：InitalisinghiddenelementswithShinyJS【发布时间】：2020-02-1218:25:17【问题描述】：我想在闪亮的应用程序启动时隐藏一个元素，但与thisexample不同的是，要隐藏的元素是可见的较大元素的一部分... 查看详情
在 Shinydashboard 中渲染 ggplot 时出现致命错误
】在Shinydashboard中渲染ggplot时出现致命错误【英文标题】：Fatalerrorwhenrenderingggplotinshinydashboard【发布时间】：2021-11-1512:02:56【问题描述】：在闪亮仪表板中渲染ggplot时出现R致命错误（重磅炸弹->重新启动会话）。基本hist绘图的... 查看详情
使用 shinyjs 使用 javascript 在闪亮的应用程序中操作现有的传单地图
】使用shinyjs使用javascript在闪亮的应用程序中操作现有的传单地图【英文标题】：ManipulateexistingLeafletmapinashinyappwithjavascriptusingshinyjs【发布时间】：2018-10-0712:47:30【问题描述】：我有一个闪亮的应用程序，其中包含现有的传单地... 查看详情