Results 1 to 3 of 3

Thread: [JQuery] TabControl

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [JQuery] TabControl

    This is my attempt at mimicking the TabControl found in C# or VB.NET. It uses HTML5's header and section tags to hold the TabHeaders and TabPages respectively. It also uses CSS's flex box to manage the layout of the control. And finally it uses JQuery's hide() and fadeIn() to toggle the TabPage being shown along with adjusting a few visual elements of the TabHeader(not really necessary but prettier).

    HTML:
    Code:
    <div class="tabControl">
      <header class="tabHeaders">
        <a class="tabHeader" href="#">Tab1</a>
        <a class="tabHeader" href="#">Tab2</a>
        <!-- TODO: Be sure that the number of <section class="tabPage"> equals the number <h1 class="tabHeader"> -->
        <div class="tabHeaderFiller" href="#"></div> <!-- this is used to provide a border to the end of the header. This is completely optional delete if you don't care for the behavior -->
      </header>
      <section class="tabPage">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus tincidunt finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin dui velit, fermentum eu risus id, suscipit fermentum erat. Sed suscipit in turpis nec pellentesque. Proin augue magna, elementum eget nunc non, facilisis auctor mi. Suspendisse accumsan nisi nec velit interdum, nec tempor ipsum varius. Praesent eget feugiat est, id fermentum leo. Pellentesque nisl enim, interdum maximus congue a, sollicitudin sed ex.</p>
        <p>Phasellus vel est sit amet ex euismod dictum vitae vel nibh. Maecenas dignissim porttitor ipsum in interdum. Integer tempus, risus at finibus varius, est mauris vehicula massa, sit amet ultricies lorem felis posuere diam. Sed sed dui dui. Aenean eu est semper, sollicitudin ex non, pellentesque turpis. In non gravida quam, eu pulvinar leo. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vitae convallis est.</p>
        <p>Vivamus nulla nisl, facilisis non massa ac, egestas faucibus arcu. Morbi et magna mi. Aenean non semper nibh. Nunc odio diam, elementum nec est vitae, mattis luctus augue. Praesent leo lectus, elementum ac mattis et, vestibulum ut ligula. Fusce auctor mi sit amet semper placerat. Morbi id urna orci. Sed id tellus in ante tincidunt maximus. Nam in felis nec ante luctus mattis. Phasellus tristique vulputate semper. Suspendisse ac libero maximus, convallis mauris in, sollicitudin felis. Phasellus commodo interdum pretium. Sed non tincidunt ipsum. Proin at tortor ut libero porta molestie eget eu nisl. Proin posuere dui mauris, quis semper elit ultrices eu. Ut venenatis facilisis sagittis.</p>
      </section>
      <section class="tabPage">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nisi sem, ullamcorper vel ex et, tristique pretium risus. Vestibulum posuere, turpis a ornare pellentesque, metus risus dignissim erat, vitae vestibulum nunc purus a ligula. Quisque nisi lorem, suscipit ac interdum non, dictum iaculis dui. Vivamus ut viverra erat. Pellentesque sodales cursus sem eu semper. Mauris sit amet orci in sem suscipit semper a ac turpis. Morbi nec risus a ipsum commodo semper at ut nisl. Donec mattis volutpat laoreet. Nullam a rutrum ex. Pellentesque gravida, ipsum ut condimentum efficitur, leo tellus eleifend metus, a bibendum justo neque eu mi. Donec ac nulla commodo, fringilla lectus quis, auctor enim. Nulla ac dolor mi. Phasellus dignissim, ligula vitae scelerisque viverra, elit nunc rutrum dui, eu interdum dui elit ut ipsum.</p>
      <p>Vestibulum mi arcu, fringilla iaculis ullamcorper vel, bibendum eget justo. Nullam in diam sed lectus maximus elementum. Cras interdum elementum nisi et tempus. Morbi euismod sem purus, commodo consectetur nibh pulvinar at. Nam finibus, felis sit amet ornare laoreet, eros urna consectetur purus, vitae feugiat massa lectus at arcu. Cras sagittis, ligula eget vestibulum ultrices, sem quam tempus ipsum, a bibendum lacus lectus et neque. Phasellus ornare a turpis mollis scelerisque. In ultrices suscipit ante vitae ullamcorper. Curabitur vitae accumsan sapien. Praesent ut augue tincidunt, convallis neque a, viverra diam. Morbi id egestas mauris. Vivamus porttitor, tellus non posuere ultrices, nisl risus feugiat felis, eget euismod turpis dui id diam.</p>
      <p>Curabitur tempus nisi vitae orci consequat viverra non ut ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque a tortor id magna consectetur congue sit amet vel arcu. Maecenas mattis, ante non maximus pretium, risus leo ultrices ante, vitae finibus ex lectus ac libero. Mauris interdum lectus id neque scelerisque egestas. Quisque quis turpis volutpat, aliquam sapien eu, euismod elit. Donec vitae risus dignissim, faucibus nisi id, tempor leo. Maecenas non neque sit amet quam pulvinar condimentum vel quis orci. Aenean placerat quam non tellus consectetur venenatis. Fusce odio ipsum, pretium ac venenatis ac, dapibus et ligula. Vestibulum sed lacus vitae massa convallis accumsan. Fusce commodo, libero a rutrum vulputate, risus est varius urna, id tincidunt diam urna id tortor. Praesent non nulla accumsan, posuere diam non, ultricies leo.</p>
      </section>  
    </div>
    CSS:
    Code:
    .tabControl {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
    }
    
    .tabHeaders {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      
    }
    
    .tabPage {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 100%;
      -ms-flex: 0 1 100%;
      flex: 0 1 100%;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      border-bottom: 1px solid #666;
      border-right: 1px solid #666;
      border-left: 1px solid #666;
    }
    
    .tabHeader {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      background-color: #989e9e;
      border: 1px solid #666;
      color: #fff;
      padding: .5em 1em;
      text-decoration: none;
    }
    
    .tabHeaderFiller {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
      flex: 1 1 100%;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
    
      border-bottom: 1px solid #666;
    }
    JQuery
    Code:
    (function($) {
      $(function() {
      	//hide all tabPages but the first tabPage
        $('.tabPage').slice(1).hide();
        
        //do not show the bottom border, change the BG color, and change the forecolor of the first tabHeader
        $('.tabHeader').first().css('border-bottom-width', '0').css('background-color', 'inherit').css('color', '#000');
        
        $('.tabHeader').on("click", function(e) {
        	//prevent the natural behavior an anchor
        	e.preventDefault();
          
          //get the index that was clicked
        	var tabIndex = $(this).index();
          
          //hide all tabTages but the one who's index equals the clicked tabHeader's index
          $('.tabPage').hide().eq(tabIndex).fadeIn();
          
          //show the bottom on all tabHeaders and change the BG color of all tabHeaders
          $('.tabHeader').css('border-bottom-width', '1px').css('background-color', '#989e9e');
          //do not show the bottom border, change the BG color, and change the forecolor of the tabHeader clicked
          $(this).css('border-bottom-width', '0').css('background-color', 'inherit').css('color', '#000');
        });
      });
    })(jQuery);
    Fiddle: https://jsfiddle.net/Lyj0sjs8/
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Member
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    57

    Re: [JQuery] TabControl

    Hello,@dday9
    Please try this code, To TabControl.

    Code:
    <div id="tabs">
    <ul>
    		<li><a href="#tabs-1">J-Query Tab-1</a></li>
    		<li><a href="#tabs-2">J-Query Tab-2</a></li>
    		<li><a href="#tabs-3">J-Query Tab-3</a></li>
    	</ul>
    	<div id="tabs-1">
    		<p>TAB1 CONTENT</p>
    	</div>
    	<div id="tabs-2">
    		<p>TAB2 CONTENT</p>
    	</div>
    	<div id="tabs-3">
    		<p>TAB3 CONTENT</p>
    		<p>TAB3 CONTENT</p>
    	</div>
    </div>
    Code:
    $("#tabs").tabs();
    I hope this code will be useful to you.
    Thank you.
    < advertising removed by moderator >

  3. #3

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    Re: [JQuery] TabControl

    To clarify, this was a codebank submission and not a request for code. Also, it may be useful to reference the library you're using as it looks like your code is dependent on the jQuery UI library (here)
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width