자작 훌러그인 : jQuery shortcut v0.1 (웹페이지에 단축키 기능을 넣자)

종종 웹서핑을 하면서 a 를 누르면 욜리~ b를 누르면 죨리~ c를 누르면 요기능 을 해주는 단축키 기능이 있는 사이트들을 보게 된다.

요런 단축키 기능을 쉽게 추가해 주기 위한 jQuery 훌러그인을 맹글어 보았다.


다운로드

jquery.shortcut-0.1.js

설치

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.shortcut-0.1.js" type="text/javascript"></script>

사용법

<script type="text/javascript">
	$.shortcut({
		65 : function(){
			alert("a키 눌렀을때 처리할 기능");
			// window.location.href = "/";  // 홈으로 이동
		},
		66 : function(){
			alert("b키 눌렀을때 처리할 기능");
			// $("#keyword").focus();   // keyword 인풋박스로 포커스 이동
		}
	});
</script>

 $.shortcut() 에 추가하고 단축키 키코드값 : 키를 눌렀을때 실행할 자바스크립 함수를 쌍으로 해서 ,(콤마) 로 구분해 넣고 싶은 만큼 쪽 넣으면 된다~



키코드값 알아내기. ↓ 아래에 있는 인풋박스에 코드값을 알고 싶은 키를 입력하면 옆에 키코드값이 뽓 나타난다. 
키코드 알고 싶어염 :



※ 사람들이 input, textarea  에 뭔가 입력하고 있을때 단축키 기능이 실행되 버리는 것을 막기 위해 input, textarea 에 뭔가를 입력할때는 단축키 기능이 작동하지 않는다.

※ 웹브라우져 단축키 ex) ctrl+a   를 입력했을때 사이트 단축키 기능이 실행되는것을 막기 위해 컨트롤키, 알트키, 쉬프트키를 누른상태에서는 단축키 기능이 작동하지 않는다. 

2011/09/19 - [jQuery Plugin] - 자작 훌러그인 : jQuery monthPicker Plugin v0.1

2011/11/07 - [jQuery Plugin] - 자작 훌러그인 : jQuery blingHover v0.1 (링크 롤오버시 텍스트 컬러를 보드랍게 바꿔주기-_-)

2011/11/11 - [Javascript 예제] - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

2011/11/15 - [Javascript 예제] - jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제

2011/11/18 - [Javascript 예제] - jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기