Me encuentro un completo tutorial con el que podremos reemplazar el aspecto de los elementos <input type="checkbox" />
por otro mucho más atractivo.
Básicamente se trata de un HTML adaptado a la nueva estética, CSS que le dá ese elegante aspecto y unas líneas de jQuery (aunque puede ser cualquier framework, o ninguno de ellos).
HTML
<form>
<fieldset>
<label for="choices">
<ul>
<li>
<input name="jqdemo" value="value1" type="checkbox" />
<p>Here is the first selection</p>
<a href="#">Select</a>
<a href="#">Cancel</a>
</li>
<li>
<input name="jqdemo" value="value2" type="checkbox" />
<p>Here is the second selection</p>
<a href="#">Select</a>
<a href="#">Cancel</a>
</li>
<li>
<input name="jqdemo" value="value3" type="checkbox" />
<p>Here is the third selection</p>
<a href="#">Select</a>
<a href="#">Cancel</a>
</li>
<li>
<input name="jqdemo"value="value4" type="checkbox" />
<p>Here is the fourth selection</p>
<a href="#">Select</a>
<a href="#">Cancel</a>
</li>
</ul>
</label>
<div style="clear: both;"></div>
<button type="submit" name="submitbutton" title="Submit the form" />Send it!
</fieldset>
</form>
Javascript
// jQuery
$(document).ready(function() {
$(".checklist .checkbox-select").click(
function(event) {
event.preventDefault();
$(this).parent().addClass("selected");
$(this).parent().find(":checkbox").attr("checked","checked");
}
);
$(".checklist .checkbox-deselect").click(
function(event) {
event.preventDefault();
$(this).parent().removeClass("selected");
$(this).parent().find(":checkbox").removeAttr("checked");
}
);
});
// MooTools
// No lo he podido probar
window.addEvent('domready', function() {
$$(".checklist .checkbox-select").addEvent('click', function(event){
event.preventDefault();
this.getParent().addClass("selected");
this.getParent().getElements(":checkbox").each(function(el){
el.attr("checked","checked");
});
}
);
$$(".checklist .checkbox-deselect").addEvent('click', function(event){
event.preventDefault();
this.getParent().removeClass("selected");
this.getParent().getElements(":checkbox").each(function(el){
el.removeAttr("checked");
});
});
});
El CSS y los Sprites los teneis en esta página. Si quereis verlo funcionando podeis verlo directamente desde aquí.
4 comentarios, 4 referencias
+
#