Code to add tabs on an extra phpbb page

[BlueCollar Mark]

I'm gonna bump this. Anyone know how to make tabs inside a set of tabs?

[ Post made via iPhone]

[Crocodile]

Having found this thread I have been trying to use the codes for my own purposes. Unfortunately there are not enough tabs in your example. I have tried adding to the vars panel and the <li class="" and have copied and altered one of the blocks to suit. The trouble is that when I do that the tabs no longer operate, so I am obviously missing something.

Enough knocking my head against a wall! It's time to ask what I might be missing.

Thanks for your help.

[carol[16] Sarah D]

I think this code can be helpful for you! try to tweak for more modification! just play around with this code and you'll get what you want!

Code: Select all

public class HelloTabWidget extends TabActivity {

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost();  // The activity TabHost
TabHost.TabSpec spec;  // Resusable TabSpec for each tab
Intent intent;  // Reusable Intent for each tab

// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, ArtistsActivity.class);

// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                  res.getDrawable(R.drawable.ic_tab_artists))
              .setContent(intent);
tabHost.addTab(spec);

// Do the same for the other tabs
intent = new Intent().setClass(this, AlbumsActivity.class);
spec = tabHost.newTabSpec("albums").setIndicator("Albums",
                  res.getDrawable(R.drawable.ic_tab_albums))
              .setContent(intent);
tabHost.addTab(spec);

intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("songs").setIndicator("Songs",
                  res.getDrawable(R.drawable.ic_tab_songs))
              .setContent(intent);
tabHost.addTab(spec);

tabHost.setCurrentTab(2);
}

[Sniper_E]

I'll have some time later to look into this again and hopefully get this resolved. Sorry I bailed on you bluecollar, I forgot all about this.

[ Post made via HTC Inspire]

[Crocodile]

Having found this thread I have been trying to use the codes for my own purposes. Unfortunately there are not enough tabs in your example. I have tried adding to the vars panel and the <li class="" and have copied and altered one of the blocks to suit. The trouble is that when I do that the tabs no longer operate, so I am obviously missing something.

Enough knocking my head against a wall! It's time to ask what I might be missing.

Thanks for your help.

I got this worked out, sorry to have bothered you about it.

Now, how can I add a list of links on the left side of the page similar to the UCP in Prosilver? I have taken some of the codes from ucp.php and added some stuff to the _body.html but so far keep getting errors or nothing at all.

[Crocodile]

I have managed to create a page with the tabs at the top, just like the UCP page. Now I want to use the same tabs down the side as in the UCP to link to content in the area to the right of these tabs. I plan to list categories along the top and sub categories down the side.

Can someone give me a clue where to begin?

Thanks in advance.

[Sniper_E]

@ Bluecollar... I've been playing with getting tabs inside the selected tabed section. I think it can be done, getting close to making that happen. I'll get back with you on the results.

@ Crocodile... I'll work up those side menus like in the ucp next.

[ Post made via HTC Inspire]

[Crocodile]

I have played with it for sometime and am now at the point where my wife is beating me around the head and shoulders with a rolled up newspaper. "You spend more time on that than you do with me!" So I have to give it a break for a while ... the codes are fun but they don't make a very good breakfast.

[Sniper_E]

Yea, the layout is easy but making the sub category links work is another thing.

I failed at making the second set of tabs in the page. But I think your layout would be better.
This is just the layout: http://sniper.hostei.com/phpBB3/trophycase.php

Each tab works but I think we are going to need some variables set for the sub-links to work.
Nothing validates and the sub-links don't work. I still have to figure the linking part out.

Go give you wife some attention... I got this. NOT

[Sniper_E]

OK, I have the trophycase_body.html template modified to work... except for the active-subsection highlighted part and the validation. Check it out on the above post link.

Getting closer, here is what I have so far:

Code: Select all

<!-- INCLUDE overall_header.html -->

         <h2>{PAGE_TITLE}</h2>
         
      <!-- tabs array & show hide script-->
         <script type="text/javascript">
         <!--
            var panels = new Array('nfl-panel', 'nhl-panel', 'mlb-panel', 'nba-panel');
            function HideContent(d) { document.getElementById(d).style.display = "none"; }
            function ShowContent(d) { document.getElementById(d).style.display = "block"; }
         //-->
         </script>
         
      <!-- tabs -->
         <div id="tabs">
            <ul>
               <li class="activetab" id="nfl-panel-tab"><a name="nfl" href="#nfl" onclick="subPanels('nfl-panel'); return false;"><span>NFL</span></a></li>
               <li class="" id="nhl-panel-tab"><a name="nhl" href="#nhl" onclick="subPanels('nhl-panel'); return false;"><span>NHL</span></a></li>
               <li class="" id="mlb-panel-tab"><a name="mlb" href="#mlb" onclick="subPanels('mlb-panel'); return false;"><span>MLB</span></a></li>
               <li class="" id="nba-panel-tab"><a name="nba" href="#nba" onclick="subPanels('nba-panel'); return false;"><span>NBA</span></a></li>
            </ul>
         </div>
         
      <!-- open panel under tabs -->
         <div class="panel bg3" style="margin: auto;">
            <div class="inner" style="text-align: left;"><span class="corners-top"><span></span></span>
         
         <!-- default/first tab content -->
            <div style="display: block;" id="nfl-panel">
               <div id="cp-menu">
                  <div id="navigation">
                     <ul>
                        <li id="active-subsection"><a href="javascript:ShowContent('nfl1');javascript:HideContent('nfl2');javascript:HideContent('nfl3')"><span>NFL One</span></a></li>
                        <li><a href="javascript:ShowContent('nfl2');javascript:HideContent('nfl1');javascript:HideContent('nfl3')"><span>NFL Two</span></a></li>
                        <li><a href="javascript:ShowContent('nfl3');javascript:HideContent('nfl1');javascript:HideContent('nfl2')"><span>NFL Three</span></a></li>
                     </ul>
                  </div>
               </div>
         
               <div id="cp-main" class="ucp-main">
                  <h2>National Football Leauge</h2>

                  <div style="display:block;" class="panel bg3" id="nfl1">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NFL-ONE</h3>
                        <b>Everything from your trophycase_nfl1.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display:none;" class="panel bg3" id="nfl2">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NFL-TWO</h3>
                        <b>Everything from your trophycase_nfl2.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display:none;" class="panel bg3" id="nfl3">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NFL-THREE</h3>
                        <b>Everything from your trophycase_nfl3.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

               </div>
            </div>
         
         <!-- hidden/second tab content -->
            <div style="display: none;" id="nhl-panel">
               <div id="cp-menu">
                  <div id="navigation">
                     <ul>
                        <li id="active-subsection"><a href="javascript:ShowContent('nhl1');javascript:HideContent('nhl2');javascript:HideContent('nhl3')"><span>NHL One</span></a></li>
                        <li><a href="javascript:ShowContent('nhl2');javascript:HideContent('nhl1');javascript:HideContent('nhl3')"><span>NHL Two</span></a></li>
                        <li><a href="javascript:ShowContent('nhl3');javascript:HideContent('nhl1');javascript:HideContent('nhl2')"><span>NHL Three</span></a></li>
                     </ul>
                  </div>
               </div>
         
               <div id="cp-main" class="ucp-main">
                  <h2>National Hockey Leauge</h2>

                  <div style="display: block;" class="panel bg3" id="nhl1">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NHL-ONE</h3>
                        <b>Everything from your trophycase_nhl1.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="nhl2">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NHL-TWO</h3>
                        <b>Everything from your trophycase_nhl2.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="nhl3">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NHL-THREE</h3>
                        <b>Everything from your trophycase_nhl3.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

               </div>
            </div>
         
         <!-- hidden/third tab content -->
            <div style="display: none;" id="mlb-panel">
               <div id="cp-menu">
                  <div id="navigation">
                     <ul>
                        <li id="active-subsection"><a href="javascript:ShowContent('mlb1');javascript:HideContent('mlb2');javascript:HideContent('mlb3')"><span>MLB One</span></a></li>
                        <li><a href="javascript:ShowContent('mlb2');javascript:HideContent('mlb1');javascript:HideContent('mlb3')"><span>MLB Two</span></a></li>
                        <li><a href="javascript:ShowContent('mlb3');javascript:HideContent('mlb1');javascript:HideContent('mlb2')"><span>MLB Three</span></a></li>
                     </ul>
                  </div>
               </div>
         
               <div id="cp-main" class="ucp-main">
                  <h2>Major League Baseball</h2>

                  <div style="display: block;" class="panel bg3" id="mlb1">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>MLB-ONE</h3>
                        <b>Everything from your trophycase_mlb1.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="mlb2">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>MLB-TWO</h3>
                        <b>Everything from your trophycase_mlb2.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="mlb3">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>MLB-THREE</h3>
                        <b>Everything from your trophycase_mlb3.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

               </div>
            </div>
         
         <!-- hidden/fourth tab content -->
            <div style="display: none;" id="nba-panel">
               <div id="cp-menu">
                  <div id="navigation">
                     <ul>
                        <li id="active-subsection"><a href="javascript:ShowContent('nba1');javascript:HideContent('nba2');javascript:HideContent('nba3')"><span>NBA One</span></a></li>
                        <li><a href="javascript:ShowContent('nba2');javascript:HideContent('nba1');javascript:HideContent('nba3')"><span>NBA Two</span></a></li>
                        <li><a href="javascript:ShowContent('nba3');javascript:HideContent('nba1');javascript:HideContent('nba2')"><span>NBA Three</span></a></li>
                     </ul>
                  </div>
               </div>
         
               <div id="cp-main" class="ucp-main">
                  <h2>National Basketball Association</h2>

                  <div style="display: block;" class="panel bg3" id="nba1">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NBA-ONE</h3>
                        <b>Everything from your trophycase_nba1.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="nba2">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NBA-TWO</h3>
                        <b>Everything from your trophycase_nba2.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

                  <div style="display: none;" class="panel bg3" id="nba3">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <h3>NBA-THREE</h3>
                        <b>Everything from your trophycase_nba3.html template goes in here.</b>
                        <img src="./images/spacer.gif" alt="" width="100%" height="50px" />
                     <span class="corners-bottom"><span></span></span></div>
                  </div>

               </div>
            </div>
         
      <!-- close panel -->
            <span class="corners-bottom"><span></span></span></div>
         </div>
         
         <br />
         
<!-- INCLUDE overall_footer.html -->