Google Material design 의 물결 애니메이션 jQuery Plugin 구글 Material design 에서 볼 수 있는 클릭 이벤트 피드백 에니메이션(물결)을 구현해봤습니다. 역시 업무에 필요해서.. jQuery plugin 형태로 만들었기 때문에 적용하고 싶은 element 에 jQuery 함수를 입히면 됩니다. 언제나 그랬듯이 별거 없는 코드입니다. Demo & Source codes 데모는 https://jsfiddle.net/rootbox/bz47o13s/ 코드는 https://github.com/rootbox/ripple-click-animation 에서 보실 수 있습니다. Live preview
다른 포스트([js/jQuery] Customized checkbox/radio button)에서 사용했던 코드인데 다시 정리합니다. function getIEVersion() { var ua = window.navigator.userAgent, msie = ua.indexOf(“MSIE “); if(msie > 0) { return parseInt(ua.substring(msie + 5, ua.indexOf(“.”, msie))); } else { return 0; } } 구현 방법은 매우 단순합니다. navigator 객체의 userAgent 프로퍼티에서 버전 부분만 추출하는 방식입니다. 아래는 Internet explorer 10 의 userAgent … Read more
역시 Customized checkbox/radio button 과 같은 이유로 만든 스크립트입니다. selectbox는 단순히 CSS 핸들만으로 디자인을 입힐 수 없기 때문에 <selectbox> 태그를 사용하지 않고 디자인은 ul/li 와 CSS로 적용하고, 기능은 javascript 로 핸들했습니다. 간단한 기능만 필요해 selectbox 기본 기능만 구현했을 뿐, keyboard 관련 이벤트는 처리하지 않았습니다. 역시 JSFiddle 을 통해서 확인 가능합니다. 머지않은 시간안에 github 로 코드들을 … Read more
오랫만에 업데이트 합니다. Checkbox 나 Radio button 에 디자인을 입힐 수 있도록 하는 코드입니다. 요즘에 누가 구구구구구구 버전 브라우저(IE7, 8, 9) 따위를 지원하겠냐 싶으시겠지만 대응 해야 하는 곳이 있습니다. ㅎㅎ 덕분에 CSS3 로 간단하게 해결할 수 있는 것을 구버전도 지원할 수 있도록 jQuery로 만들었습니다. IE9 이상만 지원해도 된다면 javascript 부분 제거하시고 CSS 부분만 사용하시면 됩니다. … Read more
오브젝트를 드래그&드랍할 수 있도록 하는 javascript(jQuery) 코드입니다. 여기에 쿠키나 로컬 스토리지등을 활용해서 widget 형태로 꾸밀 수 있을 것 같습니다. 우선은 간단하게 구현했습니다. javascript (needs jQuery) $.fn.draggable = function() { return $.each(this, function() { var $el = $(this); var move = function(e) { if(!$el.data(“_isMove”)) return; var pos = $el.data(“pos”), pos = { x: parseInt($el.css(“left”)) + (e.clientX … Read more
간단하게 구현해본 FAQ 형식의 코드입니다. 실무에서 일하시면서 매우 자주 접하는 형식 중 하나일 것이라 생각되어 만들어봤습니다. 🙂 html markup question1 answer1 question2 answer2 question3 answer3 question4 answer4 javascript $.fn.setFaq = function() { return this.each(function(i, elm) { $elm = $(elm); $elm.find(“dd”).hide() .end().delegate(“dt”, “click”, function() { $(this).next().slideToggle(200) .end().toggleClass(“on”); }); }); }; Here is the TEST CODE http://jsfiddle.net/rootbox/uD89q/ … Read more
과제가 진행이 될수록 한명 두명 과제 제출을 안하기 시작하는군요. 흑흑.. 이번 과제까지 진행한 후에 오프 스터디를 한번 하도록 하겠습니다. 이번 과제는 배열입니다. 스터디때 너무 짧게 설명을 했기 때문에 맛만 보겠습니다. ㅎ 1. 아래와 같은 배열이 있다고 할 때, 배열에 담긴 숫자의 총 합을 구하세요. var arr = [1,2,4,10,19,219,5,99,3]; 2. 1 ~ 10까지 담긴 배열을 선언하고, … Read more
canvas에 대해서 이것저것 살펴보다가 만들어보게 되었습니다. 책을 하나 구매했는데 표지만 3일째 보고있네요. 책만 자꾸 사고 정작 표지만 보고있는 이런… (디..디아블로를 욕해봅니다.) 코드가 너무 허접해서.. 좀 더 손보고 주석도 달고 해서 그림판 만들기를 연재해볼까.. 라고 생각만.. 덧, 아우.. wp가 html 모드로 글을 작성하면 자기 멋대로 태그를 막 집어넣네 ㅠ..
원래 오늘 포스팅 예정이던 유용성 없어보이는 스크립트가 있었는데.. 지인이 보내준 흥미로운 글에 답을 하나씩 달다가 이 글을 작성하게 되었습니다. 블로그 포스팅 소스가 될만한 질문들이 아주아주아주아주 많아서 정말 좋네요. ㅠ 제가 아는 수준에서 하나 둘 정리해서 올리겠습니다. 인터뷰하러 가실 때 참고하시라고.. ㅎ 오늘은 javascript 의 Hoisting 즉, 끌어올림에 대해서 다뤄보겠습니다. var job = “web publisher”; function … Read more
이번 주 과제는 아직 지난 과제를 제출하지 않은 학생이 있어서 미루려고 했는데… 블로그에 포스팅 되는 글이 없으면 안될 것 같아 그냥.. ㄷ.. 아래와 같이 입력받은 두 숫자의 합을 구하는 함수를 만드세요. sum(3, 4); -> 3 + 4 = 7 아래와 같이 입력받은 숫자에 해당하는 구구단을 출력하는 함수를 만드세요. gugudan(3); -> 3 x 1 = 3 … Read more