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
문득 ^ 의 이름이 궁금해서 찾아보게 되었습니다. 알아두면 언젠가 쓸모 있겠죠;; ampersand & apostrophe or single quote ‘ asterisk * at @ back quote ` back slash \ braces or curly braces {} brackets [] caret ^ close brace } close bracket ] close parenthesis ) colon : comma , dollar $ equal = exclamation … Read more
http://one-div.com/ 딱 한개의 div 태그와 css 만으로 만든 icon들 입니다. 각 아이콘 별로 지원 가능한 브라우저가 표시되며 당연하게도 IE는 9+ 이거나 10+ 이어야만 가능합니다. (IE 만세) 당연하게도 html은 div 하나 뿐이고, css 는 여러가지 border 들로 구성되어있습니다. 설명에 따르자면 벡터 이미지들 처럼 리사이징에도 완벽하게 대응한다고 합니다. 🙂
최근 몇년은 SNS가 휩쓸었다고 해도 과언이 아니죠. 정말 쓸어버렸고 그 폭풍은 아직도 유효하고.. 무섭게 성장했고 무섭게 시장을 변화 시켰습니다. 그런 소셜 미디어에 대한 통계나 여러 흥미로운 자료들을 한대 모아놓은 동영상입니다. 더 많은 동영상은 http://www.youtube.com/user/Socialnomics09 여기에서 보실 수 있습니다. 덧, 이 동영상들을 올리는 사람은 Erik Qualman 이라는 유명한 교수이자 책의 저자이자 스피커라고 위키페디아가 알려줘서 오늘 처음 … Read more