Adobe Community: Message List - Spry Tabs

Re: Spry Tabs

forums_noreply@adobe.com — Tue, 13 Jun 2006 15:51:28 GMT

Hey heathrowe,

Just in case you were interested and didn't want to wait for the next drop of Spry, I posted the spry:selected code in this post.

--== Kin ==--

Re: Spry Tabs

forums_noreply@adobe.com — Sat, 10 Jun 2006 14:08:01 GMT

Thanks for the heads up.

I attemped to adjust the Spry library but failed, so I left it as is.

I realize it's not a big deal, and data mining is the crux of the Spry library, but as a designer (and developer) it's good to have a substitute for some css equivelents. And hopefully, designer elements can be summerized into widget components down the road.

h

Re: Spry Tabs

forums_noreply@adobe.com — Sat, 10 Jun 2006 07:51:33 GMT

FYI, I implemented a new attribute spry:selected which you can use in conjunction with spry:select to indicate that you want that element to appear selected.

It will appear in the next drop.

--== Kin ==--

Re: Spry Tabs

forums_noreply@adobe.com — Wed, 07 Jun 2006 13:14:46 GMT

thanks kin for the help.
h

Re: Spry Tabs

forums_noreply@adobe.com — Wed, 07 Jun 2006 04:43:46 GMT

Sigh ... I forgot about that. :-)

Looks like we need an attribute that allows you to say that this element is currently selected.

I'll put that on the list of things to do.

At the moment, the only way to sync things is to write a little bit of JS that is triggered on the onDataChange of your dsStories. It needs to be easier than that for folks that can't program.

--== Kin ==--

Re: Spry Tabs

forums_noreply@adobe.com — Wed, 07 Jun 2006 03:16:29 GMT

Thanks Kin for the help.

The spryif conditional worked.
Though it poses a new issue - if you don't click tab 1 and jump straight to tab 2 or tab 3, tab 1 spryselected sticks.
But if you click tab 1, then to any other tab it's fine.

My brain thinks .asp if..then..else logic, thats why I want to tackle the conditional issues now before it overwhelmes me.

Thanks for pointing out the two image issues.

Re: Spry Tabs

forums_noreply@adobe.com — Wed, 07 Jun 2006 00:26:27 GMT

By the way ... nice tabs!!!

--== Kin ==--

Re: Spry Tabs

forums_noreply@adobe.com — Wed, 07 Jun 2006 00:25:48 GMT

Was this what you had in mind for your tabs?

<ul spryregion="dsStories" spryrepeatchildren="dsStories" >
<li spryif="{ds_RowNumber} == 0" class="tabselected" onclick="dsStories.setCurrentRow('{ds_RowID}');" spryhover="tabhover" spryselect="tabselected" >{name}</li>
<li spryif="{ds_RowNumber} != 0" onclick="dsStories.setCurrentRow('{ds_RowID}');" spryhover="tabhover" spryselect="tabselected" >{name}</li>

</ul>

You can hide the image like this:

<div spryif="'{image}' != ''"><img src="{image}" alt="" width="100" hspace="5" border="0" align="left" class="img" /></div>

By the way, you know you can put the spryif directly on the img. That is, you don't really need the div around it, unless that was intentional for styling.

One other warning. Your XML uses "image" as the name of a tag. Safari has a bug in it where it translates "image" tag names to "img" automatically, so your page won't work in Safari cause Spry won't be able to find "image".

--== Kin ==--

Spry Tabs

forums_noreply@adobe.com — Tue, 06 Jun 2006 16:32:24 GMT

Fake tabs that is.

View example here.

Just experimenting with conditionals, and faking a tab structure using css list positioning.

I do have a few questions:
Question 1
I know spry has a hover and selected property. Is there an equivalent to a active, similar to what you can create in css.
Basically I want Tab 1 to have the same color as the mouseover when you first enter the page.

Question 2
Can someone confirm if my spryif conditional is correct.
I am using spryif="{ds_RowID} != ''" conditional to determine if the image node in my xml file is empty. If empty, don't show anything(as in the case of tab 1), else show iamge(as in the case of tab 2 and 3). It is working, but by mere fluke.

Look forward to more experimenting.