0
# jQuery UI
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: jquery-ui
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install jquery-ui`
10
- **CDN**: `<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.min.js"></script>`
11

12
## Core Imports
13

14
jQuery UI extends the jQuery object with additional functionality:
15

16
```javascript
17
// Assuming jQuery is already loaded
18
import 'jquery-ui'; // or
19
require('jquery-ui');
20

21
// CDN usage - no imports needed, extends global jQuery
22
```
23

24
For specific components:
25

26
```javascript
27
// Individual widget imports (if using modular build)
28
import 'jquery-ui/ui/widgets/dialog';
29
import 'jquery-ui/ui/widgets/datepicker';
30
```
31

32
## Basic Usage
33

34
```javascript
35
// Widget initialization
36
$('#my-dialog').dialog({
37
  width: 400,
38
  height: 300,
39
  modal: true
40
});
41

42
// Method calls
43
$('#my-dialog').dialog('open');
44
$('#my-dialog').dialog('close');
45

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

49
// Effects usage
50
$('#element').hide('blind', 1000);
51
$('#element').show('slide', { direction: 'up' }, 500);
52
```
53

54
## Architecture
55

56
jQuery UI is built around several key architectural patterns:
57

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

65
## Capabilities
66

67
### Widgets
68

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

71
```javascript { .api }
72
// Base widget methods (available on all widgets)
73
$(...).widgetName('destroy');     // Destroys widget instance
74
$(...).widgetName('disable');     // Disables widget
75
$(...).widgetName('enable');      // Enables widget  
76
$(...).widgetName('option');      // Gets/sets options
77
$(...).widgetName('refresh');     // Refreshes widget
78
$(...).widgetName('widget');      // Returns widget element
79
```
80

81
[Widgets](./widgets.md)
82

83
### Effects
84

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

87
```javascript { .api }
88
// Enhanced jQuery methods with effects
89
$(element).hide(effect, options, duration, callback);
90
$(element).show(effect, options, duration, callback);
91
$(element).toggle(effect, options, duration, callback);
92

93
// Class animations
94
$(element).addClass(className, duration, easing, callback);
95
$(element).removeClass(className, duration, easing, callback);
96
$(element).toggleClass(className, duration, easing, callback);
97
$(element).switchClass(remove, add, duration, easing, callback);
98
```
99

100
[Effects](./effects.md)
101

102
### Interactions
103

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

106
```javascript { .api }
107
// Interaction widgets
108
$(...).draggable(options);   // Makes elements draggable
109
$(...).droppable(options);   // Makes elements drop targets
110
$(...).resizable(options);   // Makes elements resizable
111
$(...).selectable(options);  // Makes elements selectable
112
$(...).sortable(options);    // Makes lists sortable
113
```
114

115
[Interactions](./interactions.md)
116

117
### Utilities
118

119
Core utilities and helper functions used throughout jQuery UI.
120

121
```javascript { .api }
122
// Position utility
123
$(element).position({
124
  my: "center",
125
  at: "center",
126
  of: window
127
});
128

129
// Key code constants
130
$.ui.keyCode.ENTER    // 13
131
$.ui.keyCode.ESCAPE   // 27
132
$.ui.keyCode.TAB      // 9
133

134
// Selector extensions
135
$(':focusable')       // Elements that can receive focus
136
$(':tabbable')        // Elements that can be tabbed to
137
```
138

139
[Utilities](./utilities.md)
140

141
## CSS Classes
142

143
jQuery UI provides a comprehensive CSS framework for theming:
144

145
### Widget Classes
146
```css
147
.ui-widget              /* Base widget container */
148
.ui-widget-content      /* Widget content area */
149
.ui-widget-header       /* Widget header area */
150
```
151

152
### State Classes
153
```css
154
.ui-state-default       /* Default state */
155
.ui-state-hover         /* Hover state */
156
.ui-state-focus         /* Focus state */
157
.ui-state-active        /* Active state */
158
.ui-state-disabled      /* Disabled state */
159
.ui-state-error         /* Error state */
160
.ui-state-highlight     /* Highlight state */
161
```
162

163
### Helper Classes
164
```css
165
.ui-helper-hidden       /* Hides element */
166
.ui-helper-clearfix     /* Clearfix for floats */
167
.ui-corner-all          /* Rounds all corners */
168
.ui-corner-top          /* Rounds top corners */
169
.ui-corner-bottom       /* Rounds bottom corners */
170
```
171

172
### Icon Classes
173
```css
174
.ui-icon                /* Base icon class */
175
.ui-icon-triangle-1-s   /* Down arrow */
176
.ui-icon-triangle-1-n   /* Up arrow */
177
.ui-icon-triangle-1-e   /* Right arrow */
178
.ui-icon-triangle-1-w   /* Left arrow */
179
.ui-icon-close          /* Close/X icon */
180
.ui-icon-plus           /* Plus icon */
181
.ui-icon-minus          /* Minus icon */
182
/* ... 170+ total icon classes */
183
```
184

185
## Types
186

187
```javascript { .api }
188
// Widget options pattern (common to all widgets)
189
interface WidgetOptions {
190
  disabled?: boolean;
191
  classes?: { [key: string]: string };
192
}
193

194
// Event object structure
195
interface WidgetEvent {
196
  type: string;
197
  target: Element;
198
  originalEvent: Event;
199
  // Widget-specific properties...
200
}
201

202
// Effect options
203
interface EffectOptions {
204
  direction?: 'up' | 'down' | 'left' | 'right';
205
  duration?: number | string;
206
  easing?: string;
207
  complete?: () => void;
208
}
209
```