wSelect.js

A jQuery plugin for fully customizable and clean looking select boxes. These are div based select boxes that will allow us to do additional things like adding icons to our options.

Related Plugins

wForm - See all the form plugins working together.
wInput - Input plugin that handles backwards compatability for placeholders.
wCheck - Radio and checkbox input plugin.
wChar - On the fly character counter for inputs.

Settings

Available options with notes, the values here are the defaults.

$.fn.wSelect.defaults = {
    theme: 'classic',         // theme
    size: '4',                // default number of options to display (overwrite with `size` attr on `select` element)
    labelPosition: 'left',    // set position for label (left,top)
    highlight: true           // highlight fields when selected
};

Examples

The plugin should work seamlessly with click or change events triggered from either end.

Include the following files:

<script type="text/javascript" src="./wSelect.js"></script>
<link rel="Stylesheet" type="text/css" href="./wSelect.css" />

options

If you add, remove or modify any HTML content for any of the select options you will require a refresh.

NOTE: if you modify a select value a reset is NOT required, only for visible elements like changing the HTML content of an option or adding or removing options.

$('#select').append('<option value="four">four</option>').wSelect('reset');

values

If a value is set manually using val() you will need to trigger a change event.

$('#select').val('two').change();

Or if you don't want to trigger the select elements change event just run the plugin change method to update only the visuals.

$('#select').val('two').wSelect('change');

icons

Icons can be added by setting an image path in the data-icon attribute for each option.

<option value="example" data-icon="/path/to/image.png">Example</option>

To leave an indent with no image set the data-icon attribute to an empty string.

<option value="example" data-icon="">Example</option>

Not setting the attribute at all will leave no indent and will appear normally.

<option value="example">Example</option>

size

Setting the size can be done by using the global defaults or setting the attribute size on the element directly.

$.fn.wSelect.defaults = {
    ...
    size: '5',
    ...
};

If the size attribute on the element is set it will overwrite the global value set in the defaults.

<select size="3">
    <option></option>
    ...
</select>

width

You can set the width of the select elements explicitly by setting the width property via CSS.

.wSelect {
    width: 200px;
}

If you want a dynamic width for the select only set the min-width and max-width properties and make sure to NOT include the width property.

.wSelect {
    min-width: 100px;
    max-width: 200px;
}

CSS labels

Global CSS labels are also available in this plugin and can be used by setting an adding the class name wLabel-left, wLabel-top or wLabel-left-top to an element.

<label class="wLabel-left">Label:</label>

Resources

License

MIT licensed

serdimoa/wSelect