'code' 태그의 글 목록 (2 Page)

radio 버튼 동작과 유사한 radioClass 플러그인 만들어보기

radio 버튼 유사 기능을 플러그인화 하기 라디오 버튼을 클릭하면 그 형제 라디오버튼 해제되는데 이와 유사한 기능을 클래스로 토글시키는 간단한 플러그인을 제작해 봅니다. 예를 들어 li 태그를 클릭할 경우 해당 요소에 사용자 클래스명을 추가하고 형제 요소는 클래스를 제거하는 방식입니다. radioClass 플러그인 마크업은 아래와 같이 구성되어있다고 가정합니다. 사용시에는 정의 마크업을 구성하면 됩니다. html Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. 플러그인은 아래와 같습니다..

Code Lab 2016. 1. 14. 11:40

show & hide 메소드를 문자열로 이용하는 방법

show, hide 메소드를 객체의 대괄호 접근 표기법 이용하기 show, hide 메소드와 객체 리터럴 대괄호 접근 표현식 아래와 같은 마크업에 클릭을 했을 경우 div 박스가 보여주고 감추는 토글 기능을 구현하고자 합니다. html 클릭 box javascript var $target = $('p > a'); $target.on('click',function () { var target = $('div'); target[target.css('display') == 'block' ? 'hide' : 'show'](); return false; }) 위 스크립트를 분석해 보면 target[] 인 객체 대괄호 접근표기법 안에 삼항 연산자가 작성되어 있습니다. 삼항 연산자 결과로 target.hide 또는 ..

Web Tech/jQuery 2016. 1. 12. 12:37

열(columns) 높이 동일하게 맞추기 - list item equal

columns equal height 리스트 아이템 동일하게 맞추기 See the Pen list item match equal height by jaeheekim (@jaehee) on CodePen. Jaehee's e-room

Code Lab 2016. 1. 12. 11:59

퀵 메뉴 및 상단 이동 버튼 - quick menu & go to top

스크롤에 따라다니는 퀵메뉴와 상단 이동하는 버튼 만들기 Quick Menu & Go to Top See the Pen 퀵메뉴 및 top 버튼 by jaeheekim (@jaehee) on CodePen. Jaehee's e-room

Code Lab 2016. 1. 12. 11:45

IR(Image Replacement) technique - 이미지 대체 기법

웹 접근성을 위한 이미지 대체 기법 CSS로 표현하기 난해한 디자인을 위해 사용되는 이미지 대체 기법입니다. 일반적으로 도표와 같은 형식에 많이 사용됩니다. IR 기법 See the Pen IR 기법(이미지 대체 기법) by jaeheekim (@jaehee) on CodePen.

Code Lab 2016. 1. 12. 11:34

트리 메뉴(tree menu) - jQuery

트리 메뉴 타입 tree menu type See the Pen tree menu by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub

Code Lab 2016. 1. 12. 10:55

Lava Lamp Menu

라바 램프 메뉴 스타일 Lava Lamp Menu Code See the Pen lava lamp menu by jaeheekim (@jaehee) on CodePen.

Code Lab 2016. 1. 12. 10:28

jQuery CSS 메소드 사용자 오버라이딩

jQuery CSS 메소드 사용자 정의 & 오버라이딩(Overriding) jQuery css 메소드는 인자값으로 객체리터럴 또는 속성,값을 정의하지만 stylesheet 와 같이 border: 1px solid #fff; padding:2px 10px; 을 인자로 전달할 수 없습니다.하지만 사용자 정의 오버라이딩을 통해 CSS에서 정의하는 방법으로 CSS 메소드에 인자값을 전달할 수 있도록 할 수 있습니다. E.g.) $('.selector').css('border: 1px solid #fff; padding:2px 10px;'); JavaScript 'use strict'; /** * ----------------------------------- * jQuery css 메서드 Inherit Over..

Code Lab 2015. 12. 29. 16:56

tab menu - 함수 단위 Vs 프로토타입의 클래스 단위

함수단위와 프로토타입의 탭 메뉴 만들기 함수단위의 탭 메뉴 기본 마크업 구성 html Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor. 함수단위 탭 메뉴 로직 javascript $(function() { tabMenu("#t..

Code Lab 2015. 6. 23. 17:55

jQuery map을 이용한 max값(width,height) 구하기

map, apply 메소드 활용 javascript var maxHeight = Math.max.apply(null, $("div.panel").map(function (){ return $(this).height(); }).get()); var heights = $("div.panel").map(function (){ return $(this).height(); }).get(), maxHeight = Math.max.apply(null, heights);

Code Lab 2015. 2. 15. 21:04

Web Club

code 검색 결과