SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move in to next tab using Tab key

    I am following this tutorial: http://www.jacklmoore.com/notes/jquery-tabs/

    In which i created text boxes in tab 1,2,3. i want to create a function when user in first tab after pressing the tab key it will move in to next tab. How i can do this. I am using asp.net text boxes and drop down list in tabs. I was give tab index to inputs but it was not working. I want to do this using jquery.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset='utf-8'/>
    		<title>jQuery Tabs Demo</title>
    		<style>
    			* {padding:0; margin:0;}
    
    			html {
    				background:url(/img/tiles/wood.png) 0 0 repeat;
    				padding:15px 15px 0;
    				font-family:sans-serif;
    				font-size:14px;
    			}
    
    			p, h3 { 
    				margin-bottom:15px;
    			}
    
    			div {
    				padding:10px;
    				width:600px;
    				background:#fff;
    			}
    
    			.tabs li {
    				list-style:none;
    				display:inline;
    			}
    
    			.tabs a {
    				padding:5px 10px;
    				display:inline-block;
    				background:#666;
    				color:#fff;
    				text-decoration:none;
    			}
    
    			.tabs a.active {
    				background:#fff;
    				color:#000;
    			}
    
    		</style>
    		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    		<script>
    			// Wait until the DOM has loaded before querying the document
    			$(document).ready(function(){
    				$('ul.tabs').each(function(){
    					// For each set of tabs, we want to keep track of
    					// which tab is active and it's associated content
    					var $active, $content, $links = $(this).find('a');
    
    					// If the location.hash matches one of the links, use that as the active tab.
    					// If no match is found, use the first link as the initial active tab.
    					$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    					$active.addClass('active');
    					$content = $($active.attr('href'));
    
    					// Hide the remaining content
    					$links.not($active).each(function () {
    						$($(this).attr('href')).hide();
    					});
    
    					// Bind the click event handler
    					$(this).on('click', 'a', function(e){
    						// Make the old tab inactive.
    						$active.removeClass('active');
    						$content.hide();
    
    						// Update the variables with the new link and content
    						$active = $(this);
    						$content = $($(this).attr('href'));
    
    						// Make the tab active.
    						$active.addClass('active');
    						$content.show();
    
    						// Prevent the anchor's default click action
    						e.preventDefault();
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul class='tabs'>
    			<li><a href='#tab1'>Tab 1</a></li>
    			<li><a href='#tab2'>Tab 2</a></li>
    			<li><a href='#tab3'>Tab 3</a></li>
    		</ul>
    		<div id='tab1'>
    			<h3>Section 1</h3>
    			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
    		</div>
    		<div id='tab2'>
    			<h3>Section 2</h3>
    			<p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>
    		</div>
    		<div id='tab3'>
    			<h3>Section 3</h3>
    			<p>Suspendisse potenti. Morbi laoreet magna vitae est mollis ultricies. Mauris eget enim ac justo eleifend malesuada. Proin non consectetur est. Integer semper laoreet porta. Praesent facilisis leo nec libero tincidunt blandit.</p>
    		</div>
    	</body>
    </html>
    Last edited by TechnoBear; Jan 3, 2014 at 08:23. Reason: Code tags added

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,169
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Hi user100kk, welcome to the forums,

    Have you tried tabindex?
    Overview

    Web applications often use JavaScript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels. These widgets are typically composed of <div> and <span> elements that do not, by nature, offer the same keyboard functionality that their desktop counterparts do. This document describes techniques to make JavaScript widgets accessible with the keyboard.
    *from https://developer.mozilla.org/en-US/...Script_widgets

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Change this:

    Code:
    $(this).on('click', 'a', function(e){ ... });
    to this

    Code:
    $(this).on('click focus', 'a', function(e){ ... });
    Does that work for you?

  4. #4
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to move into next tab using Tab key of keyboard

    I want to create functionality when user use tab key for moving in to next tab. Every tab contains some text boxes. When user in last text box of tab 1 when it press the tab key, it will go into next text box of tab2. I am creating tab using plain HTML css and jQuery. I am not using tab functionality of jQuery UI but it is latest jquery. The below is my HTML. I am creating tab using ul and li. How I move into next li when my tab in first text box. The tabs contains like dropdown,checkboxes,texboxes. Note : i am not using tabindex due to some issue. i want to create using jquery)

    html

    HTML Code:
    <ul class='tabs'>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
            <li><a href='#tab3'>Tab 3</a></li>
          </ul>
          <div id='tab1'>
            <ul class= "set2"> 
                <li>  test 1<asp:TextBox runat="server"  ID="test1" /></li>
                <li>  test 2<asp:TextBox runat="server"  ID="test2" /></li>
            </ul>
          </div>
          <div id='tab3'>
            <ul class= "set2"> 
                <li>  test 3<asp:TextBox runat="server"  ID="test3" /></li>
                <li>  test 4<asp:TextBox runat="server"  ID="test4" /></li>
            </ul>
          </div>
          <div id='tab3'>
            <ul class= "set"> 
                <li>  test 5<asp:TextBox runat="server"  ID="test5" /></li>
                <li>  test 6<asp:TextBox runat="server"  ID="test6" /></li>
            </ul>
          </div>
    script

    Code JavaScript:
    $(document).on('keypress',function(e) {
     var keyCode = e.keyCode || e.which; 
     if (keyCode == 9) {       //if the key pressed was 'tab'...
        e.preventDefault(); 
        //how to focus on the next tab, 
        //remember to select the very first tab when you reach the last tab!
      } 
    });

    CSS

    Code CSS:
    * {padding:0; margin:0;}
     
        html {
            background:url(/img/tiles/wood.png) 0 0 repeat;
            padding:15px 15px 0;
            font-family:sans-serif;
            font-size:14px;
        }
     
        p, h3 { 
            margin-bottom:15px;
        }
     
        div {
            padding:10px;
            width:600px;
            background:#fff;
        }
     
        .tabs li {
            list-style:none;
            display:inline;
        }
     
        .tabs a {
            padding:5px 10px;
            display:inline-block;
            background:#666;
            color:#fff;
            text-decoration:none;
        }
     
        .tabs a.active {
            background:#fff;
           color:#000;
        }
    Last edited by cpradio; Jan 7, 2014 at 08:32. Reason: Added bb tags


Tags for this Thread

Bookmarks

Posting Permissions

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