Open Source Resources for Web Application Developers

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. It works in sync with your real form elements to ensure accessibility and compatibility. You can also look at Niceforms that gives your forms new themes.

Requirements: jQuery Framework 1.3+
Demo: http://pixelmatrixdesign.com/uniform/
License: MIT License

• 4 Comments

Ketchup is a slim jQuery Plugin that validates your forms. It aims to be very flexible and extendable for its appearance and functionality. Although Ketchup is designed to be styled and extended by you, it already looks tasty and gives you the most common validations by default. If there is no validation fits your needs, you can always write your own too. You can make your own ketchup with ease.

Requirements: jQuery Framework
Demo: http://demos.usejquery.com/ketchup-plugin/
License: MIT, GPL License

• 6 Comments

jQuery MultiSelect Plugin was intended to re-factor Cory LaViska’s MultiSelect implementation, but it quickly turned into a complete re-write with a focus on speed and ThemeRoller support. This plugin turns an ordinary HTML select control into an elegant drop down list of checkboxes.

jQuery MultiSelect Plugin is compatible with jQuery 1.4.0+ and all themes from jQuery UI 1.7+. It is known to work in Firefox 2+, IE 6+, Chrome Beta/4, Safari 4 and Opera 10.

Requirements: jQuery Framework
Demo: http://www.erichynds.com/examples/jquery-multiselect…
License: MIT, GPL License

• 2 Comments

We have introduced jQuery iPhone-like Password Fields few months ago. Now, we have a similar iPhone Style Passing Masking using Mootools – PassShark. It is a free and easy-to-implement password masking class, which has been on tested on Safari 3+, Firefox 3+, Opera 10+, IE 6 and 7.

The goal with delayed password masking, is to help the user through a less painful way of populating forms and specifically password fields. This methodology is fast becoming popular on Mobile Devices, Desktop applications and the Web browser alike.

Requirements: Mootools Framework
Demo: https://www.queridodesign.net/blog/passshark
License: MIT License

• 1 Comment

openWYSIWYG is a free cross-browser WYSIWYG editor that’s packed with every rich-text editing feature you need to make your content management system much better. It loads extremely fast. Completely written in JavaScript and DHTML.

Setting up openWYSIWYG is so easy, you can quickly turn any <textarea> into a powerful WYSIWYG editor with just a few simple lines of code. Packed with every rich text editing feature you need, openWYSIWYG gives you total control over formatting your text, e.g. Bold, italicize, change the color of your text, and more.

Requirements: IE 5.5+, Firefox 1.0+, Mozilla 1.3+ and Netscape 7+
Demo: http://www.openwebware.com/wysiwyg/demo.shtml
License: LGPL License

• 13 Comments

AutoSuggest jQuery Plugin makes auto-completing extremely easy. AutoSuggest will turn any regular text input box into a rad auto-complete box. It will dynamically create all the HTML elements that it needs to function. You don’t need to add any extra HTML to work with AutoSuggest.

Also, AutoSuggest jQuery Plugin uses ZERO images! All styling is done 100% in the included CSS file. This means it is super easy to customize the look of everything! You only need to edit the included CSS file. You can even use images if you want, just add the appropriate lines of code into the CSS file. And also, AutoSuggest jQuery plugin is dramatically smaller in size with just 7kb minified.

Requirements: jQuery Framework
Demo: http://code.drewwilson.com/entry/autosuggest-jquery-plugin
License: MIT, GPL License

• 1 Comment

A webform on a web page allows a user to enter data that is sent to a server for processing. Webforms usually include checkboxes, radio buttons, or text fields. Designing webforms can be tedious sometimes. M. Manojlovic has saved us so much time by providing us some really nice Web Form Elements (Vol.1 and Vol.2) in PSD, which you can use them for free.

Web Form Elements Vol.1

Web Form Elements Vol.2

Requirements: -
Web Form Vol.1: http://sniperyu.deviantart.com/art/Web-Form-Elements-1…
Web Form Vol.2: http://sniperyu.deviantart.com/art/Web-Form-Elements-Vol-2…
License: License Free

• 5 Comments

CSS Globe has shown us a little trick that you can apply to your forms to enhance user experience. We will display editable form data (indented to be edited, updated) as regular tabular data intended for reading.

This works on most modern browsers with pure CSS, but we need a little bit of Javascript in order to make this work on Internet Explorer though, because of the lack of support for :focus pseudo-class.

Requirements: -
Demo: http://cssglobe.com/articles/editable_fields/
License: License Free

• 2 Comments

jQuery Slider plugin (Safari style) is easy to use and multifunctional jQuery plugin. It makes selected elements into sliders. The handle can be moved with the mouse easily. There are various options such as step of pointer, heterogeneity, dimension, limits and scale.

If you do not fancy the Safari style, you can also define your own new skin for the sliders as well. (Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css)

Requirements: jQuery Framework
Demo: http://blog.egorkhmelev.com/2009/11/jquery-slider-safari-style/
License: License Free

• 0 Comments

Twitter is running a new homepage with clean and easy design for a while already. Look at the top right of Twitter’s homepage, you’ll see the sign in button which will drop down the login form. AEXT has written a tutorial to show you how to create a login drop down with Twitter style using jQuery.

It is easy to follow, it also helps you save the space of your webpage and make visitors feel comfortable by the awesome toggle login form. The tutorial explains how it works step by step and it’s good for learning how to do the toggle and tooltips with jQuery.

Requirements: jQuery Framework
Demo: http://aext.net/example/twitterlogin/
License: License Free

• 8 Comments