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