I want to create a very custom look for checkboxes. To do it I want to
replace a standard <input type="checkbox"/> with the following...
<div class="checkbox">
<input type="checkbox"/>
<img src="clear.gif"/>
</div>
This will allow me (via css) to overlay the transparent image
(clear.gif) on top of the <input> field and change the image's
background image to get whatever look/feel i want. The change will be
accomplished by adding/removing a class of "checked" to the
div.checkbox element and subsequently toggling the <input> element
itself. I'm trying to do this by creating a class using Prototype. I
think i'm close, but I'm not very good with this so I need help :(
here's the class...
var CustomCheckbox = Class.create({
initialize : function(elem) {
this.input = elem;
this.image = '<img src="assets/images/clear.gif"/>';
this.checkbox;
this.convertInput();
this.registerEventListener();
}
,convertInput : function() {
if(!this.input.checked) {
this.checkbox = this.input.wrap('div', { 'class':
'checkbox' });
} else {
this.checkbox = this.input.wrap('div', { 'class':
'checkbox
checked' });
}
this.checkbox.insert({ bottom: this.image });
}
,registerEventListener : function() {
Event.observe(this.checkbox, 'click', function() {
this.toggleInput();
});
}
,toggleInput : function() {
if(this.checkbox.hasClassName('checked')) {
this.checkbox.removeClassName('checked');
this.input.checked = false;
} else {
this.checkbox.addClassName('checked');
this.input.checked = true;
}
}
});
..and here's how i'm implementing it...
Event.observe(window, 'load', function() {
$$('input[type=checkbox]').each(function(input) {
new CustomCheckbox(input);
});
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
