Hotkeys

@@adsense
Metro UI CSS provides way to bind hotkeys to any control elements.
Menu

To bind hotkey you must add data-hotkey attribute to element with hotkey value. 


                <ul class="v-menu">
                    <li>
                        <a data-hotkey="Ctrl+F1" href="#" onclick="alert('Home clicked')">
                            <span class="mif-home icon"></span> Home
                        </a>
                    </li>
                    <li>
                        <a data-hotkey="Ctrl+F2" href="#" class="dropdown-toggle">
                            <span class="mif-my-location icon"></span> Location
                        </a>
                        <ul class="d-menu" data-role="dropdown">
                            ...
                        </ul>
                    </li>
                </ul>
Buttons example

                <div class="dropdown-button">
                    <button data-hotkey="alt+4" class="button dropdown-toggle">Press Alt+4</button>
                    <ul class="split-content d-menu" data-role="dropdown">
                        <li><a href="#">Reply</a></li>
                        <li><a href="#">Reply All</a></li>
                        <li><a href="#">Forward</a></li>
                    </ul>
                </div>

                <div class="split-button">
                    <button class="button">Press Alt+6</button>
                    <button class="split dropdown-toggle" data-hotkey="alt+6"></button>
                    <ul class="split-content d-menu" data-role="dropdown">
                        <li><a href="#">Reply</a></li>
                        <li><a href="#">Reply All</a></li>
                        <li><a href="#">Forward</a></li>
                    </ul>
                </div>

                <button class="button" data-hotkey="alt+7" onclick="alert('Button clicked')">Press Alt+7</button>

                <button class="shortcut-button" data-hotkey="alt+5" onclick="alert('Shortcut clicked')">
                    <span class="icon mif-rocket"></span>
                    <span class="title">Rocket</span>
                </button>