Using Hotkeys to navigate tabs

Question

How can I navigate between different tabs using shortcut keys implemented using hotkey from the following : https://github.com/jeresig/jquery.hotkeys .

<div class="box-content">
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active"><a href="#info">Info</a></li>
                    <li><a href="#custom">Custom</a></li>
                    <li><a href="#messages">Messages</a></li>
                </ul>

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active" id="info">
                        <h3>Charisma
                            <small>a full featured template</small>
                        </h3>
                        <p>Its a full featured, responsive template for your admin panel. It is optimized for tablets
                            and mobile phones.</p>

                        <p>Check how it looks on different devices:</p>
                        <a href="http://www.responsinator.com/?url=usman.it%2Fthemes%2Fcharisma"
                           target="_blank"><strong>Preview on iPhone size.</strong></a>
                        <br>
                        <a href="http://www.responsinator.com/?url=usman.it%2Fthemes%2Fcharisma"
                           target="_blank"><strong>Preview on iPad size.</strong></a>
                    </div>
                    <div class="tab-pane" id="custom">
                        <h3>Custom
                            <small>small text</small>
                        </h3>
                        <p>Sample paragraph.</p>

                        <p>Your custom text.</p>
                    </div>
                    <div class="tab-pane" id="messages">
                        <h3>Messages
                            <small>small text</small>
                        </h3>
                        <p>Sample paragraph.</p>

                        <p>Your custom text.</p>
                    </div>
                </div>
            </div>

And my hotkeys script implementation is below :

 <script src="<?php echo base_url(); ?>assets/hotkeys/jquery-1.4.2.js"></script>
            <script src="<?php echo base_url(); ?>assets/hotkeys/jquery.hotkeys.js"></script>
            <script>
                var y = jQuery.noConflict();

                y(document).ready(function () {
                    y(document).bind('keydown', 'shift+w', function () {
                        y('#messages')[0].tabs();

                    })
                });

            </script>

How can I implement this so that when I press shift and w (shift+w) , it opens the messages tab ? Using tabs failed.

try this, `y('#messages').tabs('show');` – kamal pal Jun 04 '15 at 08:34 — kamal pal, Jun 04 '15 at 08:34

score 1 · Accepted Answer · answered Jun 04 '15 at 08:39

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

y(document).ready(function () {
  y(document).bind('keydown', 'shift+w', function () {
    activaTab('messages');
  })
});

Could you please try this, I haven't tried yet, but code looks well!

Using Hotkeys to navigate tabs

1 Answers1