8 Replies Latest reply: Jun 13, 2006 8:51 AM by kinblas RSS

    Spry Tabs

    heathrowe CommunityMVP
    heathrowe Jun 6, 2006 9:32 AM
      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.
      • 861 Views
      • Tags:
        • 1. Re: Spry Tabs
          kinblas Community Member
          kinblas Jun 6, 2006 5:25 PM (in response to heathrowe)
          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 ==--
          • 2. Re: Spry Tabs
            kinblas Community Member
            kinblas Jun 6, 2006 5:26 PM (in response to heathrowe)
            By the way ... nice tabs!!!

            --== Kin ==--
            • 3. Re: Spry Tabs
              heathrowe CommunityMVP
              heathrowe Jun 6, 2006 8:16 PM (in response to kinblas)
              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.
              • 4. Re: Spry Tabs
                kinblas Community Member
                kinblas Jun 6, 2006 9:43 PM (in response to heathrowe)
                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 ==--
                • 5. Re: Spry Tabs
                  heathrowe CommunityMVP
                  heathrowe Jun 7, 2006 6:14 AM (in response to kinblas)
                  thanks kin for the help.
                  h
                  • 6. Re: Spry Tabs
                    kinblas Community Member
                    kinblas Jun 10, 2006 12:51 AM (in response to heathrowe)
                    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 ==--
                    • 7. Re: Spry Tabs
                      heathrowe CommunityMVP
                      heathrowe Jun 10, 2006 7:08 AM (in response to kinblas)
                      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

                      • 8. Re: Spry Tabs
                        kinblas Community Member
                        kinblas Jun 13, 2006 8:51 AM (in response to heathrowe)
                        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 ==--