Archive for the ‘Forms’ Category

jQuery.my is a lightweight jQuery plugin which binds HTML with JS objects (in real-time).

The plugin is form-centric and it is used to validate simple-to-complex forms while making sure every rule and data is in sync.

jQuery.my

jQuery.my catches a moment when a watched control (input) is updated. Once it happens, it applies formatting and checks whether tied controls are to be revalidated and redrawn. Also jQuery.my stores data from the control into JS object and modifies other data if needed.

It is jQuery UI-friendly and requires SugarJS to function (besides jQuery).

Improving (manipulating) standard HTML elements with JavaScript for a better usability makes sense when used wisely.

ddSlick, a lightweight jQuery plugin, does that by mimicking the behavior of list-menus with a better look and more information.

It works as a drop-down menu where we can use images and description besides a simple text.

ddSlick jQuery Plugin

The data source that populates the drop-down options is JSON and there are multiple options for customizing the functionality. The look & feel can be changed as well (very few styles used).

There is also a callback function that is fired when an option is selected (which is good for auto-modifying a hidden form for a possible submit, etc.).

Today, using JavaScript frameworks, it is so easy to accomplish complex stuff with few lines of code, including Ajax.

For forms, if you want to make it much easier, ALAJAX is there for you. It is a jQuery plugin that automagically converts standard forms into Ajaxed ones, no coding required.

jQuery Alajax

Once inserted and the forms are defined, It blocks the default POST functionality, analyzes the input types used and sends them as an Ajax request.

Its code is well commented and leaves space for further customizations (extra actions to be taken before/after submitting).

jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).

It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.

jQuery Knob Control

We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).

There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.

minjs is a collection of independent components, built on jQuery, that aims to accomplish a specific job with lightweight code.

Currently, there are 3 components: minform, longtable and dtcal.

minjs

minform brings cross-browser compatibility to HTML5 form enhancements (for attributes: placeholder, required and autofocus).

longtable is for easily navigating through tables with many rows. It adds a pagination and offers functions to directly viewing any given page.

And, drcal, a simple calendar framework that looks and behaves how you wish. There are several functions for interacting with it.