shinyjqui

https://yang-tang.github.io/shinyjqui/
Admin
shinyjqui is an R wrapper of jQuery UI that adds interactive and animated UI components to Shiny...
Tokens:22,535
Snippets:171
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Example library imports

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Initial library imports for shinyjqui examples.

```R
library(shiny)
library(highcharter)
```

--------------------------------

### Basic orderInput implementation

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

A minimal example showing how to define an orderInput and display the resulting order using a verbatimTextOutput.

```R
server <- function(input, output) {
  output$order <- renderPrint({input$foo})
}

ui <- fluidPage(
  orderInput(inputId = 'foo', label = 'A simple example', items = c('A', 'B', 'C')),
  verbatimTextOutput('order')
)

shinyApp(ui, server)
```

--------------------------------

### Install shinyjqui Package

Source: https://yang-tang.github.io/shinyjqui/index.html

Install the stable version from CRAN or the development version from GitHub.

```r
install.packages('shinyjqui')
```

```r
devtools::install_github("yang-tang/shinyjqui")
```

--------------------------------

### Implement selectable table in Shiny app

Source: https://yang-tang.github.io/shinyjqui/reference/selectableTableOutput.html

A complete example demonstrating how to render a table and display the selected indices in a verbatim text output.

```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("selected"),
      selectableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$selected <- renderPrint({input$tbl_selected})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}
```

--------------------------------

### Example: Applying Animation Effects in Shiny Server

Source: https://yang-tang.github.io/shinyjqui/reference/Animation_effects.html

Demonstrates how to apply various animation effects (bounce, fold, blind) to a plot output element within the server logic of a Shiny application.

```R
# in shiny ui create a plot
plotOutput('foo')

# in shiny server apply a 'bounce' effect to the plot
jqui_effect('#foo', 'bounce')

# in shiny server hide the plot with a 'fold' effect
jqui_hide('#foo', 'fold')

# in shiny server show the plot with a 'blind' effect
jqui_show('#foo', 'blind')
```

--------------------------------

### Integrate Icons into Shiny UI Components

Source: https://yang-tang.github.io/shinyjqui/reference/jqui_icon.html

Examples of using jqui_icon within actionButton and tabPanel components.

```R
library(shiny)

# add an icon to an actionButton
actionButton('button', 'Button', icon = jqui_icon('refresh'))
#> <button id="button" type="button" class="btn btn-default action-button">
#>   <i class="ui-icon ui-icon-refresh"></i>
#>   Button
#> </button>

# add an icon to a tabPanel
tabPanel('Help', icon = jqui_icon('help'))
#> <div class="tab-pane" title="Help" data-value="Help" data-icon-class="ui-icon ui-icon-help"></div>
```

--------------------------------

### Shiny App with Sortable Table

Source: https://yang-tang.github.io/shinyjqui/reference/sortableTableOutput.html

This example demonstrates how to use sortableTableOutput within a Shiny application. It displays the sorted row indices in a verbatimTextOutput.

```R
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      verbatimTextOutput("rows"),
      sortableTableOutput("tbl")
    ),
    server = function(input, output) {
      output$rows <- renderPrint({input$tbl_row_index})
      output$tbl <- renderTable(mtcars, rownames = TRUE)
    }
  )
}
```

--------------------------------

### Show Placeholder in Order Input

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

Use the `placeholder` argument in `orderInput` to display a message when the input is empty. This example shows how to set a placeholder for items that can be moved between input fields.

```R
orderInput('items4', 'Items4 (can be moved to Items2)', items = NULL, connect = 'items2',
           placeholder = 'Drag items here...')
```

--------------------------------

### Implement sortableCheckboxGroupInput in a Shiny App

Source: https://yang-tang.github.io/shinyjqui/reference/sortableCheckboxGroupInput.html

A complete example demonstrating how to use sortableCheckboxGroupInput within a Shiny application to track the order of choices.

```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableCheckboxGroupInput("foo", "SortableCheckboxGroupInput",
                                 choices = month.abb),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$foo_order})
    }
  )
}
```

--------------------------------

### Server-side Draggable and Droppable Configuration

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Examples of configuring draggable and droppable interactions using selectors on the server side. These are typically used within conditional blocks.

```R
if (FALSE) {
  jqui_draggable('#foo', options = list(grid = c(80, 80)))
  jqui_droppable('.foo', operation = "enable")
}
```

--------------------------------

### Implement Custom Offset Tracking for Draggable

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Example of adding a custom input$foo_offset value to a draggable element that returns the element's offset relative to the document.

```R
# server
jqui_draggable('#foo', options = list(
  shiny = list(
    # By default, draggable element has a shiny input value showing the
    # element's position (relative to the parent element). Here, another shiny
    # input value (input$foo_offset) is added. It returns the element's offset
    # (position relative to the document).
    offset = list(
      # return the updated offset value when the draggable is created or dragging
      `dragcreate drag` = JS('function(event, ui) {return $(event.target).offset();}'),
    )
  )
))
```

--------------------------------

### Get Available Animation Effects

Source: https://yang-tang.github.io/shinyjqui/reference/get_jqui_effects.html

Retrieves a list of all available animation effects provided by jQuery UI within the shinyjqui package.

```APIDOC
## GET /jqui/effects

### Description
Use this function to get all animation effects in jQuery UI.

### Method
GET

### Endpoint
/jqui/effects

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **effects** (character vector) - A character vector of effect names.

#### Response Example
{
  "effects": [
    "bounce",
    "fade",
    "slide"
  ]
}
```

--------------------------------

### Enable Sortable Interaction on List

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Allows list items to be reordered via drag and drop. This snippet shows the basic setup for a sortable list.

```R
jqui_sortable(tags$ul(
  id = 'lst',
  tags$li('A'),
  tags$li('B'),
  tags$li('C')
))
```

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='lst']","type":"interaction","func":"sortable","operation":"enable","options":{},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":[],"debug":false}});\n      $('.jqui_self_cleaning_script').remove();}, 10);});
```

--------------------------------

### Enable Draggable Interaction on Plot

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Makes a plot output draggable along the x-axis. This example shows how to configure draggable options for a plot.

```R
jqui_draggable(plotOutput('plot', width = '400px', height = '400px'),
                options = list(axis = 'x'))
```

```javascript
$(function(){$(document).one(
            events   = "shiny:value",
            selector = "[id='plot']",
            handler  = function(e) { setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='plot']","type":"interaction","func":"draggable","operation":"enable","options":{"axis":"x"},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"axis":false},"debug":false}});\n      $('.jqui_self_cleaning_script').remove();}, 10); }
        );});
```

--------------------------------

### Using source mode for copying

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

Setting as_source = TRUE allows items to be copied from the source list to other connected lists instead of being moved.

```R
# In source mode, items dragged to B are copied
orderInput('A', 'A', items = 1:3, connect = 'B', as_source = TRUE)
orderInput('B', 'B', items = 4:6)
```

--------------------------------

### Create a basic orderInput component

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

Initializes a sortable input list using month abbreviations with a specified Bootstrap class.

```R
orderInput('items1', 'Items1', items = month.abb, item_class = 'info')
#> <label class="control-label" id="items1-label" for="items1">Items1</label>
#> <div id="items1" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput">
#>   <div data-value="Jan" class="btn btn-info" style="margin: 1px">Jan</div>
#>   <div data-value="Feb" class="btn btn-info" style="margin: 1px">Feb</div>
#>   <div data-value="Mar" class="btn btn-info" style="margin: 1px">Mar</div>
#>   <div data-value="Apr" class="btn btn-info" style="margin: 1px">Apr</div>
#>   <div data-value="May" class="btn btn-info" style="margin: 1px">May</div>
#>   <div data-value="Jun" class="btn btn-info" style="margin: 1px">Jun</div>
#>   <div data-value="Jul" class="btn btn-info" style="margin: 1px">Jul</div>
#>   <div data-value="Aug" class="btn btn-info" style="margin: 1px">Aug</div>
#>   <div data-value="Sep" class="btn btn-info" style="margin: 1px">Sep</div>
#>   <div data-value="Oct" class="btn btn-info" style="margin: 1px">Oct</div>
#>   <div data-value="Nov" class="btn btn-info" style="margin: 1px">Nov</div>
#>   <div data-value="Dec" class="btn btn-info" style="margin: 1px">Dec</div>
#> </div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items1&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;sortable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectWith&quot;:&quot;false&quot;,&quot;remove&quot;:&quot;function(e, ui){if(!$(e.target).children().length)$(e.target).empty();}&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectWith&quot;:false,&quot;remove&quot;:true},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
```

--------------------------------

### Load Packages

Source: https://yang-tang.github.io/shinyjqui/index.html

Initial package loading required for shinyjqui functionality.

```R
library(shiny)
library(shinyjqui)
library(ggplot2)
library(highcharter)
```

--------------------------------

### Enable mouse interaction bookmarking

Source: https://yang-tang.github.io/shinyjqui/reference/jqui_bookmarking.html

Call this function within the server logic to enable saving and restoring element positions, sizes, and states via URL.

```R
jqui_bookmarking()
```

--------------------------------

### Enable Cross-Session Interaction State Bookmarking

Source: https://yang-tang.github.io/shinyjqui/articles/save-and-restore.html

Integrate `jqui_bookmarking()` into the server function to enable saving and restoring interaction states across different Shiny sessions using Shiny's bookmarking feature.

```R
ui <- function(request) {
  fluidPage(
    bookmarkButton(),
    jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
  )
}

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
  # enable interaction state bookmarking
  jqui_bookmarking()
}

enableBookmarking(store = "url")

shinyApp(ui, server)
```

--------------------------------

### Implement sortableTabsetPanel in a Shiny App

Source: https://yang-tang.github.io/shinyjqui/reference/sortableTabsetPanel.html

Demonstrates a basic implementation of a sortable tabset panel where the tab order is captured and displayed in the UI.

```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableTabsetPanel(
        id = "tabs",
        tabPanel(title = "A", "AAA"),
        tabPanel(title = "B", "BBB"),
        tabPanel(title = "C", "CCC")
      ),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$tabs_order})
    }
  )
}
```

--------------------------------

### Get Available jQuery UI Animation Effects

Source: https://yang-tang.github.io/shinyjqui/reference/get_jqui_effects.html

Use this function to retrieve a character vector of all available animation effect names supported by jQuery UI.

```R
get_jqui_effects()
```

--------------------------------

### Apply Scale Animation with Options

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Use `jqui_effect` with the 'scale' effect and specify options for the animation. This function works in server mode.

```R
jqui_effect('#foo', effect = 'scale', options = list(percent = 50))
```

--------------------------------

### Order Input

Source: https://yang-tang.github.io/shinyjqui/index.html

Creates a list of items that can be reordered via drag and drop.

```R
server <- function(input, output) {
  output$order <- renderPrint({ print(input$dest) })
}

ui <- fluidPage(
  orderInput('source', 'Source', items = month.abb,
             as_source = TRUE, connect = 'dest'),
  orderInput('dest', 'Dest', items = NULL, placeholder = 'Drag items here...'),
  verbatimTextOutput('order')
)

shinyApp(ui, server)
```

--------------------------------

### Enable Selectable Interaction with Highlight

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Adds selectable functionality to a container holding multiple outputs, highlighting selected items. This demonstrates custom class application for selection feedback.

```R
jqui_selectable(
  div(
    id = 'sel_plots',
    highchartOutput('highchart', width = '300px'),
    plotOutput('ggplot', width = '300px')
  ),
  options = list(
    classes = list(`ui-selected` = 'ui-state-highlight')
  )
)
```

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='sel_plots']","type":"interaction","func":"selectable","operation":"enable","options":{"classes":{"ui-selected":"ui-state-highlight"}},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"classes":{"ui-selected":false}},"debug":false}});\n      $('.jqui_self_cleaning_script').remove();}, 10);});
```

--------------------------------

### Configuring a placeholder

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

Displays a placeholder message when an orderInput contains no items.

```R
orderInput('A', 'A', items = 1:3, connect = 'B')
orderInput('B', 'B', items = NULL, placeholder = 'Drag item here...')
```

--------------------------------

### Other Utilities

Source: https://yang-tang.github.io/shinyjqui/reference/index.html

Utility functions for creating icons and positioning elements.

```APIDOC
## Other Utilities API

### Description
Provides utility functions for common UI elements and positioning.

### Functions
- `jqui_icon()`: Creates a jQuery UI icon.
- `jqui_position()`: Positions an element relative to another element.
```

--------------------------------

### Apply Interactions to UI Objects

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Demonstrates applying interactions to various Shiny inputs, outputs, and HTML structures in UI mode.

```R
# shiny input
jqui_draggable(ui = textInput("foo", "Caption", "Data Summary"))

# shiny output
jqui_resizable(ui = plotOutput("myplot"))

# HTML list
jqui_sortable(
  ui = tags$ul( 
    tags$li("Coffice"), 
    tags$li("Tea"), 
    tags$li("Milk")
  )
)
```

--------------------------------

### Create jQuery UI Icons

Source: https://yang-tang.github.io/shinyjqui/reference/jqui_icon.html

Basic usage of jqui_icon to generate an icon element.

```R
jqui_icon('caret-1-n')
#> <i class="ui-icon ui-icon-caret-1-n"></i>
```

--------------------------------

### Configure Resizable Interactions

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Controls resizing behavior including aspect ratio, dimension limits, and synchronized resizing of multiple elements.

```R
# keep aspect ratio when resizing
jqui_resizable('#foo', options = list(aspectRatio = TRUE))

# Limit the resizable element to a maximum or minimum height or width
jqui_resizable('#foo', options = list(minHeight = 100, maxHeight = 300,
                                      minWidth = 200, maxWidth = 400))

# make the two plotOutputs resize synchronously
jqui_resizable(plotOutput('plot1', width = '400px', height = '400px'), 
                  options = list(alsoResize = '#plot2')),
plotOutput('plot2', width = '400px', height = '400px')
```

--------------------------------

### Selectable Table Output

Source: https://yang-tang.github.io/shinyjqui/index.html

Renders an HTML table supporting row or cell selection.

```R
ui <- fluidPage(
  selectableTableOutput("tbl", selection_mode = "cell"),
  verbatimTextOutput("selected")
)

server <- function(input, output) {
  output$selected <- renderPrint({
    cat("Selected:\n")
    input$tbl_selected
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)
```

--------------------------------

### Switch Class

Source: https://yang-tang.github.io/shinyjqui/reference/Class_effects.html

Removes a specified class and adds another class to specified UI elements.

```APIDOC
## jqui_switch_class()

### Description
Removes one or more class names and adds one or more different class names to the class attribute of matched elements.

### Method
Not Applicable (R function)

### Endpoint
Not Applicable (R function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```R
jqui_switch_class(ui = "#foo", removeClassName = "old-class", addClassName = "new-class")
```

### Response
#### Success Response (200)
None (modifies UI directly)

#### Response Example
None
```

--------------------------------

### Shiny UI with Mouse Interactions

Source: https://yang-tang.github.io/shinyjqui/reference/index.html

Wrapper functions to create Shiny UI elements with attached mouse interactions.

```APIDOC
## Shiny UI with Mouse Interactions API

### Description
These functions create Shiny input and output elements with built-in mouse interaction capabilities.

### Functions
- `orderInput()`: Creates a Shiny input control to manage the order of items.
- `updateOrderInput()`: Updates the value of an `orderInput` dynamically.
- `draggableModalDialog()`: Creates a modal dialog that can be dragged.
- `sortableCheckboxGroupInput()`: Creates a checkbox group with sortable choices.
- `sortableRadioButtons()`: Creates radio buttons with sortable choices.
- `sortableTabsetPanel()`: Creates a tabset panel with sortable tabs.
- `sortableTableOutput()`: Creates a table output with sortable rows.
- `selectableTableOutput()`: Creates a table output with selectable rows or cells.
```

--------------------------------

### Load User-Defined State for Resizable Element

Source: https://yang-tang.github.io/shinyjqui/articles/save-and-restore.html

Independently use the 'load' operation with `jqui_resizable` to apply a specific user-defined state (e.g., width, height) to a resizable element.

```R
ui <- fluidPage(
  actionButton("s", "Small"),
  actionButton("m", "Medium"),
  actionButton("l", "Large"),
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
)

server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
  observeEvent(input$s, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 100, height = 100))
               )
  )
  observeEvent(input$m, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 200, height = 200))
               )
  )
  observeEvent(input$l, 
               jqui_resizable(
                 ui        = "#gg", 
                 operation = "load", 
                 options   = list(state = list(width  = 400, height = 400))
               )
  )
}

shinyApp(ui, server)
```

--------------------------------

### Sortable Table Output

Source: https://yang-tang.github.io/shinyjqui/index.html

Renders an HTML table with sortable rows.

```R
ui <- fluidPage(
  verbatimTextOutput("index"),
  sortableTableOutput("tbl")
)

server <- function(input, output) {
  output$index <- renderPrint({
    cat("Row index:\n")
    input$tbl_row_index
  })
  output$tbl <- renderTable(head(mtcars), rownames = TRUE)
}

shinyApp(ui, server)
```

--------------------------------

### Connecting multiple orderInputs

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

Allows items to be dragged between different orderInput components by specifying the connect parameter.

```R
# items in A can be dragged to B
orderInput('A', 'A', items = 1:3, connect = 'B')
# items in B can be dragged to A
orderInput('B', 'B', items = 4:6, connect = 'A')
```

--------------------------------

### Resize and Hide Element

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Use `jqui_hide` with the 'size' effect and options to resize an element before hiding it. This function works in server mode.

```R
jqui_hide('#foo', effect = 'size', options = list(width = 200, height = 60))
```

--------------------------------

### Add Class

Source: https://yang-tang.github.io/shinyjqui/reference/Class_effects.html

Adds one or more CSS classes to specified UI elements.

```APIDOC
## jqui_add_class()

### Description
Adds one or more class names to the class attribute of matched elements.

### Method
Not Applicable (R function)

### Endpoint
Not Applicable (R function)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```R
jqui_add_class(ui = "#foo", className = "lead")
```

### Response
#### Success Response (200)
None (modifies UI directly)

#### Response Example
None
```

--------------------------------

### jqui_bookmarking

Source: https://yang-tang.github.io/shinyjqui/reference/jqui_bookmarking.html

Enables the saving and restoring of element states (position, size, selection, sorting) modified by mouse operations in a Shiny application.

```APIDOC
## jqui_bookmarking

### Description
Enables shiny bookmarking state of mouse interactions. By calling this function in the server, elements' position, size, selection state, and sorting state changed by mouse operations can be saved and restored through a URL.

### Usage
`jqui_bookmarking()`
```

--------------------------------

### Configure Selectable Interactions

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Enables selection of child elements with custom styling applied to selected states.

```R
# highlight the selected plotOutput
jqui_selectable(
  div(
    plotOutput('plot1', width = '400px', height = '400px'),
    plotOutput('plot2', width = '400px', height = '400px')
  ),
  options = list(classes = list(`ui-selected` = 'ui-state-highlight'))
)
```

--------------------------------

### Saving and loading order state

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

Demonstrates how to trigger save and load operations for sortable items using jqui_sortable.

```R
ui <- fluidPage(
  orderInput('A', 'A', items = 1:3, as_source = TRUE, connect = c("B", "C")),
  orderInput('B', 'B', items = 4:6, connect = "C"),
  orderInput('C', 'C', items = 7:9, connect = "B"),
  hr(),
  actionButton("save", "Save"),
  actionButton("load", "Load")
)
server <- function(input, output, session) {
  observeEvent(input$save, jqui_sortable("#B,#C", "save"))
  observeEvent(input$load, jqui_sortable("#B,#C", "load"))
}
```

--------------------------------

### Configure Droppable Interactions

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Defines acceptance criteria and visual feedback for droppable elements, including custom JavaScript callbacks.

```R
jqui_droppable('#foo', options = list(
  accept = '#bar', # jQuery selector to define which draggable element to monitor. Accept anything if not set.
  classes = list(
    `ui-droppable-active` = 'ui-state-focus', # change class when draggable element is dragging
    `ui-droppable-hover` = 'ui-state-highlight' # change class when draggable element is dragging over
  ),
  drop = JS(
    'function(event, ui){$(this).addClass("ui-state-active");}'
  ) # a javascrip callback to change class when draggable element is dropped in
))
```

--------------------------------

### sortableTabsetPanel

Source: https://yang-tang.github.io/shinyjqui/reference/sortableTabsetPanel.html

Creates a tabset panel with sortable tabs. The order of tabs can be tracked on the server.

```APIDOC
## sortableTabsetPanel

### Description
Create a tabset that contains shiny::tabPanel elements. The tabs are sortable by drag and drop. In addition to the activated tab title stored in `input$<id>`, the server will also receive the order of tabs in `input$<id>_order`.

### Usage
```R
sortableTabsetPanel(
  ...,
  id = NULL,
  selected = NULL,
  type = c("tabs", "pills", "hidden"),
  header = NULL,
  footer = NULL
)
```

### Arguments
* `...` (`tabPanel()` elements) - `tabPanel()` elements to include in the tabset
* `id` (character) - If provided, you can use `input$`_`id`_in your server logic to determine which of the current tabs is active. The value will correspond to the `value` argument that is passed to `tabPanel()`.
* `selected` (character) - The `value` (or, if none was supplied, the `title`) of the tab that should be selected by default. If `NULL`, the first tab will be selected.
* `type` (character) - Specifies the appearance of the tabset. Can be one of:
    * `"tabs"`: Standard tab look
    * `"pills"`: Selected tabs use the background fill color
    * `"hidden"`: Hides the selectable tabs. Use `type = "hidden"` in conjunction with `tabPanelBody()` and `updateTabsetPanel()` to control the active tab via other input controls.
* `header` (Tag or list of tags) - Tag or list of tags to display as a common header above all tabPanels.
* `footer` (Tag or list of tags) - Tag or list of tags to display as a common footer below all tabPanels

### Value
A tabset that can be passed to shiny::mainPanel

### See also
shiny::tabsetPanel, sortableRadioButtons, sortableCheckboxGroupInput, sortableTableOutput

### Examples
```R
## Only run this example in interactive R sessions
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      sortableTabsetPanel(
        id = "tabs",
        tabPanel(title = "A", "AAA"),
        tabPanel(title = "B", "BBB"),
        tabPanel(title = "C", "CCC")
      ),
      verbatimTextOutput("order")
    ),
    server = function(input, output) {
      output$order <- renderPrint({input$tabs_order})
    }
  )
}
```
```

--------------------------------

### draggableModalDialog

Source: https://yang-tang.github.io/shinyjqui/reference/draggableModalDialog.html

Creates the UI for a modal dialog similar to shiny::modalDialog, but with draggable content.

```APIDOC
## Create a draggable modal dialog UI

### Description
This function creates the UI for a modal dialog that allows its content to be dragged.

### Method
N/A (UI function)

### Endpoint
N/A (UI function)

### Arguments 
#### Ellipsis (...)
- ... (UI elements) - Required - UI elements for the body of the modal dialog box.
#### title
- title (character or tag) - Optional - An optional title for the dialog.
#### footer
- footer (shiny tag) - Optional - UI for footer. Use `NULL` for no footer. Defaults to `shiny::modalButton("Dismiss")`.
#### size
- size (character) - Optional - One of `"s"` for small, `"m"` (the default) for medium, or `"l"` for large.
#### easyClose
- easyClose (logical) - Optional - If `TRUE`, the modal dialog can be dismissed by clicking outside the dialog box or pressing the Escape key. If `FALSE` (the default), the modal dialog must be dismissed by clicking on a `modalButton()` or via `removeModal()` on the server.
#### fade
- fade (logical) - Optional - If `FALSE`, the modal dialog will have no fade-in animation.

### Value
A modified shiny modal dialog UI with its content draggable.
```

--------------------------------

### orderInput UI Control

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

Creates a drag-and-drop sortable input control for Shiny applications.

```APIDOC
## orderInput

### Description
Display a set of items whose order can be changed by drag and drop inside or between orderInput(s). The item order is sent back to the server via the input ID.

### Parameters
#### Arguments
- **inputId** (string) - Required - The input slot used to access the current order of items.
- **label** (string) - Optional - Display label for the control.
- **items** (list/vector/factor) - Required - Items to display.
- **as_source** (boolean) - Optional - Whether the input is in source mode (items are copied, not moved).
- **connect** (vector) - Optional - Input IDs of other orderInputs to allow cross-dragging.
- **item_class** (string) - Optional - Bootstrap color utility class for items.
- **placeholder** (string) - Optional - Text shown when no items remain.
- **width** (string) - Optional - CSS width of the input.
- **legacy** (boolean) - Optional - Whether to use the legacy version of the function.

### Value
An orderInput control that can be added to a UI definition.
```

--------------------------------

### Define Custom Shiny Interaction Options

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Template for configuring custom Shiny input values by mapping event types to JavaScript callbacks within the options parameter.

```R
shiny_opt = list(
  
  # define shiny input value input$id_suffix1
  suffix1 = list(
    # on event_type1 run callback1 and send the returned value to input$id_suffix1
    event_type1 = JS(callback1),
    # on event_type2 or event_type3 run callback2 and send the returned value to input$id_suffix1
    `event_type2 event_type3` = JS(callback2),
    ...
  ),
  
  # define another shiny input value input$id_suffix2
  suffix2 = list(
    ...
  ),
  
  # define more shiny input values
  
)

# pass the shiny option to an interaction function
jqui_draggable('#foo', options = list(
  shiny = shiny_opt, 
  #other draggable-specific options
))
```

--------------------------------

### Resizable Elements

Source: https://yang-tang.github.io/shinyjqui/index.html

Allows users to change the size of elements using the mouse.

```R
server <- function(input, output) {
  output$gg <- renderPlot({
    ggplot(mtcars, aes(x = cyl, y = mpg)) + geom_point()
  })
}

ui <- fluidPage(
  jqui_resizable(plotOutput('gg', width = '200px', height = '200px'))
)

shinyApp(ui, server)
```

--------------------------------

### Resizable Elements

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Allows users to change the size of an element using the mouse. Supports enable, disable, destroy, save, and load operations.

```APIDOC
## POST /jqui_resizable

### Description
Enables users to resize elements by dragging their borders with the mouse.

### Method
POST

### Endpoint
/jqui_resizable

### Parameters
#### Request Body
- **ui** (shiny.tag | shiny.tag.list | htmlwidget | string | JS) - Required - The target UI element(s) to be manipulated.
- **operation** (string) - Optional - Determines how to manipulate the mouse interaction (e.g., 'enable', 'disable', 'destroy', 'save', 'load'). Ignored when ui is a shiny.tag or shiny.tag.list.
- **options** (list) - Optional - Interaction-specific options. Ignored when operation is 'destroy'. Can also accept a 'shiny' option to control Shiny input values.

### Response
#### Success Response (200)
- **modified_ui** (shiny.tag | shiny.tag.list | htmlwidget) - The modified UI object with interaction effects attached.

### Request Example
```json
{
  "ui": "#resizableBox",
  "operation": "enable",
  "options": {
    "shiny": {
      "inputId": "myResizableInput",
      "stateField": "size"
    }
  }
}
```

### Response Example
```json
{
  "modified_ui": "..."
}
```
```

--------------------------------

### Show UI Element with Animation

Source: https://yang-tang.github.io/shinyjqui/reference/Animation_effects.html

Use jqui_show to reveal a target UI element with a chosen animation effect. You can set the animation duration and specify a function to run after the animation finishes.

```R
jqui_show(ui, effect, options = NULL, duration = 400, complete = NULL)
```

--------------------------------

### Enable Draggable Interaction with Options

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

This snippet enables a draggable interaction for a UI element. It specifies options like connectToSortable, helper, and cancel. The iframe contains the JavaScript to trigger this interaction via shinyjqui.msgCallback.

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"\.jqui-interaction-LSEUur2W","type":"interaction","func":"draggable","operation":"enable","options":{"connectToSortable":"#items2, #items4","helper":"clone","cancel":""},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"connectToSortable":false,"helper":false,"cancel":false},"debug":false}});\n      $(".jqui_self_cleaning_script").remove();}, 10);});
```

--------------------------------

### Enable Draggable Interaction with Options

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

This snippet enables a draggable interaction for a UI element. It specifies options like connectToSortable, helper, and cancel. The iframe contains the JavaScript to trigger this interaction via shinyjqui.msgCallback.

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"\.jqui-interaction-wJ3OobeH","type":"interaction","func":"draggable","operation":"enable","options":{"connectToSortable":"#items2, #items4","helper":"clone","cancel":""},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"connectToSortable":false,"helper":false,"cancel":false},"debug":false}});\n      $(".jqui_self_cleaning_script").remove();}, 10);});
```

--------------------------------

### Enable Draggable Interaction with Options

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

This snippet enables a draggable interaction for a UI element. It specifies options like connectToSortable, helper, and cancel. The iframe contains the JavaScript to trigger this interaction via shinyjqui.msgCallback.

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"\.jqui-interaction-wiZZLXDm","type":"interaction","func":"draggable","operation":"enable","options":{"connectToSortable":"#items2, #items4","helper":"clone","cancel":""},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"connectToSortable":false,"helper":false,"cancel":false},"debug":false}});\n      $(".jqui_self_cleaning_script").remove();}, 10);});
```

--------------------------------

### Enable Draggable Interaction with Options

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

This snippet enables a draggable interaction for a UI element. It specifies options like connectToSortable, helper, and cancel. The iframe contains the JavaScript to trigger this interaction via shinyjqui.msgCallback.

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"\.jqui-interaction-xWEEOk0E","type":"interaction","func":"draggable","operation":"enable","options":{"connectToSortable":"#items2, #items4","helper":"clone","cancel":""},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"connectToSortable":false,"helper":false,"cancel":false},"debug":false}});\n      $(".jqui_self_cleaning_script").remove();}, 10);});
```

--------------------------------

### Enable Draggable Interaction with Options

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

This snippet enables a draggable interaction for a UI element. It specifies options like connectToSortable, helper, and cancel. The iframe contains the JavaScript to trigger this interaction via shinyjqui.msgCallback.

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"\.jqui-interaction-c9Kar7pz","type":"interaction","func":"draggable","operation":"enable","options":{"connectToSortable":"#items2, #items4","helper":"clone","cancel":""},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":{"connectToSortable":false,"helper":false,"cancel":false},"debug":false}});\n      $(".jqui_self_cleaning_script").remove();}, 10);});
```

--------------------------------

### Connect multiple orderInput components

Source: https://yang-tang.github.io/shinyjqui/reference/orderInput.html

Configures an orderInput to allow items to be dragged and dropped between specified target inputs.

```R
orderInput('items2', 'Items2 (can be moved to Items1 and Items4)', items = month.abb,
           connect = c('items1', 'items4'), item_class = 'primary')
#> <label class="control-label" id="items2-label" for="items2">Items2 (can be moved to Items1 and Items4)</label>
#> <div id="items2" style="width: 500px; font-size: 0px; min-height: 25px;" class="jqui-orderInput">
#>   <div data-value="Jan" class="btn btn-primary" style="margin: 1px">Jan</div>
#>   <div data-value="Feb" class="btn btn-primary" style="margin: 1px">Feb</div>
#>   <div data-value="Mar" class="btn btn-primary" style="margin: 1px">Mar</div>
#>   <div data-value="Apr" class="btn btn-primary" style="margin: 1px">Apr</div>
#>   <div data-value="May" class="btn btn-primary" style="margin: 1px">May</div>
#>   <div data-value="Jun" class="btn btn-primary" style="margin: 1px">Jun</div>
#>   <div data-value="Jul" class="btn btn-primary" style="margin: 1px">Jul</div>
#>   <div data-value="Aug" class="btn btn-primary" style="margin: 1px">Aug</div>
#>   <div data-value="Sep" class="btn btn-primary" style="margin: 1px">Sep</div>
#>   <div data-value="Oct" class="btn btn-primary" style="margin: 1px">Oct</div>
#>   <div data-value="Nov" class="btn btn-primary" style="margin: 1px">Nov</div>
#>   <div data-value="Dec" class="btn btn-primary" style="margin: 1px">Dec</div>
#> </div>
#> <iframe srcdoc="&lt;p&gt;cant catch me&lt;/p&gt;" class="jqui_self_cleaning_script" style="width:0;height:0;border:none;display:none !important" onload="$(function(){setTimeout(function(){shinyjqui.msgCallback({&quot;ui&quot;:&quot;[id=&#39;items2&#39;]&quot;,&quot;type&quot;:&quot;interaction&quot;,&quot;func&quot;:&quot;sortable&quot;,&quot;operation&quot;:&quot;enable&quot;,&quot;options&quot;:{&quot;connectWith&quot;:&quot;#items1, #items4&quot;,&quot;remove&quot;:&quot;function(e, ui){if(!$(e.target).children().length)$(e.target).empty();}&quot;},&quot;debug&quot;:false,&quot;_js_idx&quot;:{&quot;ui&quot;:false,&quot;type&quot;:false,&quot;func&quot;:false,&quot;operation&quot;:false,&quot;options&quot;:{&quot;connectWith&quot;:false,&quot;remove&quot;:true},&quot;debug&quot;:false}});&#10;      $(&quot;.jqui_self_cleaning_script&quot;).remove();}, 10);});"></iframe>
```

--------------------------------

### Create a sortable table output element

Source: https://yang-tang.github.io/shinyjqui/reference/sortableTableOutput.html

Use sortableTableOutput to render a standard HTML table where rows can be sorted by drag and drop. The order of rows is captured in input$<outputId>_order.

```R
sortableTableOutput(outputId)
```

--------------------------------

### Show Element with Clip Animation

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Use `jqui_show` with the 'clip' effect to display a hidden element with animation. This function works in server mode.

```R
jqui_show('#foo', effect = 'clip')
```

--------------------------------

### Define selectable table output

Source: https://yang-tang.github.io/shinyjqui/reference/selectableTableOutput.html

Use this function in the UI to create a table output that supports row or cell selection modes.

```R
selectableTableOutput(outputId, selection_mode = c("row", "cell"))
```

--------------------------------

### Enable Resizable Interaction on Button

Source: https://yang-tang.github.io/shinyjqui/reference/Interactions.html

Applies resizable behavior to an action button. This snippet demonstrates how to enable the resizable interaction for a UI element.

```R
jqui_resizable(actionButton('btn', 'Button'))
```

```javascript
$(function(){setTimeout(function(){shinyjqui.msgCallback({"ui":"[id='btn']","type":"interaction","func":"resizable","operation":"enable","options":{},"debug":false,"_js_idx":{"ui":false,"type":false,"func":false,"operation":false,"options":[],"debug":false}});\n      $('.jqui_self_cleaning_script').remove();}, 10);});
```

--------------------------------

### Create Draggable Modal Dialog UI

Source: https://yang-tang.github.io/shinyjqui/reference/draggableModalDialog.html

Use this function to create a modal dialog UI that allows its content to be dragged. It is similar to shiny::modalDialog but with added draggable functionality.

```R
draggableModalDialog(
  ...,
  title = NULL,
  footer = shiny::modalButton("Dismiss"),
  size = c("m", "s", "l"),
  easyClose = FALSE,
  fade = TRUE
)
```

--------------------------------

### Configure Sortable Interactions

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Manages drag-and-drop sorting behavior, including opacity effects, item filtering, and cross-element connectivity.

```R
# change opacity while sorting
jqui_sortable('#foo', options = list(opacity = 0.5))

# only items with class "items" inside the element become sortable
jqui_sortable('#foo', options = list(items = '> .items'))

# connect two sortable elements, so that items in one element can be dragged to another
jqui_sortable('#foo1', options = list(connectWith = '#foo2'))
jqui_sortable('#foo2', options = list(connectWith = '#foo1'))
```

--------------------------------

### Configure Draggable Interactions

Source: https://yang-tang.github.io/shinyjqui/articles/introduction.html

Customizes movement behavior for draggable elements using axis constraints or grid snapping.

```R
# drag only horizontally
jqui_draggable('#foo', options = list(axis = 'x'))
# make movement snapping to a 80 x 80 grid
jqui_draggable('#foo', options = list(grid = c(80, 80)))
```

--------------------------------

### Save and Restore Order of Items in OrderInput

Source: https://yang-tang.github.io/shinyjqui/articles/save-and-restore.html

Apply 'save' and 'load' operations using `jqui_sortable` to manage and restore the order of items within `orderInput` widgets.

```R
ui <- fluidPage(
  actionButton("save", "Save order"),
  actionButton("restore", "Restore order"),
  orderInput("foo1", label = NULL, items = 1:3, connect = "foo2"),
  orderInput("foo2", label = NULL, items = NULL, placeholder = "empty")
)

server <- function(input, output) {
  observeEvent(input$save, {
    jqui_sortable("#foo1,#foo2", operation = "save")
  })
  observeEvent(input$restore, {
    jqui_sortable("#foo1,#foo2", operation = "load")
  })
}

shinyApp(ui, server)
```

--------------------------------

### Styling items with Bootstrap classes

Source: https://yang-tang.github.io/shinyjqui/articles/orderInput.html

Applies different Bootstrap button styles to the items using the item_class parameter.

```R
orderInput('default', 'default', items = 1:3, item_class = 'default')
orderInput('primary', 'primary', items = 1:3, item_class = 'primary')
orderInput('success', 'success', items = 1:3, item_class = 'success')
orderInput('info', 'info', items = 1:3, item_class = 'info')
orderInput('warning', 'warning', items = 1:3, item_class = 'warning')
orderInput('danger', 'danger', items = 1:3, item_class = 'danger')
```
Tokens:
Raw