Best jQuery HTML5 Plugins & Tutorials with Demo

MelonHTML5 – Metro UI in HTML5, CSS3 & jQuery

MelonHTML5 - Metro UI in HTML5, CSS3 & jQuery

Metro UI is a flexible and easy to integrate framework to build your one page website in Windows 8 Metro UI. It is fully powered by HTML5, CSS3 and JavaScript with plengy of options for you to configure it to suit your own needs.

Features:

  • Desktop and Mobile Device (Phone + Tablet) Ready
  • Resonsive UI Design
  • Old IE Support
  • Sliding Button Bar
  • One Page Application
  • Working with Browser Back button
  • Customizable Tiles
  • Smart Page Content Caching
  • Integration with Google Analytics
  • Object oriented JavaScript framework

Play Notification Sound using jQuery

Play Notification Sound using jQuery

I received lots tutorial requests from my readers that asked to me, how to play a notification sound on website chat?. We implemented this in a simple chat box application using Jquery and HTML5 audio tag, it is just five lines of code. Use Modernizer library for Internet Explorer HTML5 support, please turn on the volume and try this live demo.

DROPAREA : jQuery Html5 drag-drop file uploader plugin

DROPAREA : jQuery Html5 drag-drop file uploader plugin

droparea is a jQuery plug-in for HTML5 drag-and-drop (images and files).

Originally it has:

  • client-side image resizing with canvas on browser option
  • data url option for sending a file/image as a text field with ajax
  • click event for browsing files

Metro Style Side Menu with jQuery

Metro Style Side Menu with jQuery

Metro Style Side Menu with jQuery.

Features:

  • Crossbrowser
  • Simple/Clean
  • Metro Style
  • 900+ SVG Icons
  • Hight Resolution (100% vector)
  • Valid HTML5

Pusher Chat : jQuery plugin

Pusher Chat : jQuery plugin

Pusher Chat , is a Facebook like chat jQuery plugin using Pusher API.Now you can get easily a chat application on your site.

Features

  • easy to Customize with css
  • manage friend list via json
  • use Pusher API
  • detect message typing
  • detect message receiving
  • supported by all new browser ,IE8 & need some css fix for IE7
  • …& all what you need to add a chat to your web application

Zebra : HTML5 Canvas Rich UI JavaScript Library

Zebra: Desktop-Like User Interface With HTML5 Canvas

Zebra is a javaScript library that follows easy OOP concept, provides HTML5 Canvas based Rich UI and includes Java to JavaScript converter tool .The approach sits on top of HTML5 Canvas element what makes possible to render any imaginable UI. Zebra development is much closer to software engineering where you write well structured, supportable, extendable code basing on easy Zebra OOP concept. You keep distance from the mess of HTML, JavaScript code, CSS and DOM manipulation. Zebra is pure WEB based alternative to Flash or Applet technologies that doesn’t require a plugging on a client side to be installed. In the same time Zebra utilizes power, simplicity and beauty of JavaScript coding.

Features:

  • Over 30 UI components
  • Customizable look and feel (theme support)
  • Flexible layouts
  • Declarative JSON-based UI
  • Easily extendable

w2ui : jQuery UI Library

w2ui : jQuery UI Library

The w2ui library is a set of interrellated jQuery plugins. It is not a adhoc port to jQuery, but was initially developed with jQuery in mind. There is no support of other frameworks such as prototype or dojo. The w2layout object allows you to create stretchable and resizable layouts with up to 6 panels. The panels are top, left, main, preview, right, and bottom. You do not have to create and initialize all 6 panels, but only the panels you need in your application.

Out of the box w2ui library is all-in-one solution. It contains all most common UI widgets: Layout, Grid, Sidebar, Tabs, Toolbar, Popup, Field Controls and Forms. You do not need to put together a collection of mismatched plugins to accomplish your goals.

Vertu : Simple Mega Menu with jQuery, Html5 & CSS3

Vertu : Simple Mega Menu with jQuery, Html5 & CSS3

Vertu – Simple Mega Menu is simple and easy mega menu with many functions.

Features:

  • Multi-Functional Menu
  • 4 levels drop down horizontal menu
  • Easy to change structure via CSS
  • Simple menu construction
  • Metro Style Menu
  • Cross Browser Support
  • Clean Code
  • Include HTML5/CSS3 and JavaScript file
  • Beautiful Contact Form

flowtime.js : HTML5/CSS3/JS Presentation Framework

flowtime.js : HTML5/CSS3/JS Presentation Framework

Flowtime.js is a framework for easily build HTML presentations or websites.You can navigate in many ways. The most common way is using the keyboard.

Flowtime.js is designed to perfectly fit your viewport and is based on a solid display: inline-block; foundation.
This frameworks doesn’t style your presentations or sites for you but it takes care of all the annoying things like navigation and deep-linking, so you are free to style every single element of your design as you like. But for the ones who need a ready-to-use tool it comes with a default theme that you can edit or you can add new themes just by linking your css files.

jCryption : jQuery Html5 Form encryption plugin

jCryption : jQuery Html5 Form encryption plugin

This plug-in is used for encrypting the data that is submitted through the GTE and POST methods when a JavaScript HTML form is submitted to the server. This plug-in can be easily installed, used and extended. One amazing feature of the jCryption plug-in is that it does not block the web browser during calculations and helps in rendering 2048 bit encryption of the data.