Re: [jQuery] Simple checkbox replacement
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(){
> $("")
> .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
> discuss@jquery.com
> http://jquery.com/discuss/
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
> Does $("") use DOM methods (i.e. document.createElement) or
> innerHTML for creating elements?
It uses the same techniques as what's used in .append(), etc. Namely,
creating a temporary element, inserting the html in the
innerHTML, then pulling the constructed DOM back out again.
So any valid HTML is fair game.
--John
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
On 15/08/06, John Resig <[EMAIL PROTECTED]> 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(){
> $("")
> .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
>
Does $("") use DOM methods (i.e. document.createElement) or
innerHTML for creating elements?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
> this should work to?
>
> $("foo").appendTo("body").find("li").click(...);
>
> or does appendTo break the chain?
That is correct, that would work equally as well (and better, since it
doesn't leak) - since appendTo() does not break the chain.
--John
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
Dave Methvin schrieb:
>> $("foo").find("li").click(...).end().appendTo("body");
>
> IE6 leaks a small amount of memory if you attach an event handler before
> tacking it onto the body:
> http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/d
> nwebgen/ie_leak_patterns.asp
> Probably isn't worrisome unless you're generating a lot of them though.
this should work to?
$("foo").appendTo("body").find("li").click(...);
or does appendTo break the chain?
-- klaus
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
> $("foo").find("li").click(...).end().appendTo("body");
IE6 leaks a small amount of memory if you attach an event handler before
tacking it onto the body:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/ietechcol/d
nwebgen/ie_leak_patterns.asp
Probably isn't worrisome unless you're generating a lot of them though.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
don't forget the , also 'css only' would do in this case. saw this here: http://www.chriserwin.com/scripts/crir/ __ Advertisement: Es iesu uz uz mobilo festivalu re:loud! 14 grupas, 2 skatuves, DJ telts, atrakcijas 1.septembri Mezaparka estrade www.reloud.lv ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
> I like that, especially the new dom element creation ... does it also
> include any nifty way to do nested element creation like the dom
> creation plugins?
Well, (nearly) anything that can go in a .append() can now, also, go
in $() - I've found that this simple change has completely changed how
I write jQuery code - it's pretty cool.
As far as nested content goes, you could do it in multiple ways:
$("foo").find("li").click(...).end().appendTo("body");
or
$("").append(
$("").click(...)
).appendTo("body");
So yeah, you can write code that's very similar to the DOM plugin. Enjoy :-)
--John
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
I like that, especially the new dom element creation ... does it also
include any nifty way to do nested element creation like the dom
creation plugins?
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(){
> $("")
> .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
> discuss@jquery.com
> http://jquery.com/discuss/
>
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
On 8/15/06, John Resig <[EMAIL PROTECTED]> 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 thechanges that are possible:jQuery.fn.checkbox = function (opt) {
$("[EMAIL PROTECTED]'checkbox']", this).hide().each(function(){$("")Notice the element creation here... very slick John!
.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 = "" ?
opt.checked : opt.unchecked;>> $(img).click( function() {>> var input = this.nextSibling;> if ( input.checked ) {>
this.src = "">> input.checked = "";> }> else {> this.src = ""
;> input.checked = "checked";> }> });>> $(this).parent().prepend(img)> $(this).hide();
> });> }>>> Usage> $(document).ready( function () {> $().checkbox({checked: "accept.png", unchecked: "cancel.png"});> });
___jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
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(){
$("")
.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
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Simple checkbox replacement
Oooh...nice!
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of kawika k
Sent: Tuesday, August 15, 2006 3:45 PM
To: jQuery Discussion.
Subject: [jQuery] Simple checkbox replacement
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
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Simple checkbox replacement
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
discuss@jquery.com
http://jquery.com/discuss/
