4 Replies Latest reply: Sep 21, 2011 11:15 PM by wallflowerr83 RSS

    Assign a value for each Spry Tabbed Panel

    wallflowerr83

      I have a page with spry tabbed panels grouped by the year and inside each panel are news articles for that year. When the user clicks to an article, there is a back button which links back to the previous page with the year tabs, with the relevant tab opened using http://foundationphp.com/tutorials/spry_url_utils.php However, is it possible for each tab to be assigned a value (tab=2011) as the tab=0 method would cause issues for future maintenance when there are additional articles from different years.

       

      Thanks in advance.

        • 1. Re: Assign a value for each Spry Tabbed Panel
          MyDreamweaverExtensions Community Member

          Hard to tell without seeing any code, but have you tried giving an ID to your panels like 'y2011' and opening them with the ID instead of their index? (See http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html)

          • 2. Re: Assign a value for each Spry Tabbed Panel
            wallflowerr83 Community Member

            Hi, below are the snippets of my codes as it's for an Intranet site.

             

            Index page with articles grouped in tab panels by year

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">

            <script src="../../SpryAssets/SpryURLUtils.js" type="text/javascript"></script>

            <script type="text/javascript">

            var params = Spry.Utils.getLocationParamsAsObject();

            </head>

            <body>

              <div id="TabbedPanels1" class="TabbedPanels">

                <ul class="TabbedPanelsTabGroup">

                <li class="TabbedPanelsTab" tabindex="0">2011</li>

                <li class="TabbedPanelsTab" tabindex="0">2010</li>

                <li class="TabbedPanelsTab" tabindex="0">2009</li>

              </ul>

              <div class="TabbedPanelsContentGroup">

                <div class="TabbedPanelsContent">

                 2011 articles here

                </div>

               

                <div class="TabbedPanelsContent">

                 2010 articles here

                </div>

               

                <div class="TabbedPanelsContent">

                 2009 articles here

                </div>

               

              </div>

            </div>

             

            <script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

            <script type="text/javascript">

            var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});

            </script>

             

            </body>

            </html>

             

            Detailed article page for 2010 article

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head></head>

             

            <body>

            <a href="index.asp?tab=1">< Back</a>

             

            [Article contents]

            </body>

            </html>

             

            So instead of the tab=1, is it possible to assign the year (<a href="index.asp?tab=2010">) so that when the user clicks on the Back link, the relevant tabbed panel gets open. I am guessing that I have to amend the SpryURLUtils.js, but I am unsure which part to amend.

            • 3. Re: Assign a value for each Spry Tabbed Panel
              Phil_W Community Member

              Why don't you do this?

               

              Leave the tab index alone.

               

              Pass the year in the url i.e. ?tab=2010

               

              Via URL utils get the value of the year

               

              var params = Spry.Utils.getLocationParamsAsObject();

               

              // Convert year to relevant tab index using earliest year as base.

              if (params.tab)

              {var tabindex = params.tab - 2010;}

               

              var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: tabindex ? tabindex : 0});

              • 4. Re: Assign a value for each Spry Tabbed Panel
                wallflowerr83 Community Member

                Thanks Phil! Your solution works great!!!

                 

                Below is the solution if anybody needs it.

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">

                <script src="../../SpryAssets/SpryURLUtils.js" type="text/javascript"></script>

                <script type="text/javascript">

                var params = Spry.Utils.getLocationParamsAsObject();

                if (params.tab){

                    var currentTime = new Date()

                    var year = currentTime.getFullYear()

                    var tabindex = year - params.tab;

                }

                </head>

                <body>

                  <div id="TabbedPanels1" class="TabbedPanels">

                    <ul class="TabbedPanelsTabGroup">

                    <li class="TabbedPanelsTab" tabindex="0">2011</li>

                    <li class="TabbedPanelsTab" tabindex="0">2010</li>

                    <li class="TabbedPanelsTab" tabindex="0">2009</li>

                  </ul>

                  <div class="TabbedPanelsContentGroup">

                    <div class="TabbedPanelsContent">

                     2011 articles here

                    </div>

                   

                    <div class="TabbedPanelsContent">

                     2010 articles here

                    </div>

                   

                    <div class="TabbedPanelsContent">

                     2009 articles here

                    </div>

                   

                  </div>

                </div>

                 

                <script src="../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>

                <script type="text/javascript">

                var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: tabindex ? tabindex : 0});

                </script>

                 

                </body>

                </html>

                 

                Detailed article page for 2010 article

                 

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head></head>

                 

                <body>

                <a href="index.asp?tab=2010">< Back</a>

                 

                [Article contents]

                </body>

                </html>