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.
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:
Check 01 Check 02 Check 03

Radio Inputs:
Radio 01 Radio 02 Radio 03

Selects:
Test 01 Test 02 Test 03 Test 01 Test 02 Test 03 A really long option just to see what happens. Test 01 Test 02 Test 03 Test 04 Test 05 Test 06 Test 07 Test 08 Test 09 Test 10 Test 11 Test 12 Test 13 Test 14 Test 15 Test 16 Test 17 Test 18 Test 19 Test 20 Test 21 Test 22 Test 23 Test 24 Test 25 Test 26 Test 27 Test 28 Test 29 Test 30 Test 01 Test 02 Test 03 Test 04 Test 05 Test 06 Test 07 Test 08 Test 09 Test 10 Test 11 Test 12 Test 13 Test 14 Test 15 Test 16 Test 17 Test 18 Test 19 Test 20 Test 21 Test 22 Test 23 Test 24 Test 25 Test 26 Test 27 Test 28 Test 29 Test 30 A really long option just to see what happens.

Text Areas:

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

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

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

Top

Same form with class "ynf":

Text Inputs:

Checkbox Inputs:
Check 01 Check 02 Check 03

Radio Inputs:
Radio 01 Radio 02 Radio 03

Selects:
Test 01 Test 02 Test 03 Test 01 Test 02 Test 03 A really long option just to see what happens. Test 01 Test 02 Test 03 Test 04 Test 05 Test 06 Test 07 Test 08 Test 09 Test 10 Test 11 Test 12 Test 13 Test 14 Test 15 Test 16 Test 17 Test 18 Test 19 Test 20 Test 21 Test 22 Test 23 Test 24 Test 25 Test 26 Test 27 Test 28 Test 29 Test 30 Test 01 Test 02 Test 03 Test 04 Test 05 Test 06 Test 07 Test 08 Test 09 Test 10 Test 11 Test 12 Test 13 Test 14 Test 15 Test 16 Test 17 Test 18 Test 19 Test 20 Test 21 Test 22 Test 23 Test 24 Test 25 Test 26 Test 27 Test 28 Test 29 Test 30 A really long option just to see what happens.

Text Areas:

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

<button type="submit">Some Submit Button</button>
Some Submit 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