background preloader

Jquery UI Plugins

Facebook Twitter

Jqueryrain.com.

Multi select to checkboxes

Favs. Wookmark jQuery Plugin. Uniform - Sexy forms with jQuery. Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs?

Uniform - Sexy forms with jQuery

Ever wished you could control the look and feel of your form elements between all browsers? If so, Uniform is your new best friend. Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility. Documentation Installation Installation of Uniform is quite simple.

Basic usage Using Uniform can be quite easy as well. $(function(){ $("select").uniform(); }); To “uniform” all possible form elements, just do something like this: $("select, input:checkbox, input:radio, input:file").uniform(); Extra parameters You can pass in extra parameters to control certain aspects of Uniform. Ui. Selectize.js. Current Value: "awesome,neat" Add and remove items in any order without touching your mouse.

Selectize.js

Use your left/right arrow keys to move the caret (ibeam) between items. This example is instantiated from a <input type="text"> element (note that the value is represented as a string). Current Value: null This demonstrates two main things: (1) custom item and option rendering, and (2) item creation on-the-fly. The most vanilla of examples. Selectize supports <optgroup> rendering (as of v0.5.0). Current Value: ["CA","WY"] This example only allows 3 items.

Current Value: "" A good example of (1) support for international characters (diacritics) and (2) how items are scored and sorted. $('#select-country').selectize(); Current Value: " This demo shows how to integrate third-party data from the GitHub API. Select2 - The jQuery replacement for select boxes. OriDomi - origami for the web. Magnific Popup: Responsive jQuery Lightbox Plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js).

Magnific Popup: Responsive jQuery Lightbox Plugin

Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button.

Ajax popup Fast. jQuery UI Demos. Jqueryrain.com. Jqueryrain.com. jQuery Plugin Registry. Jeditable Edit In Place Demo. You might also want to check custom inputs demo.

Jeditable Edit In Place Demo

Normal textarea Test Inlined select Dolor sit dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh D euismod tincidunt ut laoreet dolore magna aliquam erat volutp Textile renderer Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Fooss Bar ABC Duis autem vel eum infvhendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto. asa Different events. Fine Uploader Live Demo and Javascript Code Examples. Basic Setup Want to upload files to your own server?

Fine Uploader Live Demo and Javascript Code Examples

You need only to include a CSS file, a JavaScript file, and handle the uploads on the server side according to the technology you are using. There are absolutely no other dependencies. You can quickly set up an HTML page in order to use Fine Uploader: Download and unpack the latest version of Fine Uploader. Have a look at the following live demos for examples of common setups. Gallery View for Images In this demo, we're utilizing Fine Uploader 4's client-side image preview generation feature. This uploader is also restricted in allowed extensions (jpeg, jpg, gif, and png) This demo uses the default simple thumbnails template bundled with Fine Uploader UI.

Note: File bytes are not actually being sent to the server for this demo due to limitations of the GitHub Pages server. Processing dropped files... ?ref=jqueryrain&add_to_network=true&continue= Colorbox - a jQuery lightbox. A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites.

Colorbox - a jQuery lightbox

Checkboxes and radio buttons customization (jQuery and Zepto) plugin. iCheck plugin works with checkboxes and radio buttons like a constructor.

Checkboxes and radio buttons customization (jQuery and Zepto) plugin

It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux[1]" disabled> Foo </label><label for="baz[1]">Bar</label><input type="radio" name="quux[2]" id="baz[1]" checked><label for="baz[2]">Bar</label><input type="radio" name="quux[2]" id="baz[2]"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div> Foo </label><label for="baz[1]">Bar</label><div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div><label for="baz[2]">Bar</label><div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).

Options. 15+ jQuery Radio Button & Checkbox Style Plugins. Today we are giving you a list of 15+ jQuery Radio Button & Checkbox Style Plugins — A collection of simple, lightweight, style-able radio button and checkbox plugins using jQuery.

15+ jQuery Radio Button & Checkbox Style Plugins

Enjoy! :) Update 29/09/13: Added 17. jQuery Uniform Plugin Related Posts: 1. jQuery prettyCheckable This plugin replaces the default checkboxes and radio inputs for better looking ones. Source + Demo 2. iCheck Highly customizable checkboxes and radio buttons for jQuery and Zepto. SourceDemo 3. A simple jQuery plugin allowing you to replace the browser defaults for radio buttons and checkboxes with your own custom design.