OriDomi - origami for the web Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support
Checkboxes and radio buttons customization (jQuery and Zepto) plugin Selectize.js Current Value: "awesome,neat" Add and remove items in any order without touching your mouse. 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. This demo shows how to integrate third-party data from the Rotten Tomatoes API. Current Value: "web development,design" drag these items around with your mouse
SelectBoxIt Turns this Description SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. The project is hosted on Github, the annotated source code is available, and an online test suite is also available via Travis CI. Fork on Github » Also, if you would like to receive updates about new SelectBoxIt releases, you can subscribe to the SelectBoxIt Mailing List Examples Note: You can try all SelectBoxIt options, events, and methods inside of the HTML editor at the top of the page. Theming Support Default Theme Note: The default theme closely resembles the Twitter Bootstrap theme, but does not require Twitter Bootstrap as a dependency. Example Code // Calls the selectBoxIt method on your HTML select box and uses the default theme $("select").selectBoxIt(); Bootstrap Theming Support Into this SelectBoxIt is: jQueryUI Theming Support Long Lists
Uniform - Sexy forms with jQuery Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? 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. 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. selectClass (string) Default: "selector" Sets the class given to the wrapper div for select elements. radioClass (string) Default: “radio” Sets the class given to the wrapper div for radio elements. checkboxClass (string) Default: “checker” Sets the class given to the wrapper div for checkbox elements. fileClass (string)
SelectBoxIt by Greg Franko Turns this Description SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. The project is hosted on Github, the annotated source code is available, and an online test suite is also available via Travis CI. Fork on Github » Also, if you would like to receive updates about new SelectBoxIt releases, you can subscribe to the SelectBoxIt Mailing List Examples Note: You can try all SelectBoxIt options, events, and methods inside of the HTML editor at the top of the page. Theming Support Default Theme Note: The default theme closely resembles the Twitter Bootstrap theme, but does not require Twitter Bootstrap as a dependency. Example Code // Calls the selectBoxIt method on your HTML select box and uses the default theme $("select").selectBoxIt(); Bootstrap Theming Support Into this SelectBoxIt is: jQueryUI Theming Support Long Lists
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). 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 | jQuery UI jQuery UI offers a combination of interaction, effects, widgets, utilities, and themes designed to work well together or on their own. Play with the demos, view the source, build a theme, read the API documentation and start using jQuery UI today. Interactions Interactions add basic mouse-based behaviors to any element. You can create sortable lists, resizable elements, drag & drop behaviors and more with just a few lines of code. Interactions also make great building blocks for more complex widgets and applications. Widgets Widgets are full-featured UI controls that bring the richness of desktop applications to the Web. Effects Effects add support for animating colors and class transitions, as well as providing several additional easings. Utilities Utilities used by jQuery UI to build interactions and widgets.