Best jQuery jQuery UI Plugins & Tutorials with Demo

jQuery Animated UI Modal with CSS3

jQuery Animated UI Modal with CSS3

jQuery UI Modal is plugin of jQuery UI. It easy to create modal functionality to the web application (example the modal form …) and to replace the basic functionality provided by the standard javascript alert(), confirm(), and prompt() functions.

Features:

  • Easy to use.
  • Plugin for jQuery UI .
  • open the modal after x milliseconds.
  • Support 2 effect and all type of easing.
  • Form elements.
  • Image support.
  • Button support.
  • CSS3 animate support.
  • 3 callback function onStart | onShow | onClose

UI Anglepicker : jQuery UI Angle Picker Widget

UI Anglepicker : jQuery UI Angle Picker Widget

A jQuery UI widget for selecting angles.JavaScript and CSS is based on LayerStyles.

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid : jQuery Ajax Datagrid plugin

jui_datagrid is an Ajax-enabled jQuery plugin, useful to manipulate database data in tabular format.

Fully customizable, simple but powerful API, jQuery themes compatible, localization support. It has a modular design, so it is using jui_pagination plugin for paging and jui_filter_rules plugin for searching.

Literally Canvas : HTML5 drawing widget with jQuery

Literally Canvas : HTML5 drawing widget with jQuery

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.

The instance at the top of this page uses the resizable feature of jQuery UI for its resize feature, to demonstrate that you can resize the container element with impunity. Resizing on the right edge of the canvas causes weirdness, but you get the idea.

Zino UI : jQuery based User Interface Framework

Zino UI : jQuery based User Interface Framework

Zino UI is jQuery based, WAI-ARIA compatible, user interface framework consist of 23+ different components. Cross-platform user interface framework for you Web & Enterprise applications. A delightful addition to your CMS, Back-end and Front-end interfaces. Zino UI is brought by programmers for programmers and designers.

jQuery UI FlipBook

jQuery UI FlipBook

FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser.

Features:

  • set the animation speed
  • change animation direction
  • exclude specific images
  • single step through the images
  • resizes to fit the images

Slider Pagination Concept with jQuery UI Slider

Slider Pagination Concept with jQuery UI Slider

An experimental slider pagination using the jQuery UI slider. The idea is to use a simple navigation concept that preserves layout and style while allowing content to stay easily accessible.

Mac OSX-like Animated Folder with CSS3 & jQuery

Mac OSX-like Animated Folder with CSS3 & jQuery

In this short tutorial, we are going to make a OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows. In addition, we are going to use jQuery UI and its drag and drop interactions to build a pretty interactive demo.

Drag ‘n’ Drop Shopping Cart With jQuery UI

jquery-drag-drop-shopping-cart

Drag ‘n’ dropping items has its various popular uses and shopping carts are definitely one of them.In this tutorial, we’ll be creating a simple shopping cart that works with drag ‘n’ drops.

It will have support for add-to-basket with quantity updates (so that the same items could be added more than once) and removing items from the basket. It will be totally client-side and cover the basic functionality (no PayPal integration, etc.).

For that, we’ll be using, probably the best drag-drop library, jQuery UI Draggable/Droppable in this tutorial.

EasyTabs.js : jQuery Easy Tabs Plugin

EasyTabs.js : jQuery Easy Tabs Plugin

EasyTabs creates tabs with all the functionality, no unwanted changes to your markup, and no hidden styling.

Unlike jQuery UI tabs, which style and arrange your tabs and panels for you, this plugin handles only the functionality of the tabs. By leaving the styling and layout up to you, it is much easier to style and arrange your tabs the way you want.

Features:

  • Creates tabs from an unordered list, which link to divs on the page
  • Allows complete customization of appearance, layout, and style via CSS
  • Supports forward- and back-button in browsers
  • Tabs are bookmarkable and SEO-friendly
  • Tabs can be cycled at a specified interval