or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

effects.mdindex.mdinteractions.mdutilities.mdwidgets.md
tile.json

tessl/npm-jquery-ui

A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jquery-ui@1.13.x

To install, run

npx @tessl/cli install tessl/npm-jquery-ui@1.13.0

index.mddocs/

jQuery UI

jQuery UI is a comprehensive JavaScript library that provides a curated collection of user interface components, interactions, effects, widgets, and themes built on top of jQuery. It offers essential UI elements like date pickers, dialogs, tabs, accordions, drag-and-drop functionality, sortable lists, resizable elements, and various visual effects.

Package Information

  • Package Name: jquery-ui
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install jquery-ui
  • CDN: <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>

Core Imports

jQuery UI extends the jQuery object with additional functionality:

// Assuming jQuery is already loaded
import 'jquery-ui'; // or
require('jquery-ui');

// CDN usage - no imports needed, extends global jQuery

For specific components:

// Individual widget imports (if using modular build)
import 'jquery-ui/ui/widgets/dialog';
import 'jquery-ui/ui/widgets/datepicker';

Basic Usage

// Widget initialization
$('#my-dialog').dialog({
  width: 400,
  height: 300,
  modal: true
});

// Method calls
$('#my-dialog').dialog('open');
$('#my-dialog').dialog('close');

// Option changes
$('#my-dialog').dialog('option', 'title', 'New Title');

// Effects usage
$('#element').hide('blind', 1000);
$('#element').show('slide', { direction: 'up' }, 500);

Architecture

jQuery UI is built around several key architectural patterns:

  • Widget Factory: All widgets inherit from $.Widget base class providing consistent API
  • Plugin Pattern: Each widget extends jQuery via $.fn.widgetName()
  • Options Object: Standardized configuration through options hash
  • Events System: Consistent event naming and triggering across widgets
  • CSS Framework: Unified theming system with state classes and icons
  • Effects System: Extensible animation framework with custom effects

Capabilities

Widgets

Interactive UI components with consistent API for options, methods, and events.

// Base widget methods (available on all widgets)
$(...).widgetName('destroy');     // Destroys widget instance
$(...).widgetName('disable');     // Disables widget
$(...).widgetName('enable');      // Enables widget  
$(...).widgetName('option');      // Gets/sets options
$(...).widgetName('refresh');     // Refreshes widget
$(...).widgetName('widget');      // Returns widget element

Widgets

Effects

Animation and visual effects system with 15+ built-in effects.

// Enhanced jQuery methods with effects
$(element).hide(effect, options, duration, callback);
$(element).show(effect, options, duration, callback);
$(element).toggle(effect, options, duration, callback);

// Class animations
$(element).addClass(className, duration, easing, callback);
$(element).removeClass(className, duration, easing, callback);
$(element).toggleClass(className, duration, easing, callback);
$(element).switchClass(remove, add, duration, easing, callback);

Effects

Interactions

Mouse-based interaction behaviors for dragging, dropping, resizing, selecting, and sorting.

// Interaction widgets
$(...).draggable(options);   // Makes elements draggable
$(...).droppable(options);   // Makes elements drop targets
$(...).resizable(options);   // Makes elements resizable
$(...).selectable(options);  // Makes elements selectable
$(...).sortable(options);    // Makes lists sortable

Interactions

Utilities

Core utilities and helper functions used throughout jQuery UI.

// Position utility
$(element).position({
  my: "center",
  at: "center",
  of: window
});

// Key code constants
$.ui.keyCode.ENTER    // 13
$.ui.keyCode.ESCAPE   // 27
$.ui.keyCode.TAB      // 9

// Selector extensions
$(':focusable')       // Elements that can receive focus
$(':tabbable')        // Elements that can be tabbed to

Utilities

CSS Classes

jQuery UI provides a comprehensive CSS framework for theming:

Widget Classes

.ui-widget              /* Base widget container */
.ui-widget-content      /* Widget content area */
.ui-widget-header       /* Widget header area */

State Classes

.ui-state-default       /* Default state */
.ui-state-hover         /* Hover state */
.ui-state-focus         /* Focus state */
.ui-state-active        /* Active state */
.ui-state-disabled      /* Disabled state */
.ui-state-error         /* Error state */
.ui-state-highlight     /* Highlight state */

Helper Classes

.ui-helper-hidden       /* Hides element */
.ui-helper-clearfix     /* Clearfix for floats */
.ui-corner-all          /* Rounds all corners */
.ui-corner-top          /* Rounds top corners */
.ui-corner-bottom       /* Rounds bottom corners */

Icon Classes

.ui-icon                /* Base icon class */
.ui-icon-triangle-1-s   /* Down arrow */
.ui-icon-triangle-1-n   /* Up arrow */
.ui-icon-triangle-1-e   /* Right arrow */
.ui-icon-triangle-1-w   /* Left arrow */
.ui-icon-close          /* Close/X icon */
.ui-icon-plus           /* Plus icon */
.ui-icon-minus          /* Minus icon */
/* ... 170+ total icon classes */

Types

// Widget options pattern (common to all widgets)
interface WidgetOptions {
  disabled?: boolean;
  classes?: { [key: string]: string };
}

// Event object structure
interface WidgetEvent {
  type: string;
  target: Element;
  originalEvent: Event;
  // Widget-specific properties...
}

// Effect options
interface EffectOptions {
  direction?: 'up' | 'down' | 'left' | 'right';
  duration?: number | string;
  easing?: string;
  complete?: () => void;
}