0
我用来使用shinyBS包在我的闪亮应用程序中放置一些进度条。但是使用bootstrap 3的新版本没有这个选项。 由于闪亮的包括进度条是不可定制的,我试图重新制作一个与引导程序3兼容的BS。它运行良好,但我没有设法更新它。更新Shiny-R自定义进度条
在此先感谢您的帮助!
这里是一个例子, NB:标签和大小不包括在JS中。
服务器:(从https://gist.github.com/artemklevtsov/d280c4343b052c2aaaef)
server <- function(input, output,session) {
tags$script(src="ShinyProgress.js"),
progressBar <- function(inputId,value = 0, label = FALSE, color = "info", size = NULL,
striped = FALSE, active = FALSE, vertical = FALSE) {
if (!is.null(size))
size <- match.arg(size, c("sm", "xs", "xxs"))
text_value <- paste0(value, "%")
if (vertical)
style <- htmltools::css(height = text_value, `min-height` = "2em")
else
style <- htmltools::css(width = text_value, `min-width` = "2em")
htmltools::tags$div(
class = "progress",
id=inputId,
class = if (!is.null(size)) paste0("progress-", size),
class = if (vertical) "vertical",
class = if (active) "active",
htmltools::tags$div(
class = "progress-bar",
class = paste0("progress-bar-", color),
class = if (striped) "progress-bar-striped",
style = style,
role = "progressbar",
`aria-valuenow` = value,
`aria-valuemin` = 0,
`aria-valuemax` = 100,
htmltools::tags$span(class = if (!label) "sr-only", text_value)
)
)
}
updatePB=function(session,inputId,value=NULL,label=NULL,color=NULL,size=NULL,striped=NULL,active=NULL,vertical=NULL) {
data <- dropNulls(list(id=inputId,value=value,label=label,color=color,size=size,striped=striped,active=active,vertical=vertical))
session$sendCustomMessage("updateprogress", data)
}
dropNulls=function(x) {
x[!vapply(x,is.null,FUN.VALUE=logical(1))]
}
observe({input$n1 ; updatePB(session,inputId="pb1",value=input$n1)})
}
UI:
ui <- fluidPage(
numericInput(inputId="n1", label="numeric input", value=10, min = 0, max = 100, step = 1),
mainPanel(progressBar(inputId="pb1",value=10))
)
我下面的js代码添加到www(如ShinyProgress.js):
Shiny.addCustomMessageHandler("updateprogress",
function(data) {
$el = $("#"+data.id);
if(data.hasOwnProperty('value')) {
$el.css('width', data.value+'%').attr('aria-valuenow', data.value);
};
if(data.hasOwnProperty('color')) {
$el.removeClass("progress-bar-standard progress-bar-info progress-bar-success progress-bar-danger progress-bar-warning");
$el.addClass("progress-bar-"+data.color);
};
if(data.hasOwnProperty('striped')) {
$el.toggleClass('progress-bar-striped', data.striped);
};
if(data.hasOwnProperty('active')) {
$el.toggleClass('active', data.active);
};
if(data.hasOwnProperty('vertical')) {
$el.toggleClass('vertical', data.vertical);
};
}
);
编辑:
我能够增加一些澄清,当执行,咏叹调,valuenow和宽度以及更新,但在主div中的修改没有考虑到的js代码:
<div aria-valuenow="100" style="width: 100%;" id="pb1">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" class="progress-bar progress-bar-info" role="progressbar" style="width:0%;min-width:2em;">
<span class="sr-only">0%</span>
</div>
</div>