snapshot
/
UIExamplesS40


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!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>
    <title>Tab Control</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/base_s40.css" type="text/css"/>
    <meta name="Generator" content="Nokia WDE 3.2.0" />
  </head>
  <body>
    <!-- Header Bar with Search Functionallity -->
    <div class="header_background" >
       <table class="header_table" cellpadding="0" cellspacing="0" summary="Header Background">
        <tr>
          <td>
            <div class="header_transition_window">
              <div id="container" class="strip show_app_name">
                <table cellpadding="0" cellspacing="0" summary="Header Transition">
                  <tr>
                    <td class="app_name" style="width: 171px;"> <!--Use class app_logo on td <div><img src="Logo.png" height="24"/></div>--><div>Tab Control</div></td>
                    <td class="header_search_box_td" style="width: 171px;"><input type="text" class="header_search_box"/><td/>
                  </tr>
                </table>
              </div>
            </div>
          </td>
          <td class="header_search">
            <img id="show_search" src="img/header_search.png" onclick="mwl.toggleClass('#container', 'show_app_name');mwl.toggleClass('#container', 'show_search_box');" href="#" alt="Show Search"/>
          </td>
        </tr>
      </table>
    </div>
    
    <!-- START TAB SNIPPET -->
    <!-- Tab Control -->
    <table cellpadding="0" cellspacing="0" class="tab_table" summary="Tab Table">
      <tr>
        <td id="tab_1" class="tab tab_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_1_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_not_selected', 'tab_selected');mwl.switchClass('#tab_2', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_3', 'tab_selected', 'tab_not_selected');">Tab 1</td>
        <td id="tab_2" class="tab tab_not_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_2_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_2', 'tab_not_selected', 'tab_selected');mwl.switchClass('#tab_3', 'tab_selected', 'tab_not_selected');">Tab 2</td>
        <td id="tab_3" class="tab tab_not_selected" onclick="mwl.setGroupTarget('#tab_control_content', '#tab_3_content', 'show', 'hide');mwl.switchClass('#tab_1', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_2', 'tab_selected', 'tab_not_selected');mwl.switchClass('#tab_3', 'tab_not_selected', 'tab_selected');">Tab 3</td>
      </tr>
    </table>
    <!-- End Tab Control -->
    
    <!-- Tab Control Content -->
    <div id="tab_control_content">
      <div id="tab_1_content" class="show">
        Tab 1 Content
      </div>
      <div id="tab_2_content" class="hide">
        Tab 2 Content
      </div>
      <div id="tab_3_content" class="hide">
        Tab 3 Content
      </div>
    </div>
    <!-- End Tab Control Content -->
    <!-- END TAB SNIPPET -->
  </body>
</html>