CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-jquery-ui

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/jquery-ui@1.13.x
Publish Source
CLI
Badge
tessl/npm-jquery-ui badge