Како додати пречице на тастатури на вашу веб страницу

Волите пречице на тастатури? Могу вам помоћи да уштедите много времена, зар не? Да ли желите да додате пречице на тастатури на сопствени веб сајт, у корист ваших посетилаца? То би значајно побољшало доступност и навигацију вашег сајта.

У овом посту ћу вам дати кратки водич о томе како додати пречице на вашу веб страницу помоћу ЈаваСцрипт библиотеке под називом Мишоловка. Са мишоловком можете одредите кључеве као Схифт, Цтрл, Алт, Оптионс и Цомманд то извршавати одређене функције на вашем веб сајту. Такође ради добро у старијим прегледачима.

Више о Хонгкиату:

• Креирање анимираних тоолтип лако са Хинт.Цсс
• Израда водича корак по корак помоћу Интро.Јс [Туториал]
• Како обликовати клизач распона ХТМЛ5
• Како користити цоокие и ХТМЛ5 локално складиште

Почетак

Почните са креирањем новог ХТМЛ документа заједно са садржајем и повезивањем библиотеке мишоловке. Користићу Моусетрап библиотеку која је смештена у ЦДЊс тако да ће библиотека бити послужена преко ЦлоудФларе мреже, која би требало да буде бржа од нашег сервера

Сада ћемо користити мишоловку 'бинд' начин за прикључивање типки типковнице с функцијом. Можете да доделите један тастер, комбинација тастера или тастери за секвенцу, на пример

Сингле Кеи

У овом примеру везујемо с.

 Моусетрап.бинд ('с', функција (е) // ваша функција овде ...); 

Комбиновани кључ

У овом примеру везујемо Цтрл и с. Потребно је да притиснете два тастера заједно да бисте извршили одређену функцију.

 Моусетрап.бинд ('цтрл + с', функција (е) // ваша функција овде ...); 

Секуенце Кеи

У овом примеру, корисник ће морати да притисне г, а затим с накнадно. Ако развијате веб-базирану игру то би могло бити корисно за додавање тајног скривеног комбинованог кључа.

 Моусетрап.бинд ('г с', функција (е) // ваша функција овде ...); 

Коришћење мишоловке

Направићемо једноставну веб страницу са неколико пречица на тастатури које ће корисницима омогућити приступ одређеним функцијама на веб-локацији. Користићемо јКуери како бисмо олакшали манипулацију ХТМЛ документа и одабрали ХТМЛ елементе.

Почнимо са нечим лаким.

Ми ћемо повезати кључ који ће омогућити кориснику да се брзо фокусира на поље за унос претраге.

1. Следи ХТМЛ ознака за претрагу заједно са ид.

2. Затим креирамо функцију која ће се фокусирати на улаз за претраживање.

 фунцтион сеарцх () вар сеарцх = $ ('# сеарцх'); сеарцх.вал ("); сеарцх.фоцус (); 

3. На крају, везујемо кључ за покретање функције.

 Моусетрап.бинд ('/', претрага); 

4. То је то. Сада би требали бити у могућности навигирати до уноса за претраживање притиском на типку /.

Алтернативно, можете такође да повежете комбинацију тастера, Цтрл / Цмд + Ф, што је популарна кључна пречица која се користи за претрагу у многим апликацијама за рачунаре:

 Моусетрап.бинд (['цомманд + ф', 'цтрл + ф'], претраживање); 

Коришћење мишоловке са Боотстрап-ом

Лако је интегрирати мишоловку у оквир, на примјер, Боотстрап. У овом другом примеру, показаћемо прозор помоћи који ће приказати листу пречица доступних на веб сајту. Ево, ја се одлучим за Боотстрап Модал да представим листу и одредим? да бисте приказали модал.

Иако ? је доступно само са Схифт тастером, обавезујући само? кључ је довољан.

 Моусетрап.бинд ('?', Функција () $ ('# хелп'). Модал ('схов');); 

Сада када си погодио? , појавит ће се скочни прозор.

Савет за ефикасно повезивање

Временом, ваша растућа колекција пречица на тастатури може почети да упропаштава ваш код. Ако се то догоди, постоји додатак који можете додати да бисте направили свој “кључно везивање” ефикасније. Назван је “бинд дицтионари”. Додајте ово проширење након примарне библиотеке миша, моусетрап.мин.јс.

Сада, уместо да раздвајамо сваки кључ, можемо уредно груписати их у једну .бинд () метод, као на пример:

 Моусетрап.бинд ('/': претрага, 'т': твеет, '?': Функција модал () $ ('# хелп'). Модал ('схов');, 'ј': функција следећа ( ) хигхЛигхт ('ј'), 'к': функција прев () хигхЛигхт ('к')); 

За напреднију имплементацију можете видети демо који сам направио. У демо изведби можете притиснути типку Ј или К да бисте означили пост, а затим притисните Т да бисте објавили тренутни пост који сте означили.

• Виев Демо
• Преузимање