个人中心
gpt4 book ai didi

jquery - 如何为 Shiny 模块内的元素定义 CSS

转载 作者：行者123 更新时间：2023-12-01 08:35:01 24 4
gpt4 key购买 nike

我正在尝试使用 Shiny 模块在 HTML 中实现以下结果:

外部 Shiny 模块:p标签是黑色的，当鼠标悬停在它上面时，光标应变为指针，颜色应变为灰色。

Shiny 模块内部:p标签是蓝色的，当鼠标悬停在它上面时，光标应更改为指针，颜色应更改为红色。

HTML 版本有效: demo 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        p{color:black;}
        p:hover{color:grey;cursor:pointer;}

        #mymodule p{color:blue;}
        #mymodule p:hover{color:red;cursor:pointer;}

    </style>
</head>
<body>
    <p>text outside module</p>
    <div id='mymodule'>
        <p>text inside module</p>
    </div>
</body>
</html>
    <p>some text</p>
</body>
</html>

我尝试为该模块添加 CSS，但似乎不起作用。我应该怎么办？感谢任何帮助，谢谢!

library(shiny)
library(glue)
library(shinyjs)

mymoduleUI <- function(id){
    ns <- NS(id)
    uiOutput(ns("text"))
}

mymodule <- function(input,output,session,color,colorHover){
    id <- session$ns("mymoduleUI")
    css_text <- glue("#{id} p{{color:{color};}}
                    #{id} p:hover{{color:{colorHover};}}")
    print(css_text)
    output$text <- renderUI({
        shinyjs::inlineCSS(rules = css_text)
        tags$p("text inside module")
    })
}


shinyApp(
    ui = basicPage(
        tags$head(tags$style("p{color:balck;}
                             p:hover{color:grey}")),
        tags$p("text outside module"),
        mymoduleUI("here")
    ),
    server = function(input, output) {
        callModule(module = mymodule,id = 'here',color="blue",colorHover="red")
    }
)



最佳答案

存在以下错误:

  1. 正如r2evans所指出的，缺少useShinyjs()语句
  2. 使用 session$ns("text") 而不是 session$ns("mymoduleUI")。 uiOutput 的 id 是 'here-text'，但原始版本返回 'here-mymoduleUI'。
  3. 如果您在创建元素的同时设置 css，则该元素将不会应用，因为那时该元素甚至不存在。

如果该模块有多个实例，每个实例都有不同的 css，我建议将 css 规则附加到 head ，如下所示。否则，如果只有一定数量的选项(例如:颜色:红色、蓝色、绿色)，那么我会事先创建 css 类，并使用 class = ....

代码:

mymodule <- function(input,output,session,color,colorHover){
  id <- session$ns("text")

  css_text <- glue("
    $('head').append('<style type=\"text/css\">#{id} p{{color:{color}}} #{id} p:hover{{ color:{colorHover}}}</style>');
  ")
  print(css_text)
  output$text <- renderUI({
    tags$p("text inside module")
  })

  observe( {
    shinyjs::runjs(css_text)
  })
}

输出:

Output

关于jquery - 如何为 Shiny 模块内的元素定义 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57367387/

24 4 0
文章推荐： sql - 如何在另一个数据库服务器上运行 T-SQL？
文章推荐： python - 使用 pyppeteer 与 asyncio 关联来抓取内容
文章推荐： django - 根据 "Two Scoops of Django"在 Django 中存储静态/模板文件的位置
文章推荐： python - Beautifulsoup - 在 soup.find() 中传递变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com