jStyling — plugin for styling of selects, checkboxes, radio buttons and file selects with JQuery.

Overview

By default jStyling has several settings:

selectClass{'w':'jstyling-select', 's':'jstyling-select-s', 'l':'jstyling-select-l', 't':'jstyling-select-t'} — class names for styling of selects;
checkboxClass:'jstyling-checkbox' — class name for styling of checkboxes;
radioClass:'jstyling-radio' — class name for styling of radio buttons;
fileClass{'w':'jstyling-file', 'f' : 'jstyling-file-f', 'b' : 'jstyling-file-b'} — class names for styling of file selects;
fileButtonText:'Browse' — text of the button in file select.

Use this code to change the settings:


$.jStyling({'fileButtonText': 'Upload file'})

Changing anything except fileButtonText is NOT recommended.

Use latest stable version of jQuery for working with jStyling (1.4.4 at the moment of writing)

jStyling is tested and works in:

Firefox 3.6.12 (Win XP, MacOS X)
Google Chrome 7.0 (Win XP, MacOS X)
Opera 10.63 (Win XP)
Safari 5.0 (Win XP, MacOS X)
IE 7,8 (Win XP)

Selects

Remove styling Block select Unblock Option 2

Select with additional settings {extraClass:'extra'}


Before styling:
<select name="select1" >...</select>

After styling:
<div class="jstyling-select">
    <div class="jstyling-select-l">
        <div class="item-1">Option 1</div>
        <div class="item-2" disabled="true">Option 2</div>
        <div class="item-3">Option 3</div>
    </div>
    <div class="jstyling-select-s">
        <div class="jstyling-select-t">Option 1</div>
    </div>
    <select name="select1" style="display: none;">...</select>
</div>

There are 3 methods for working with selects in jStyling:

$.jStyling.createSelect(elements [, options]) — create styled select.
$.jStyling.updateSelect(elements) — update select.
$.jStyling.destroySelect(elements) — delete styled select.

$.jStyling.createSelect(elements [, options])

Parameters:

elements — selects, to which styling will be applied.
options — optional parameter, additional settings.
Options is an object {extraClass: 'className'}, where extraClass are additional classes for styled select.

Examples:


/**
 * Style all selects
 */
 $.jStyling.createSelect($('select'));
/**
 * Style select with name=extra, styles select will have additional class "extra". 
 * Width of the styled select equals width of the select.
 */
 $.jStyling.createSelect($('select[name="extra"]'), {extraClass: 'myExtraClass'});

$.jStyling.updateSelect(elements)

elements = what selects will be updated.

Method is used when update of select values is needed (for example after ajax load), blocking/unblocking of certain <option> or of the whole select.

Examples:


/**
 * Update all selects 
 */                               
 $.jStyling.updateSelect($('select'));
/**
 * Block select with name=extra
 */
 $('select[name="extra"]).attr('disabled','true');                                  
 $.jStyling.updateSelect($('select[name="extra"]'));

$.jStyling.destroySelect(elements)

elements = selects, for wchich styling will be removed.

Examples:


/**
 * Delete styling of all selects
 */ 
 $.jStyling.destroySelect($('select'));
/**     
 * Delete styling of select with name=extra
 */            
 $.jStyling.destroySelect($('select[name="extra"]'));

Checkboxes

first second third forth (without label, click only on checkbox)

Unblock first checkbox Remove styling Add click handler


Before styling:
<input type="checkbox" name="checkbox">

After styling:        
<div class="jstyling-checkbox">
    <input type="checkbox" name="checkbox">
</div>

There are 3 methods for working with checkboxes:

$.jStyling.createCheckbox(elements [, options]) — create styled checkboxes.
$.jStyling.updateCheckbox(elements) — update checkboxes.
$.jStyling.destroyCheckbox(elements) — delete styled checkboxes.

$.jStyling.createCheckbox(elements [, options])

Parameters:

elements — checkboxes, to which styling will be applied.
options — optional parameter, additional settings
Options is an object {extraClass: 'className'}, where extraClass are addiotional classes for styled CheckBox.

Example:


/**
 * Add styling to all checkboxes
 */                               
 $.jStyling.createCheckbox($('input[type=checkbox]'));

$.jStyling.updateCheckbox(elements)

elements — checkboxes, which will be updated.

Examples:


/**
 * Update all checkboxes
 */                               
 $.jStyling.updateCheckbox($('input[type=checkbox]'));
/**
 * Block checkbox with id=terms
 */
 $('#terms).attr('disabled','true');                                  
 $.jStyling.updateCheckbox($('#terms'));

$.jStyling.destroyCheckbox(elements)

elements — checkboxes, which styling will be removed.

Пример:


/**
 * Delete styling for all checkboxes
 */                               
 $.jStyling.destroyCheckbox($('input[type=checkbox]'));

Radio buttons

first second third forth (without label)

Unblock first radio button Remove styling


Before styling:
<input type="radio" name="radio">

After styling:        
<div class="jstyling-radio">
    <input type="radio" name="radio">
</div>

There are 3 methods for working with radio buttons in jStyling

$.jStyling.createRadio(elements [, options]) — creation of styled radio buttons.
$.jStyling.updateRadio(elements) — updating of radio buttons.
$.jStyling.destroyRadio(elements) — deleting of styled radio buttons.

Input parameters and principles of work are the same as for checkboxes

File selects

Remove styling Change text on the button


Before styling:
<input type="file" size="30" name="file" id="file">

After styling:
<div class="jstyling-file">
    <div class="jstyling-file-f"></div>
    <div class="jstyling-file-b">Upload file
        <input type="file" size="30" name="file" id="file" style="...">
    </div>
</div>

There are 2 methods in jStying to work with file selects:

$.jStyling.createFileInput(elements [, options]) — creation of styled file selects.
$.jStyling.destroyFileInput(elements) — removing of styled file selects.

$.jStyling.createFileInput(elements [, options])

Parameters:

elements — file selects, to which styling will be applied.
options — optional parameter, additional settings.

Options is an object {extraClass: 'className', fileButtonText: 'text'}

extraClass — additional classes for file selects styling.
fileButtonText — text on the button.

Examples:


/**
 * Add styling to all file selects
 */
 $.jStyling.createFileInput($('input[type=file]'));
/**
 * Add styling to file selects with id=file, text on the button = "Browse"
 */
 $.jStyling.createFileInput($('#file'), {fileButtonText: 'Browse'});

$.jStyling.destroyFileInput(elements)

elements — file selects, for which styling will be removed

Example:


/**
 * Delete styling for all file selects
 */
 $.jStyling.destroyFileInput($('input[type=file]'));