jquery-ui

What is jquery-ui?

The jquery-ui npm package is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. It provides a wide range of functionalities to enhance the user experience of web applications.

What are jquery-ui's main functionalities?

Draggable

The Draggable feature allows elements to be moved using the mouse. The code sample initializes a draggable element with the ID 'draggable'.

$(function() { $("#draggable").draggable(); });

Droppable

The Droppable feature enables elements to be used as drop targets. The code sample makes an element with the ID 'droppable' a drop target for the draggable element.

$(function() { $("#draggable").draggable(); $("#droppable").droppable({ drop: function(event, ui) { $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); } }); });

Resizable

The Resizable feature allows elements to be resized by dragging their edges or corners. The code sample initializes a resizable element with the ID 'resizable'.

$(function() { $("#resizable").resizable(); });

Sortable

The Sortable feature enables a list of elements to be sorted using the mouse. The code sample initializes a sortable list with the ID 'sortable'.

$(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); });

Accordion

The Accordion feature creates a collapsible content panel. The code sample initializes an accordion element with the ID 'accordion'.

$(function() { $("#accordion").accordion(); });

Datepicker

The Datepicker feature provides a calendar interface for selecting dates. The code sample initializes a datepicker input field with the ID 'datepicker'.

$(function() { $("#datepicker").datepicker(); });

Other packages similar to jquery-ui

bootstrap

Bootstrap is a popular front-end framework that provides a wide range of UI components and utilities. Unlike jquery-ui, Bootstrap focuses more on responsive design and includes a grid system, pre-styled components, and JavaScript plugins.

react-bootstrap

React-Bootstrap is a library that provides Bootstrap components as React components. It offers similar functionalities to jquery-ui but is designed specifically for use with React applications, providing a more modern and component-based approach.

semantic-ui

Semantic UI is a UI framework that uses human-friendly HTML to create responsive and customizable components. It offers a wide range of UI elements, collections, views, modules, and behaviors, similar to jquery-ui, but with a focus on semantic code and ease of use.

material-ui

Material-UI is a popular React component library that implements Google's Material Design. It provides a comprehensive set of UI components and themes, similar to jquery-ui, but is specifically designed for React applications and follows Material Design guidelines.

README

jQuery UI for Browserify

jQuery UI provides interactions like Drag and Drop and widgets like Autocomplete, Tabs and Slider and makes these as easy to use as jQuery itself.

If you want to use jQuery UI, go to jqueryui.com to get started. Or visit the Using jQuery UI Forum for discussions and questions.

This repo has a script to convert jQuery UI's modules into browserify modules. It parses the dependencies in the comments of the modules and generates equivalent require calls for them, along with jquery.

To install:

npm install jquery jquery-ui

To use:

// load jquery
var $ = require('jquery');

// load everything
require('jquery-ui');

// or load just the modules you need
require('jquery-ui/draggable');
require('jquery-ui/droppable');
require('jquery-ui/sortable');