Tested on Safari 7.0.1, Chrome 32, Firefox 26 and IExplorer 9
This simple library allows to easily customize form elements like radio buttons, checkboxes and select menu. It is easy to configure and will look exactly like you want it. Oh and it is accessible!
var form = document.getElementsByTagName('form');
idex.customize(form);
Voilà! That was easy. With this simple code, all the customizable elements of your form has been replaced by a simple HTML structure that will be easy to stylize in CSS...
Ok, let's do more!
The idex.customize
function takes two arguments an element [DOM element or jQuery]
and the options [object]
. And here's the magic.
First, there's the callbacks. The callbacks option takes an object with two properties (both optional): beforechange
and afterchange
. Like their name suggest, the first one is called before the value of the form element is changes, the second is called after.
var form = document.getElementsByTagName('form');
idex.customize(form, {
callbacks: {
beforechange: function() {
// this is the element targeted
console.log("The current value is " + this.value);
},
afterchange: function() {
console.log("The new value is " + this.value);
}
}
});
Here's the biggest part of the fun. Every elements can be supplied with a template to represent it.
By the default, the element will be served one of three template:
<div></div>
Used for radiobuttons and checkboxes
<a href="" title="{{ value }}">{{ value }}</a>
Used for button and submit type inputs
<div class="select">
<div class="select-selected" data-element="selected">{{ selected }}</div>
<div class="select-dropdown" data-element="dropdown">
<ul>
{{ #options }}
<li data-value="{{ value }}" data-element="option"">{{ text }}</li>
{{ /options }}
</ul>
</div>
</div>
Used for select menus
Now... That's no fun, so let's jazz it up with the template option along with the selector option... :P
var form = document.getElementsByTagName('form');
idex.customize(form, {
select: { // The selector option let you select an element by name or by tagName
template: '' +
'<div class="select">' +
'<div class="select-selected" data-element="selected">' +
'<div class="select-selected-text">{{ selected }}</div>' +
'<div class="select-selected-icon"> </div>' +
'</div>' +
'<div class="select-dropdown" data-element="dropdown">' +
'{{ #options }}' +
'<div data-value="{{ value }}" data-element="option"> {{ text }}</div>' +
'{{ /options }}' +
'</div>' +
'</div>'
}
});
You could also keep your structure apart like this:
<script id="select-template" type="template/text">
<div class="select">
<div class="select-selected" data-element="selected">
<div class="select-selected-text">{{ selected }}</div>
<div class="select-selected-icon"> </div>
</div>
<div class="select-dropdown" data-element="dropdown">
{{ #options }}
<div data-value="{{ value }}" data-element="option"> {{ text }}</div>
{{ /options }}
</div>
</div>
</script>
var form = document.getElementsByTagName('form');
idex.customize(form, {
select: { // The selector option let you select an element by name or by tagName
template: document.getElementById('select-template').innerHTML
}
});
You'll notice on the select menu structure the presence of the data-element
attribute. This attribute help identify the different part of more complex structure.
The select menu structure has three:
selected
: The box where the currently selected text is displayed.dropdown
: The dropdown part of the menu, normally the part that toggle show/hide.option
: The option element, normally the one that is looped over.
Can be pretty powerful eh?
Ok now you probably noticed the handle bar style {{ }}
template? By default, the IDeX library use mustache.js
as a dependency.
But that can be easily replaced if needed. If by example, you want to use underscore.js
instead:
<script src="underscore.js"></script>
<script src="customize.form.idex.js"></script>
<script src="app.js"></script>
idex.render = function(template, options) {
var template = _.template(template);
return template(options);
}
And tadam, no more extra dependency! Quick disclaimer: if you change de render function chances are that you will also have to change the templates`
The last important option is the classes
option. It allows you to change the state classes applied on the elements.
var form = document.getElementsByTagName('form');
idex.customize(form, {
classes: {
active: 'active', // Mainly used on radiobuttons and checkboxes
focus: 'focus', // Used on every elements when it come into focus
hide: 'hide' // Only used on the dropdown part of the select menu
}
});