搜索
查看: 1569|回复: 0

给菜单栏添加前进后退按钮-JS技巧

[复制链接]

634

主题

1182

帖子

4030

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4030
发表于 2017-8-27 20:07:57 | 显示全部楼层 |阅读模式
Next and previous button for a TabBox
原贴见:https://antoineguillot.wordpress ... hiny-app-shines-13/效果如下:

理解了之后实现起来其实很简单!

但是需要有JavaScript知识,其实shiny用到高级,全部是JS的技巧,无它。

UI界面如下:
[AppleScript] 纯文本查看 复制代码
library(shiny)
library(shinydashboard)
dashboardPage(
  dashboardHeader(disable = T),
  dashboardSidebar(disable = T),
  dashboardBody(box(width=12,
                    tabBox(width=12,id="tabBox_next_previous",
                           tabPanel("Tab1",p("This is tab 1")),
                           tabPanel("Tab2",p("This is tab 2")),
                           tabPanel("Tab3",p("This is tab 3")),
                           tabPanel("Tab4",p("This is tab 4")),
                           tags$script("
    $('body').mouseover(function() {
                                       list_tabs=[];
                                       $('#tabBox_next_previous li a').each(function(){
                                       list_tabs.push($(this).html())
                                       });
                                       Shiny.onInputChange('List_of_tab', list_tabs);})
                                       ")
                    ),
                    uiOutput("Next_Previous")
  )
  )
)


server代码是:
[AppleScript] 纯文本查看 复制代码
library(shiny)
library(shinydashboard)
shinyServer(function(input, output,session) {
  Previous_Button=tags$div(actionButton("Prev_Tab",HTML('
<div class="col-sm-4"><i class="fa fa-angle-double-left fa-2x"></i></div>
                                                        ')))
  Next_Button=div(actionButton("Next_Tab",HTML('
                                               <div class="col-sm-4"><i class="fa fa-angle-double-right fa-2x"></i></div>
                                               ')))
  shinyServer(function(input, output,session){
   
    observeEvent(input$Prev_Tab,
                 {
                   tab_list=input$List_of_tab
                   current_tab=which(tab_list==input$tabBox_next_previous)
                   updateTabsetPanel(session,"tabBox_next_previous",selected=tab_list[current_tab-1])
                 })
    
    observeEvent(input$Next_Tab,
                 {
                   tab_list=input$List_of_tab
                   current_tab=which(tab_list==input$tabBox_next_previous)
                   updateTabsetPanel(session,"tabBox_next_previous",selected=tab_list[current_tab+1])
                 })
    
    
  output$Next_Previous=renderUI({
    tab_list=input$List_of_tab[-length(input$List_of_tab)]
    nb_tab=length(tab_list)
    if (which(tab_list==input$tabBox_next_previous)==nb_tab)
      column(1,offset=1,Previous_Button)
    else if (which(tab_list==input$tabBox_next_previous)==1)
      column(1,offset = 10,Next_Button)
    else
      div(column(1,offset=1,Previous_Button),column(1,offset=8,Next_Button))
    
  
})






你这个问题很复杂,需要打赏,请点击 http://www.bio-info-trainee.com/donate 进行打赏,谢谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|生信技能树    

GMT+8, 2019-3-26 19:08 , Processed in 0.034409 second(s), 26 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.