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 - Interactions and Widgets for the web

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery. Whether you're building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

If you want to use jQuery UI, go to jqueryui.com to get started, jqueryui.com/demos/ for demos, api.jqueryui.com for API documentation, or the Using jQuery UI Forum for discussions and questions.

If you want to report a bug/issue, please visit bugs.jqueryui.com.

If you are interested in helping develop jQuery UI, you are in the right place. To discuss development with team members and the community, visit the Developing jQuery UI Forum or #jqueryui-dev on irc.freenode.net.

For Contributors

If you want to help and provide a patch for a bugfix or new feature, please take a few minutes and look at our Getting Involved guide. In particular check out the Coding standards and Commit Message Style Guide.

In general, fork the project, create a branch for a specific change and send a pull request for that branch. Don't mix unrelated changes. You can use the commit message as the description for the pull request.

For more information, see the contributing page.

Running the Unit Tests

Run the unit tests manually with appropriate browsers and any local web server. See our environment setup and information on running tests.

You can also run the unit tests inside phantomjs by setting up your environment.