[Seaside] jQuery toggle with a changing image

Bob N. bobn at rogers.com
Wed Jun 22 21:52:54 UTC 2011


Well... that was way too easy ;-)

Thanks,
Bob

On Wed, Jun 22, 2011 at 5:02 PM, Robert Sirois <watchlala at hotmail.com>wrote:

> Pop both anchors in there and do a show/hide. I think there's a toggle for
> hidden in there somewhere too.
>
> RS
>
> ------------------------------
> Date: Wed, 22 Jun 2011 16:30:47 -0400
> From: bobn at rogers.com
> To: seaside at lists.squeakfoundation.org
> Subject: [Seaside] jQuery toggle with a changing image
>
>
> Hello,
> I'm using a jQuery ajax script to toggle the display of a component. The
> anchor is initially displayed with a '+' png image. When clicked the hidden
> div is toggled and the anchor image is changed to a '-'. My code works, but
> I suspect it is not elegant. What I'd like to do to change the anchor image
> on each click (and the title), rather than the component replacement I'm
> doing now.  I tried toggling the class of the anchor div to show different
> background images, but I could not get that to work (it feels like it should
> be easy).
>
> Here is what I'm doing now... ('entireContact' is a pre-formatted view of
> all contact fields in a contact list application).
> I'd prefer a solution that does not use a server call, which the #html:
> method requires.
>
> Thanks for any help,
> Bob
>
>
> renderContactToggleOn: html
>
> html div id: 'contactToggle'; with: [
>  self renderContactMoreOn: html].
>
>
> renderContactMoreOn: html
>
> html anchor
>  onClick: (
> html jQuery ajax script: [:s |
> s << (html jQuery id: 'entireContact') toggle: 0.3 seconds.
>  s << (html jQuery id: 'contactToggle') load html: [:r | self
> renderContactLessOn: r]]);
> title: 'Show all contact attributes';
>  with: [html image url: TSwaFileLibrary / #morePng].  " + "
>
>
> renderContactLessOn: html
>
> html anchor
> onClick: (
> html jQuery ajax script: [:s |
>  s << (html jQuery id: 'entireContact') toggle: 0.5 seconds.
> s << (html jQuery id: 'contactToggle') load html: [:r | self
> renderContactMoreOn: r]]);
>  title: 'Hide contact attributes';
> with: [html image url: TSwaFileLibrary / #lessPng].  " - "
>
>
> _______________________________________________ seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
> _______________________________________________
> seaside mailing list
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20110622/e9508117/attachment.htm


More information about the seaside mailing list