Переход по ссылке
при нажатии комбинации клавиш
Ранее в теме Переход на нужную страничку по нажатию определенной клавиши мы рассмотрели пример простого скрипта "горячих кнопок" или "горячих клавиш", который при нажатии на определенную из клавиш клавиатуры осуществлял переход на привязанную к данной клавише страничку.
Теперь же мы хотим Вам представить более универсальный скрипт "горячих клавиш", который позволяет обрабатывать нажатие комбинаций клавиш (например, "Shift" + "A" или "Ctrl" + "Q").
Данный скрипт при нажатии определенной клавиши (в нашем случае это клавиша "Ctrl") добавляет к пунктам меню наименование клавиши, по нажатию на которую произойдет переход по указанной ссылке.
Ниже Вы можете наблюдать пример работы описанного нами скрипта. Для проверки его работоспособности зажмите клавишу "Ctrl", и напротив каждого пункта меню появятся цифры. При нажатии комбинации клавиш "Ctrl" с данными цифрами будет осуществлен переход по ссылкам меню, соответствующим пунктам меню, напротив которых появились эти самые цифры.
| Новости | Скрипты | Сервисы | Хитрости | Поиск |
Для получения точно такого же скрипта "горячих клавиш", осуществляющего переход на нужную страничку сайта по нажатию определенной комбинации клавиш клавиатуры, Вам понадобиться подключить на свой сайт библиотеку jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Теперь Вам необходимо добавить стиль для цифр, которые будут появляться перед пунктами меню, заодно вынесем и стиль самого меню:
<style type="text/css">
.letter:first-letter { font-weight: bold; color: #FF0000; }
#hotkey {
margin: 0 auto;
padding: 3px 0;
border-radius: 5px;
border: 1px solid green;
background-color: #EEEEEE;
}
#hotkey td { width: 120px; text-align: center; }
</style>Далее добавляем меню, к которому необходимо добавить "горячие клавиши":
<table id="hotkey">
<tr>
<td><a href="news.php">Новости</a></td>
<td><a href="script.php">Скрипты</a></td>
<td><a href="useful_site.php">Сервисы</a></td>
<td><a href="trick.php">Хитрости</a></td>
<td><a href="search.php">Поиск</a></td>
</tr>
</table>Теперь нам остается лишь добавить JavaScript код, который будет показывать/скрывать цифры, при нажатии на которые будет осуществляться переход и проверять нажатые клавиши, чтобы при совпадении нужной комбинации осуществить переход по нужной ссылке:
<script type="text/javascript">
$(document).ready(function(){
var keys = [];
var links = [];
$("#hotkey tr td a").each(function(i){
keys[i] = $(this).text();
links[i] = $(this).attr("href");
});
$(document).keydown(function(){
var e = e || window.event;
if (e.ctrlKey && e.keyCode>48 && e.keyCode<=49+keys.length){
window.location.href = links[e.keyCode-49];
}
if (e.ctrlKey) {
$("#hotkey tr td a").each(function(i){
$(this).text(i + 1 + " " + keys[i]); });
$("#hotkey tr td").addClass("letter");
}
});
$(document).keyup(function(){
$("#hotkey tr td").removeClass("letter");
$("#hotkey tr td a").each(function(i){ $(this).text(keys[i]); });
});
});
</script>При использовании данного скрипта стоит учитывать, что в браузерах уже зарезервированы некоторые сочетания "горячих клавиш", так что стоит выбирать такие комбинации, которые не будут совпадать с уже имеющимися. Именно поэтому в нашем скрипте используется сочетание клавиши "Ctrl" и цифр.
А теперь давайте рассмотрим некоторые моменты скрипта, например строчку:
if (e.ctrlKey && e.keyCode>48 && e.keyCode<=49+keys.length)
Где e.ctrlKey - проверка на клавишу "Ctrl", e.keyCode>48 - код клавиши должен быть больше 48 (где 48 это код клавиши "0") и e.keyCode<=49+keys.length код клавиши должен быть меньше или равен коду клавиши "1" плюс количество пунктов меню.
В дополнение хотим отметить, что для данного скрипта нет разницы между английскими и русскими буквами, т.к. скрипт работает с кодами клавиш, а не с символами. Т.е. для данного скрипта разницы между русской буквой "Ф" и английской "A" нет.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.