A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
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.
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(); });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 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 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 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.
Note: jQuery UI is in maintenance-only mode. Please read the project status blog post for more information.
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 the GitHub issues page. Archive of older bug reports is kept for historical reasons in read-only mode at bugs.jqueryui.com. If any of them still matters to you, please open a bug about it on GitHub, linking to the legacy bugs.jqueryui.com issue for context.
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.
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.
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 npm run test:unit -- --help.
FAQs
A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
We found that jquery-ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."