Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >闪亮:单击选项卡中的按钮会隐藏按钮/问题/单选按钮,并在相同的选项卡中显示结果。

闪亮:单击选项卡中的按钮会隐藏按钮/问题/单选按钮,并在相同的选项卡中显示结果。
EN

Stack Overflow用户
提问于 2022-01-31 18:37:49
回答 1查看 323关注 0票数 0

我有一个包含n个问题的选项卡,每个选项卡都与Likert风格的单选按钮相关。我想以多种不同的方式(情节等)显示选定的答案。而不切换到或创建其他选项卡。相反,我想在用于问题/单选按钮的同一个选项卡中显示结果--即按下按钮隐藏问题、单选按钮和提交按钮,并显示,例如,带有结果的绘图或表格。

我创建了一个MWE,说明了我目前的方法。由于我不知道如何最好地解决这个问题,所以我创建了三个不同的选项卡,名为QuestionsResultsHide,目的是隐藏Results选项卡,直到单击submit按钮,该按钮将显示Results选项卡并隐藏Questions选项卡。我还没有找到隐藏Questions选项卡的方法,这就是为什么我创建Hide选项卡作为测试的原因。

代码语言:javascript
运行
AI代码解释
复制
library(shiny)
library(shinyjs)

ui <- tagList(
    useShinyjs(),
    navbarPage(
        "Hide questions/buttons and display results in same tab",
        id = "navbar",
        tabPanel(title = "Questions",
                 id = "questions",
                 h1("Example questions"),
                 uiOutput("myradios"),
                 actionButton("button", "Run analysis")
        ),
        tabPanel(
            title = "Results",
            value = "results",
            tableOutput("tableOutput"),
            h1("Here are the results"),
            textOutput("txt")
        ),
        tabPanel(
            title = "Hide",
            value = "hide",
            h1("This tab will be hidden when the button in 'Questions' tab is clicked")
        )
    )
)

server <- function(input, output, session) {
    observe({
        hide(selector = "#navbar li a[data-value=results]")
        show(selector = "#navbar li a[data-value=hide]")
    })
    
    output$tableOutput <- renderTable({
        if(input$button > 0){
            toggle(selector = "#navbar li a[data-value=results]")
            toggle(selector = "#navbar li a[data-value=hide]")
        }else{
            NULL
        }
    })
    outputOptions(output, "tableOutput", suspendWhenHidden=F)
    
    nameList <- c("Q1", "Q2")
    questionList <- c("This is question 1", "This is question 2")
    
    all_radios <- list()
    for (i in 1:length(nameList)) {
        all_radios[[i]] <- p(radioButtons(nameList[i], questionList[i], c("Disagree strongly" = "1", "Disagree a little" = "2","Neutral; no opinion" = "3","Agree a little" = "4","Agree strongly" = "5"), inline=T, selected=0))
    }
    
    output$myradios <- renderUI(all_radios)
    
    output$txt <- renderText({
        return(paste("The answers are:", input$Q1, "and", input$Q2, sep=" "))
    })
    
    
}
shinyApp(ui = ui, server = server)

除了上面描述的显而易见的代码之外,这个代码还有很多错误。例如,单击submit按钮再次隐藏“结果”选项卡。

我将非常感谢任何帮助或指点。

编辑:

感谢@YBS的回答,这是一个工作解决方案,它在单击按钮后也隐藏了该按钮:

代码语言:javascript
运行
AI代码解释
复制
library(shiny)
library(shinyjs)

ui <- tagList(
    useShinyjs(),
    navbarPage(
        "Hide questions/buttons and display results in same tab",
        id = "navbar",
        tabPanel(title = "Questions",
                 id = "questions",
                 h1("Example questions"),
                 uiOutput("myradios"),
                 textOutput("txt"),
                 actionButton("button", "Run analysis")
        )
    )
)

server <- function(input, output, session) {
        
    nameList <- c("Q1", "Q2")
    questionList <- c("This is question 1", "This is question 2")
    
    all_radios <- list()
    for (i in 1:length(nameList)) {
        all_radios[[i]] <- p(radioButtons(nameList[i], questionList[i], c("Disagree strongly" = "1",
                                                                          "Disagree a little" = "2",
                                                                          "Neutral; no opinion" = "3",
                                                                          "Agree a little" = "4",
                                                                          "Agree strongly" = "5"),
                                          inline=T,
                                          selected=0))
    }
    
    output$myradios <- renderUI(all_radios)
    
    output$txt <- renderText({
        return(paste("The answers are:", input$Q1, "and", input$Q2, sep=" "))
    })
    
    
    observeEvent(input$button, {
        k <- input$button %% 2
        if (k==1) {
            hide("myradios")
            show("txt")
            hide("button")
        }else {
            show("myradios")
            hide("txt")
        }
    }, ignoreNULL = FALSE)
    
}
shinyApp(ui = ui, server = server)
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-31 20:19:51

也许你在找这个。

代码语言:javascript
运行
AI代码解释
复制
library(shiny)
library(shinyjs)

ui <- tagList(
  useShinyjs(),
  navbarPage(
    "Hide questions/buttons and display results in same tab",
    id = "navbar",
    tabPanel(title = "Questions",
             id = "questions",
             h1("Example questions"),
             uiOutput("myradios"),
             textOutput("txt"),
             actionButton("button", "Run analysis")
    ),
    tabPanel(
      title = "Results",
      value = "results",
      tableOutput("tableOutput"),
      h1("Here are the results"),
      textOutput("txt1")
    ),
    tabPanel(
      title = "Hide",
      value = "hide",
      h1("This tab will be hidden when the button in 'Questions' tab is clicked")
    )
  )
)

server <- function(input, output, session) {
  observe({
    hide(selector = "#navbar li a[data-value=results]")
    show(selector = "#navbar li a[data-value=hide]")
  })
  
  output$tableOutput <- renderTable({
    if(input$button > 0){
      toggle(selector = "#navbar li a[data-value=results]")
      toggle(selector = "#navbar li a[data-value=hide]")
    }else{
      NULL
    }
  })
  outputOptions(output, "tableOutput", suspendWhenHidden=F)
  
  nameList <- c("Q1", "Q2")
  questionList <- c("This is question 1", "This is question 2")
  
  all_radios <- list()
  for (i in 1:length(nameList)) {
    all_radios[[i]] <- p(radioButtons(nameList[i], questionList[i], c("Disagree strongly" = "1", "Disagree a little" = "2","Neutral; no opinion" = "3","Agree a little" = "4","Agree strongly" = "5"), inline=T, selected=0))
  }
  
  output$myradios <- renderUI(all_radios)
  
  output$txt <- renderText({
    return(paste("The answers are:", input$Q1, "and", input$Q2, sep=" "))
  })
  output$txt1 <- renderText({
    return(paste("The answers are:", input$Q1, "and", input$Q2, sep=" "))
  })
  
  observeEvent(input$button, {
    k <- input$button %% 2
    #print(k)
    if (k==1) {
      hide("myradios")
      show("txt")
    }else {
      show("myradios")
      hide("txt")
    }
  }, ignoreNULL = FALSE)
  
}
shinyApp(ui = ui, server = server)
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70935034

复制
相关文章
【C#】使用IExtenderProvider为控件添加扩展属性,像ToolTip那样
- 文中的“控件”一词是广义上的说法,泛指包括ToolStripItem、MenuItem在内单个界面元素,并不特指继承自Control类的狭义控件
AhDung
2018/09/13
1.7K0
【C#】使用IExtenderProvider为控件添加扩展属性,像ToolTip那样
[Flutter Widget]Tooltip
在前面的文章中我们讲到了Wrap的用法,介绍了Flutter中的流式布局,在文章的最后让大家实现如下效果:
flyou
2018/10/16
3.2K0
bootstrap tooltip
<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" type="text/css"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <script> ('[data-toggle="tooltip"]').tooltip() }) </script> </head> <body> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button> </body> </html>
用户5760343
2019/07/07
1.4K0
jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框,让它们可自定义,您只需要调整它们的内容、位置和外观即可。
陈不成i
2021/07/23
1.2K0
前端实现tooltip
鼠标悬浮在问号图标上, 下方展示提示文本..tooltip { margin: 8px; padding: 8px; border: 1px solid #CCCCCC; background-color: #F6DBB3; position: absolute; z-index: 2;}.arrow-div { position: absolute; z-index: 3; display: inline-block; border-top: 1
code-x
2022/11/17
1.1K0
ElementUI中动态修改tooltip内容
在博客开发过程中,遇到这样一个需求:随着用户发布文章数量增多,每一类文章的数量在动态变化,需要在tooltip中动态修改文章数量,像下面这张图:
Marigold
2022/06/17
3.7K0
ElementUI中动态修改tooltip内容
扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
infragistics是全球领先的UI工具和用户体验的专家,Infragistics开发了一系列的炫目的Windows、Web、WPF和Silverlight控件,相信很多人在使用它们。我们现在的项目就在使用Infragistics的Windows Form控件集。虽然这些控件功能强大,也不可能满足你所有的需求,尤其是那些比较苛刻的最终用户的需求。比如,我们最近就接收到这样一个变态的需求:让所以菜单项、工具栏按钮、网格单元的ToolTip以气球式的样式显示。最终,我不得不通过对现有控件的扩展实现这个要求。
蒋金楠
2018/01/16
1.3K0
扩展ToolBarManager、ListView和Grid控件以实现气球式的ToolTip
Angular 自定义指令 Tooltip
Yeah,关注我的读者应该知道,上一篇文章了解 Angular 开发的内容,我们已经概览了 Angular 的相关内容。在自定义指令的部分,我们已经能够实现编写,但是,在实际场景中,我们还需要标准化的管理。
Jimmy_is_jimmy
2022/04/15
1.5K0
Angular 自定义指令 Tooltip
BOOtstrap源码分析之 tooltip、popover
一、tooltip(提示框) 源码文件: Tooltip.js Tooltip.scss 实现原理: 1、获取当前要显示tooltip的元素的定位信息(top、left、bottom、right、width、height等) 2、计算tooltip的位置,是top、left、bottom、right其中一个 3、然后根据计算的位置值,运算出坐标值 4、给tooltip应用坐标值 源码分析: 1、ownerDocument:文档;包含两个对象:<DocType>、documentElement(根节点) 2
sam dragon
2018/01/17
2K0
BOOtstrap源码分析之 tooltip、popover
tooltip(title美化)教程——jquery的特效
浏览器自带的alt和title提示太丑了,所以我们需要美化一下,百度有许多,不过对我们这些小白来说很难。 首先复制下面代码到网站底部: var sweetTitles = { x: 10, y: 20, tipElements: "a,span,img,div ", noTitle: false, init: function() { var b = this.noTitle; $(this.tipElements).each(function() { $(this).m
Youngxj
2018/06/06
5.5K0
CListCtrl实现tooltip信息提示
EnableToolTips(TRUE); m_tooltip.Create(this); m_tooltip.SetMaxTipWidth(500); m_tooltip.Activate(TRUE);
全栈程序员站长
2022/09/09
1.3K0
Bootstrap3 修改tooltip默认的颜色
.tooltip-inner { background-color: #f7df4b; color: black; } .tooltip.top .tooltip-arrow { border-top-color: #f7df4b; } .tooltip.bottom .tooltip-arrow { border
kirin
2021/01/20
1K0
echarts tooltip trigger: 'axis'没有作用
今天在使用echarts3柱形图时遇到一个问题,鼠标略过横轴时没有如期出现提示信息,相关设置如下:
johnhuster的分享
2022/03/28
2.1K0
Flutter基础widgets教程-Tooltip篇
1 Tooltip 一个文本提示工具,帮助解释一个按钮或其他用户界面,当widget长时间按下时(当用户采取其他适当操作时)显示一个提示标签 2 构造函数 Tooltip({ Key key, @required this.message, this.height, this.padding, this.margin, this.verticalOffset, this.preferBelow, this.excludeFromSemantic
青年码农
2020/10/10
9050
Flutter基础widgets教程-Tooltip篇
flask popper对tooltip做美化(flask 38)
<small data-toggle="tooltip" data-placement="top" data-timestamp="{{ message.timestamp.strftime('%Y-%m-%dT%H:%M:%SZ') }}" data-delay="500"> {{ moment(message.timestamp).fromNow(refresh=True) }} </small> <script type="text/javascript" src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
用户5760343
2019/08/13
7840
【Flutter 组件集录】Tooltip 与 Overlay
今天是八月更文的最后一天,带大家看一下 Tooltip 组件的实现,从而引出 Overlay 组件的使用方式。 Tooltip 组件主要的作用是在鼠标悬浮或长按手势下触发消息提示。它继承自 StatefulWidget ,其中必须传入 String 类型的 message ,还有很多其他的参数用于配置。
张风捷特烈
2022/03/18
1.8K0
【Flutter 组件集录】Tooltip 与 Overlay
tooltip.css-2.0文档
只需在页面中引入"tooltip.css"或“tooltip.min.css”文件即可。
用户6167509
2019/09/04
7770
C#-ToolTIp和Popup简单使用
很多时候我们需要做一个提示框,来给用户说明这个元素的作用,比如鼠标移动到哪个元素上面,显示一个弹出框并显示这个元素的相关介绍,想到提示内容,我们很容易想到toolip和Popup,接下来就来分别是用一下这两个控件。
kdyonly
2023/03/03
1.2K0
基于bootstrap3响应式Tooltip提示插件
ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。 该jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。它的特点有:
小狐狸说事
2022/12/01
1.1K0
基于 HTML5 Canvas 的拓扑组件 ToolTip 应用
ToolTip 效果是网页制作中常见的使用特效。当用户将鼠标悬浮在某个控件上时,ToolTip 显示并向用户展示相应的提示信息;当鼠标离开时,ToolTip 隐藏。一般情况下,我们使用 ToolTip 只是显示一句话或几个字,其实我们还可以展示很多信息。而今天的重点则是通过 Hightopo 的 HT for Web 产品来制作多种样式的 ToolTip。
HT for Web
2020/03/26
1.3K0

相似问题

仅使用XAML切换Button控件的ToolTip

22

控件WPF上的ToolTip

31

C# ToolTip问题

12

ToolTip与Popup (WPF控件)

20

正确更新控件上的ToolTip

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档