Just in case anyone tries to implement the code below, this.src returns
the full url path for the image, and so string manipulation is needed
for the this.src == opt.checked statement. A better approach I've found
is to use
var check = $(this).next().attr( "checked" ) == true;
I'm testing against Rev 200 of SVN code. The simple DOM creation stuff
in it is pretty fun.
Kawika
John Resig wrote:
> This is some great code - I really dig it. It's super simple, which is good.
>
> Just as a mini-tutorial to the upcoming 1.0b, here are some of the
> changes that are possible:
>
> jQuery.fn.checkbox = function (opt) {
> $("[EMAIL PROTECTED]'checkbox']", this).hide().each(function(){
> $("<img>")
> .src( this.checked ? opt.checked : opt.unchecked )
> .click( function() {
> var check = this.src == opt.checked;
>
> $(this)
> .src( check ? opt.unchecked : opt.checked )
> .next().attr( "checked", check ? "" : "checked" );
> }).insertBefore( this );
> });
> };
>
> I'm not saying that mine is any better - just using this as a
> demonstration of what's possible.
>
> --John
>
>> Example
>> http://kawika.org/jquery/checkbox/
>>
>>
>> Code
>> jQuery.fn.checkbox = function (opt) {
>>
>> $("[EMAIL PROTECTED]'checkbox']", this).each( function () {
>>
>> var img = document.createElement("img");
>> img.src = this.checked ? opt.checked : opt.unchecked;
>>
>> $(img).click( function() {
>>
>> var input = this.nextSibling;
>> if ( input.checked ) {
>> this.src = opt.unchecked;
>> input.checked = "";
>> }
>> else {
>> this.src = opt.checked;
>> input.checked = "checked";
>> }
>> });
>>
>> $(this).parent().prepend(img)
>> $(this).hide();
>> });
>> }
>>
>>
>> Usage
>> $(document).ready( function () {
>> $().checkbox({checked: "accept.png", unchecked: "cancel.png"});
>> });
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
