본문 바로가기

Javascript/jQuery

input 박스 길이제한 요즘은 maxlength를 이용하여 간단히 길이 제한이 가능하다. 하지만 가끔씩 alert으로 안내를 해주기 바라는 분들이 계시다. 그래서 전에 만들었던 소스를 찾아서 다시 가져왔다. $('#keyword').bind('keyup',function(e){if($('#keyword').val().length>10){alert('키워드는 10자 이내로 입력 가능합니다.');$('#keyword').val($('#keyword').val().substr(0,10));}}); input 박스에 10자 이상 들어가면 alert을 띄우고 10자를 잘라서 넣어준다. 참고로 한글도 1글자로 처리된다. 이건 한글을 고려하려면 몇가지 함수가 추가로 필요하다. 단지 문제가 한글이 잘릴 수도 있으니... 구조는 많이 바뀌어야.. 더보기
input 박스에 숫자만 입력하기 숫자만 입력받게 해달라고 요청이와서 전에 만들어둔 소스를 찾았다. 이거 만들 때, 아마도 정규식을 많이 연습중이였던거 같다. 정규식으로 만들었네... 무조건 숫자 처리를 했네... 키 코드를 모두 예외처리할 수 없으니 이렇게 한거 같은데... 정확히 기억은 나지 않는다;;; $('input').bind('keyup',function(e){event = e || window.event;var keyID = (event.which) ? event.which : event.keyCode;if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ){ // 백스페이스, DELETE, 좌 화살표, 우 화살표return;}else{event.target.value .. 더보기
jQuery Attributes vs. Properties 이번에 오랜만에 checkbox를 수정하는 스크립트를 만들어야해서 작업하다보니 attr이 안먹는다. 아래는 기존에 사용하던 방법이다.$('#testCheckbox').attr('checked', true); 이게 jqeury 1.6 이후부터는 attribute와 property가 분리되어서 다르게 된다고 한다. 얼마전까지 1.4.4를 사용했었으므로 몰랐다. 버젼업되면 꼼꼼히 확인해야겠다. 느닷없이 안되서 좀 당황스러웠다. 요즘에는 selecter를 이용해서 값을 가져왔기 때문에 attr로 checked를 가져오지 않아서 몰랐다. 참고로 selecter로 가져오면 다음과 같다.$('input:checkbox[id=testCheckbox]:checked') checked가 되어 있으면 객체를 가져오고 선택이.. 더보기
타이머 만들기 시분초를 계산하는 타이머를 만들어보았다. 처음에 다른 사람이 짠 소스를 봤으나 왠지 마음에 들지않아 새로 만들었다. 하지만 내가 만들어도 맘에들지 않는구나... 좀더 쉽게 심플하게 만들고 싶으나 다음에 도전해보자. 시간 카운트60시60분60초 시간 카운트 60시 60분 60초 더보기
달력 만들기 jquery를 이용해 달력을 만들어보자. 태그도 동적으로 생성하여 만들어보았다. 어떤사람은 이렇게 만들면 보기 어렵다고 한다. 나는 동적생성이 편하므로 그렇게 작업하겠다. 위에는 만든 샘플로 생성한 달력이다. 다음은 생성시키는 부분이다.// 달력 생성$.fn.showCalendar = function(thisMonth){var tmpMonth = this.initCalendar(thisMonth); // 달력 월 초기화var weekDateCntForMonth = this.getThisDay(); // 오늘의 요일this.initYearMonthTag(); // 년월 출력this.intCalendarTag(); // 전체 태그 생성this.intWeekTag(); // 주간 태그 생성this.initFr.. 더보기
단축키를 눌러 특정위치로 이동 웹표준으로 인해 단축키로 특정위치로 이동하는 소스가 필요하다고 해서 샘플소스를 받았는데 크로스 브라우징이 전혀 안되있어서 jquery로 수정해서 만들어 보았다. 좀더 정리하면 좋겠으나 말그대로 샘플이므로 그냥 두기로 했다. 추가 설명을 하자면 파폭에서 keyCode가 먹지 않는 관계로 event.charCode를 추가해주었다. 대문자 Q, W, E R 에 대한 키보드 입력값에 따라 해당 위치로 이동합니다. H를 누르시면 컨텐츠 상단 (home)으로 설정된 곳으로 이동합니다. ID는 cntQ ID는 cntW ID는 cntE ID는 cntR 더보기
레이어를 화면 중앙에 띄우기 작업을 하다보니, 레이어를 스크롤에 상관없이 자동으로 화면 중앙에 띄우는 소스를 많이 보았다. 그런데 좀더 편하게 사용하고 싶어서 찾다가 커스텀 메서드를 만들어 사용하는게 가장 편하다는 생각이 들어서 만들었다. 사실 만들어 사용한지는 좀 됬지만, 귀차니즘으로 이제야 정리해본다./** * showLayer: 레이어를 브라우저 중앙에 표시 */$jq.fn.showLayer = function(){ var win = $jq(window); var winH = win.scrollTop() + ((win.height() - $jq(this).height()) / 2); var winW = win.scrollLeft() + ((win.width() - $jq(this).width()) / 2); $jq(this)... 더보기
offsetParent() w3shools를 보다가 offsetParent()함수의 기능이 이해가 안가서 찾아보았다.jquery홈페이지에서 찾아보니 금방 알 수 있어 좋구나.http://docs.jquery.com/Traversing/offsetParent offsetParent()는 첫번째로 매칭되는 부모를 선택한다. 선택의 기준은 가장 가까운 위치에 있는 position(relative or absolute)을 가지고 있는 부모를 말한다. Click button to set the background color of the first positioned parent element of this paragraph.Set background-color 위 코드의 경우는 버튼을 클릭하면 부분의 색이 바뀌게 된다. 여기서 조금 수정해.. 더보기
이벤트 처리(펌) 이벤트 동적할당에 대한 자료를 찾던중 정리가 잘된자료를 찾아 퍼왔다. 원문: http://m.mkexdev.net/147 다른 프로그래밍 언어와 마찬가지로 스크립트 환경에서도 이벤트 처리가 많은 부분을 차지하게 된다. 기존 자바스크립트의 addEventListener와 같은 함수를 랩핑한 jQuery 만의 이벤트 처리 방식을 정리해 보자. 기본 이벤트 처리 click, mousedown과 같은 일반적인 이벤트 이름을 그대로 사용하여 이벤트 처리기를 연결할 수 있다. .이벤트명(이벤트처리기 함수) 선택자로 선택된 element에 이벤트명(ex:click, mousedown 등)을 지정해 특정 이벤트 발생시 이벤트처리기 함수가 실행되도록 한다 다음은 이 방식을 이용해 click, hover 두 이벤트를 처리.. 더보기
ajax 사용해보자. jQuery는 고맙게도 ajax를 쉽게 사용할 수 있다. 크로스브라우징을 내가 작업할 필요가 없으니 편하다. 기본 문법은 다음과 같다.$.ajax({name:value, name:value, ... }) 문법은 jQuery답게 간단하고 확장성있어 보인다. 예제를 살펴보자.demo_ajax_load.txt파일의 내용을 가져와서 div에 넣는 소스이다. 통신이 성공할 경우에만 동작한다. Let AJAX change this textChange Content 다음 스크립트를 사용하면 비동기방식으로 사용할 수있다. 그리고 에러처리는 다음과 같다. 다음 페이지에 가면 몇가지 유형이 더 나와있다. ajax와 관련된 기능은 다 있어보이니 참고하자.http://www.w3schools.com/jquery/ajax_aj.. 더보기