Skip Navigation Services Work Apps Blog Contact

YUI Niceforms

FreshCut is proud to present YUI Niceforms (v0.1), an easy to use and highly configurable YUI plugin to give most form controls a modern look that is consistent across all major browsers. Based on Niceforms by Lucian Slatineanu.

YUI Niceforms is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License. Creative Commons License
Based on a work at www.emblematiq.com.

Documentation and Live Demo:

Features
Download
Unstyled Form
Form with Class "ynf"
"selectChange" Event
YAHOO.util.Niceforms Methods
YAHOO.util.Niceforms Properties

Features:
  • Using YUI Niceforms is as easy as adding the class "ynf" to your form.
  • Small JS and CSS files - 5kb gzipped.
  • Only images are a 15kb .png sprite and a blank.gif.
  • Very simple to customize. .PSD file included for easy skinning.
  • Support for all major browsers: IE6+, FF2+, Safari 3+, Opera 9+, Chrome 1+
  • CSS3 resize support (a few more tiny .pngs are served to equipped browsers).
  • Methods for forms and controls that have been appended via script.
  • Fires "click" event for checkboxes, radio inputs, and buttons.
  • Executes inline onchange handlers for replaced select elements.
  • Custom YUI "selectChange" event for faux select elements.

Top

Download:

Click here to download YUI Niceforms in a 73kb .zip file. Includes the .PSD skinning file for easily creating your own theme or style. Place these files in a new folder on your server. By default, the script assumes the folder name is "ynf", but this is configurable.

Top

Unstyled form:

Text Inputs:

Checkbox Inputs:

Radio Inputs:

Selects:

Text Areas:

<button type="button" onclick="alert('Hello world.');">Some Button</button>

<button type="submit">Some Submit Button</button>

<input type="submit" value="Submit" />

Top

Same form with class "ynf":

Text Inputs:

Checkbox Inputs:

Radio Inputs:

Selects:

Text Areas:

<button type="button" onclick="alert('Hello world.');">Some Button</button>

<button type="submit">Some Submit Button</button>

<input type="submit" value="Submit" />

Top

Listening for the "selectChange" event:
    <script type="text/javascript">

    // Use onAvailable/onContentReady for static select elements:
    YAHOO.util.Event.onAvailable("ynf-form2Select02", function(){
        var oSelect = document.getElementsByName("form2Select02")[0];
        oSelect.selectChange.subscribe(function(){
            alert(this.options[this.selectedIndex].value);
        });
    });

    </script>

Top

YAHOO.util.Niceforms methods:
  • YAHOO.util.Niceforms.niceButton( string | element reference | array of element references )
  • YAHOO.util.Niceforms.niceCheckbox( string | element reference | array of element references )
  • YAHOO.util.Niceforms.niceRadio( string | element reference | array of element references )
  • YAHOO.util.Niceforms.niceSelect( string | element reference | array of element references )
  • YAHOO.util.Niceforms.niceText( string | element reference | array of element references )
  • YAHOO.util.Niceforms.niceTextarea( string | element reference | array of element references )
  • YAHOO.util.Niceforms.renderArray( array of element references )
  • YAHOO.util.Niceforms.renderForm( element reference )

Top

YAHOO.util.Niceforms properties:
  • YAHOO.util.Niceforms.cornerRadius - Radius in pixels of your rounded corners. Default 5.
  • YAHOO.util.Niceforms.css3Resize - You can force the resize layout mode by setting this to true.
  • YAHOO.util.Niceforms.forms - Forms with class "ynf" at page load.
  • YAHOO.util.Niceforms.img - Path to image folder. Default "ynf/".
  • YAHOO.util.Niceforms.niceHeight - Common height in pixels of your form controls. Default 22.
  • YAHOO.util.Niceforms.selectArrow - Width in pixels of your select elements' arrows. Default 25.
  • YAHOO.util.Niceforms.selectLimit - Number of options to allow before inserting scrollbar. Default 10.
  • YAHOO.util.Niceforms.selectScrollWidth - Width in pixels to add to dropdown for scrollbar. Default 15.
  • YAHOO.util.Niceforms.selectSpeed - Time in seconds to expand/collapse dropdowns. Default 0.25.
  • YAHOO.util.Niceforms.selectTimer - Time in seconds after mouseout to close dropdowns. Default 0.25.

Top