웹 사이트에 바로 가기 키를 추가하는 방법
키보드 단축키를 좋아하십니까? 그들은 많은 시간을 절약 할 수 있도록 도와 줄 수 있습니까? 방문자를 위해 자신의 웹 사이트에 바로 가기 키를 추가 하시겠습니까? 사이트의 접근성 및 탐색 기능이 크게 향상됩니다..
이 게시물에서는 쥐덫이라는 JavaScript 라이브러리를 사용하여 웹 페이지에 바로 가기를 추가하는 방법에 대한 빠른 가이드를 제공합니다. 쥐덫을 사용하면 열쇠를 지정하다 Shift, Ctrl, Alt, Options, Command와 같이 웹 사이트에서 특정 기능 수행. 또한 이전 브라우저에서 잘 작동합니다..
Hongkiat에 대한 추가 정보 :
- Hint.Css로 애니메이션 툴팁을 쉽게 만들 수 있습니다.
- Intro.Js를 사용하여 단계별 가이드 작성 [자습서]
- HTML5 범위 슬라이더 스타일 지정 방법
- 쿠키 및 HTML5 로컬 저장소 사용 방법
시작하기
컨텐츠와 함께 새로운 HTML 문서를 생성하고 쥐덫 라이브러리를 연결하십시오. CDNjs에서 호스팅되는 쥐덫 라이브러리를 사용하여 자체 서버보다 빠른 CloudFlare 네트워크를 통해 라이브러리를 제공합니다.
이제 우리는 쥐덫을 사용할 것입니다. '묶다' 함수를 사용하여 키보드 키를 부착하는 메서드입니다. 귀하는 단일 키, 키 조합 또는 시퀀스 키, 예를 들면
단일 키
이 예제에서 우리는.
Mousetrap.bind ( 's', function (e) // 여기 함수 ...);
조합 키
이 예에서는 Ctrl과 s를 바인딩합니다. 지정된 기능을 수행하려면 두 개의 키를 모두 눌러야합니다.
Mousetrap.bind ( 'ctrl + s', function (e) // 여기 함수 ...);
시퀀스 키
이 예에서 사용자는 g를 누른 다음 에스 그후. 웹 기반 게임을 개발하는 경우 비밀 숨겨진 키 조합을 추가하는 데 유용 할 수 있습니다.
Mousetrap.bind ( 'g s', function (e) // 여기 함수 ...);
쥐덫 사용
우리는 사용자가 웹 사이트의 일부 기능에 액세스 할 수있게 해주는 몇 가지 바로 가기 키를 사용하여 간단한 웹 페이지를 작성합니다. 우리는 jQuery를 사용하여 HTML 문서를보다 쉽게 조작하고 HTML 요소를 선택하도록 할 것이다..
쉬운 일부터 시작합시다..
우리는 사용자가 검색 입력 필드에 빨리 집중할 수 있도록 키를 바인딩 할 것입니다..
1. 다음은 검색을위한 HTML 마크 업과 신분증.
2. 다음으로 검색 입력에 초점을 맞출 함수를 만듭니다..
함수 검색 () var search = $ ( '# search'); search.val ( "); search.focus ();
3. 마지막으로 함수를 실행하기 위해 키를 바인딩합니다..
Mousetrap.bind ( '/', search);
4. 그게 전부 야. 이제 / 버튼을 눌러 검색 입력을 탐색 할 수 있습니다..
또는 Ctrl + Cmd + F 키 조합을 바인딩 할 수도 있습니다. Ctrl / Cmd + F는 많은 데스크톱 응용 프로그램에서 검색에 많이 사용되는 단축키입니다.
Mousetrap.bind ([ 'command + f', 'ctrl + f'], 검색);
부트 스트랩과 함께 쥐덫 사용
쥐덫을 프레임 워크 (예 : 부트 스트랩)와 통합하는 것은 쉽습니다. 이 두 번째 예에서는 웹 사이트에서 사용할 수있는 바로 가기 목록을 표시하는 도움말 창이 표시됩니다. 여기에서 부트 스트랩 모달이 목록을 제시하고? 모달을 보여주는 열쇠.
비록 ? 시프트 키로만 접근 할 수 있습니까? 열쇠 충분하다.
Mousetrap.bind ( '?', function () $ ( '# help'). 모달 ( 'show'););
이제 네가 때렸 니? 키를 누르면 팝업이 나타납니다..
효율적인 바인딩을위한 팁
시간이 지남에 따라 증가하는 키보드 바로 가기 모음이 코드를 망칠 수도 있습니다. 이런 일이 발생하면 추가 할 수있는 확장 프로그램이 있습니다. “키 바인딩” 코드가 더 효율적입니다. 그것은 “바인드 사전”. 기본 쥐덫 라이브러리 다음에이 확장을 추가하십시오, mousetrap.min.js.
이제는 각 키 바인딩을 분리하는 대신 하나의 키 바인딩을 깔끔하게 그룹화 할 수 있습니다. .묶다() 방법, 이렇게 :
modal ( 'show'); ','j ': 다음 함수 (' '' '' ') ) highLight ( 'j'), 'k': function prev () highLight ( 'k')); 고급 구현을 위해 필자가 만든 데모를 볼 수 있습니다. 데모에서는 J 또는 K 키를 눌러 게시물을 강조 표시하고 T를 눌러 강조 표시된 현재 게시물에 트위터를 올릴 수 있습니다.
- 데모보기
- 다운로드
