[英]How to globally supply css to each radioGroupButtons widget in a shiny app
I have this minimal example adapted from here R shiny radiogroup Button change color :我有这个改编自这里的最小示例R shiny radiogroup Button change color :
library(shiny)
ui = fluidPage(
radioGroupButtons(
# status = "primary ", ## you can change status value to change to select few colors
inputId = "a",
checkIcon = list(yes = icon("check")),
choiceValues = 0:3,
choiceNames = paste0(0:3),
justified = TRUE, width = "300px"
),
tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),
radioGroupButtons(
# status = "primary ", ## you can change status value to change to select few colors
inputId = "b",
checkIcon = list(yes = icon("check")),
choiceValues = 0:3,
choiceNames = paste0(0:3),
justified = TRUE, width = "300px"
),
tags$script("$(\"input:radio[name='b'][value=0]\").parent().css('background-color', '#7EF373');"),
tags$script("$(\"input:radio[name='b'][value=1]\").parent().css('background-color', '#E7E7E7');"),
tags$script("$(\"input:radio[name='b'][value=2]\").parent().css('background-color', '#EDB6B2');"),
tags$script("$(\"input:radio[name='b'][value=3]\").parent().css('background-color', '#DE6B63');")
)
server = function(...) {}
shinyApp(ui, server)
It basically colors the grouped radio buttons.它基本上是 colors 分组单选按钮。
I would like to apply this colors to each radioGroupButtons Widget without using the four rows again and again.我想将此 colors 应用于每个 radioGroupButtons 小部件,而无需一次又一次地使用四行。
I tried doing it with a css file in the parent directory but I don't know how to write the four rows in css eg我试着用父目录中的 css 文件来做,但我不知道如何在 css 中写四行,例如
How to write:怎么写:
tags$script("$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');"),
tags$script("$(\"input:radio[name='a'][value=1]\").parent().css('background-color', '#E7E7E7');"),
tags$script("$(\"input:radio[name='a'][value=2]\").parent().css('background-color', '#EDB6B2');"),
tags$script("$(\"input:radio[name='a'][value=3]\").parent().css('background-color', '#DE6B63');"),
in the.css file and use it in the radioGroupButtons widget?在 .css 文件中并在 radioGroupButtons 小部件中使用它?
tags$script
is used to run some JavaScript code, this is not some CSS code ( tags$style
is used for CSS). tags$script
用于运行一些 JavaScript 代码,这不是一些 CSS 代码( tags$style
用于 CSS)。
The first part of this code:这段代码的第一部分:
$(\"input:radio[name='a'][value=0]\").parent().css('background-color', '#7EF373');
ie $(\"input:radio[name='a'][value=0]\")
selects one or more HTML elements.即
$(\"input:radio[name='a'][value=0]\")
选择一个或多个 HTML 元素。 Namely, it targets all radio inputs with a name
attribute equal to 'a'
and a value attribute equal to 0
.即,它以
name
属性等于'a'
和值属性等于0
的所有无线电输入为目标。 You can drop the part [name='a']
so that the other radio group is selected.您可以删除
[name='a']
部分,以便选择另一个单选组。
If you want to put this code in an external file, create a .js
file in the www subfolder containing this code:如果要将此代码放在外部文件中,请在包含此代码的www子文件夹中创建一个
.js
文件:
$(document).ready(function() {
$("input:radio[value=0]").parent().css('background-color', '#7EF373');
$("input:radio[value=1]").parent().css('background-color', '#E7E7E7');
$("input:radio[value=2]").parent().css('background-color', '#EDB6B2');
$("input:radio[value=3]").parent().css('background-color', '#DE6B63');
});
then include this file in your app by adding this code in the UI:然后通过在 UI 中添加此代码将此文件包含在您的应用程序中:
tags$head(tags$script(src = "yourJSfile.js")),
See here for more information about selection by attribute value.有关按属性值选择的更多信息,请参见 此处。
You could also proceed as follows:您也可以按以下方式进行:
$(document).ready(function() {
$("input:radio").each(function() {
var value = $(this).attr("value");
var color;
switch(value) {
case 0:
color = "#E7E7E7";
break;
case 1:
color = "#EDB6B2";
break;
case 2:
color = "#AAAAAA";
break;
case 3:
color = "#DE6BB3";
}
$(this).parent().css('background-color', color);
});
});
Or if you want to target only these two radio groups:或者,如果您只想定位这两个无线电组:
$(document).ready(function() {
$("input:radio").each(function() {
var name = $(this).attr("name");
if(name === "a" || name === "b") {
var value = $(this).attr("value");
var color;
switch(value) {
......
}
$(this).parent().css('background-color', color);
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.