2017-12-16 13 views
1

Shiny 애플리케이션을 구축하고 있으며 일부 사용자 (이 레이아웃에 익숙하지 않은 사용자)는 애플리케이션이 탭과 함께 작동하며 보이지 않는 것을 이해하지 못합니다. 어디에서 홈페이지로 이동합니다.shiny : 이미지를 클릭 할 때 탭을 변경하십시오.

그래서 내가 메인 페이지에 큰 infography를 표시하려고하고, 클릭하면 두 번째 탭이 자동으로 활성화됩니다. 나는 이미지에 링크를 추가하는 방법을 알고 :

tags(a(img(src="image.png"), href="link.com")) 

그리고 프로그래밍 다른 탭을 선택하는 방법을 알고 :

updateTabsetPanel(session, inputId="navbar", selected="tab2") 

하지만 어떻게 그 두 작업을 결합? 당신은 이미지 id을주고, shinyjs에서 onclick() 기능을 사용할 수 있습니다

+1

탭 패널이 아닌 NavBar 메뉴를 사용해 본 적이 있습니까? –

+0

글쎄, 나는 앱의 홈페이지에 많은 정보를 넣어야했기 때문에 탭이 너무 뚜렷해 보이지 않았다. 메뉴를 추가하면 이미지를 클릭 할 수있는 메뉴 *가 추가 될 수 있지만 확실하지 않습니다. – agenis

+0

그냥 생각합니다. Navbar 메뉴는 대부분의 테마에서 눈에 띄며 약간의 CSS 코드만으로 쉽게 Navbar 색상 등을 사용자 정의 할 수 있습니다. –

답변

2

감사합니다. 실제 사례 :

require(shiny) 
require(shinyjs) 


ui <- fluidPage(
    img(id="my_img",src="image.png",style="cursor:pointer;"), 
    useShinyjs(), 
    tabsetPanel(id="navbar", 
       tabPanel("tab1", p("This is tab 1")), 
       tabPanel("tab2", p("This is tab 2")) 
) 
) 



server <- function(input, output,session){ 

    shinyjs::onclick("my_img", updateTabsetPanel(session, inputId="navbar", selected="tab2")) 

} 

shinyApp(ui,server) 

희망이 있습니다.

+0

플로리안에게 감사드립니다, 나는 정말로 좋은 물건으로 가득 찬 shinyjs packagr을 파헤쳐 야한다고 생각합니다. 이 솔루션은 완벽하게 작동합니다. 마우스 아이콘이 마우스를 움직일 때 변경되지 않는다는 사실을 제외하고는 (클릭 가능한 링크 일종임을 나타냅니다. – agenis

+0

안녕 agenis, shinyjs는 Dean Attali의 멋진 패키지입니다. 그의 물건을 더 살펴볼 가치가 있습니다. 블로그/웹 사이트에서 많은 것을 배웠습니다. 어쨌든 커서를 변경하는 것은 맞춤 CSS로 수행 할 수 있습니다. 업데이트 된 예를 참조하십시오. – Florian

+0

감사합니다. 이제 완벽합니다. – agenis