Web Tech/jQuery 검색 결과

해당 글 34건

세로형 2단 메뉴 - jQuery Study #1

심플 세로형 2단 메뉴 - 단계별 학습 #1 이 포스팅에서는 학습 목적을 위해 생성자(클래스)함수 & 프로토타입을 이용한 세로형 2단 메뉴를 구현해 봅니다. 그리고 사용자 정의 이벤트에 대한 소스도 포함하고 있습니다. HTML 2단 메뉴에 대한 마크업을 다음과 같이 준비합니다. html menu1 sub1-1 sub1-2 sub1-3 menu2 sub2-1 sub2-2 menu3 sub3-1 sub3-2 sub3-3 sub3-4 menu4 CSS 2단 메뉴에 대한 CSS는 다음과 같습니다. css #accordionMenu1 { margin:100px; width:300px; } .acc-menu { position:relative; list-style: none; border:4px solid #eee..
Web Tech/jQuery 2016. 6. 17. 08:55

jQuery custom event

Event 란? 웹 프로그래밍에서의 이벤트란 사용자의 어떤 액션(개체를 클릭하거나, 마우스를 움직이는 행동)에 의해서 야기되는 사건을 의미하며, 그러한 이벤트에는 클릭, 마우스 오버, 키 입력 등이 있습니다. 그리고, 일반적으로 그러한 이벤트가 발생하는 경우 특정 로직을 수행하기 위해서 해당 이벤트와 특정 메서드를 연결해서 사용하곤 합니다. 이러한 연결을 이벤트 처리기 매핑(event hanlder mapping)이라고 하며, 매핑에 의해서 연결된 메서드들을 이벤트 처리기라고 합니다. Click, MouseOver, KeyPress 등등을 알고 있을 것입니다. 이들이 이벤트 처리기들입니다. 예를 들면, 여러분은 자바스크립트를 사용해서 다음과 같이 이벤트 처리기를 매핑할 수 있습니다. javascript ..
Web Tech/jQuery 2016. 6. 16. 17:27

jQuery 유틸리티 사용자 메소드 정의 - jQuery utility method

jQuery 유틸리티 사용자 메소드 정의하기 $.each(), $.data() 와 같은 유틸리티 메소드처럼 사용자 정의 유틸리티 메소드를 알아봅니다. 나만의 $.$() 유틸리티 메소드 정의 지금 작성하려고 하는 유틸리티 메소드는 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지 않기 위한 메소드를 정의하려고 합니다. 이는 성능 최적화에 도움이 될 수 있을 것입니다. 다음의 코드는 $.$() 유틸리티 메소드를 만들고 현재 제이쿼리에서 제공되는 $.data() 유틸리티 메소드를 사용할 것입니다. javascript /** * --------------------------------------------------------------------------- * 요소를 탐색할 때 탐색했던 요소를 다시 탐색하지..
Web Tech/jQuery 2016. 1. 20. 09:00

jQuery.expr[':'] 확장 및 활용 방법 - jQuery 가상 선택자 사용자 정의

jQuery.expr.pseudos 확장(사용자 정의 방법)과 활용 :hidden, :visible 과 같은 제이쿼리의 가상 선택자를 사용자가 직접 정의, 확장하는 방법에 대해 알아봅니다. jQuery.expr.pseudos 확장 사용자 정의 가상 선택자를 확장하는 Sizzle 엔진의 새로운 방법은 jQuery.expr.createPseudo() 메소드를 사용하는 것입니다. 이 메소드는 사용자가 직접 정의한 가상 클래스 선택자에 메타 값을 입력하는 경우에만 사용할 수 있습니다. 아래 코드를 간단히 살펴봅니다. javascript // jQuery.expr[':'] === jQuery.expr.pseudos $.expr[':'].btn = $.expr.createPseudo( function(meta){ ..
Web Tech/jQuery 2016. 1. 19. 10:49

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

fixed header on scroll

스크롤시 헤더 보이거나 숨기기 사용자의 스크롤을 감지하여 원하는 요소에 동작을 추가하는 것으로 일반적으로 상단의 네비게이션에 자주 이용되고 있습니다. 기존의 고정(Fixed)된 네비게이션이 차지하는 화면의 비율을 없애고 사용자의 반응에 따라 네비게이션이 등장함으로써 좀 더 유연하게 화면의 가시영역을 확보할 수 있습니다. 이러한 UI를 sticky, spy, floating (sticky header, sticky tab, floating menu, spy tab...)등으로 불려지고 있으니 참고하기 바랍니다. 고정된 헤더(네비게이션) 사용성 부족 많은 웹사이트에서 네비게이션 탐색에 도움을 주기위해 상단의 헤더(네비게이션을 포함한)를 CSS의 포지셔닝을 사용해 position: fixed 와 같이 고정해 ..
Web Tech/jQuery 2016. 1. 11. 08:40

jQuery 를 효율적으로 작성하는 방법

jQuery 효율적 작성 제이쿼리를 사용함에 있어 성능 최적화(performance)에 간단히 알아봅니다. DOM 을 캐싱(Caching)하라 한번 탐색한 DOM을 다시 탐색하는 것은 비효율적이다. Bad Code $('button.confirm').on('click', function() { // DOM 한번 탐색 $('.modal').modal(); // DOM 다시 한번 탐색 $('.modal').addClass('active'); // DOM 또 다시 한번 탐색 $('modal').css(...); }); Good Code $('button.confirm').on('click', function() { // DOM 한번만 탐색 (체이닝) $('.modal') .modal() .addClass('a..
Web Tech/jQuery 2015. 12. 23. 19:52

jQuery Navi Menu 플러그인 제작 고려사항

jQuery Navigation Menu 플러그인 제작 고려사항 내비게이션 위젯에 접근성 향상을 위한 WAI-ARIA 적용 WAI-ARIA는 RIA 웹 애플리케이션의 취약한 접근성을 개선하기 위한 목적으로 개발된 표준 접근성 API로, Javascript를 사용하여 HTML 문서에 역할, 속성, 상태 등을 정의할 수 있습니다. 이를 통해 웹 제작자는 웹 애플리케이션의 접근성을 향상시킬 수 있습니다. WAI-ARIA 퀵 레퍼런스 보기 웹 사이트 글로벌 내비게이션 제작가이드 보기 역할(Roles) 설정 ㆍ 네비게이션 요소 ( or ) 에 role="navigation" 역할 설정 ㆍ 네비게이션바 요소 ( ) 에 role="menubar" 역할 설정 ㆍ 레벨 2Depth 메뉴 컨테이너 요소 ( ) 에 role..
Web Tech/jQuery 2015. 7. 9. 13:27

jQuery 플러그인 디자인 패턴

jQuery 플러그인 디자인 패턴jQuery 플러그인 설계시에 기본적으로 고려해야 할 점들을 알아 보겠습니다. 1. 플러그인 이름 2. 플러그인 제작 기본 패턴 (function())(); 을 활용한 $ 별칭을 보호 체이닝 설정 3. 사용자 정의 옵션 설정 4. 네임스페이스 플러그인 이름 작성 jquery.{{플러그인이름}}.js 또는 jquery.{{플러그인이름}}.1.0.0.js 플러그인 제작 기본 패턴 (function(global, $){ 'use strict'; $.fn[{{pluginName}}] = function() { var _this = this; return _this; // return _this.each(function(index, item){}); // return _this.p..
Web Tech/jQuery 2015. 6. 30. 14:15

jQuery 인스턴스 객체를 참조했을 때와 참조하지 않을 때의 성능차이

$() 팩토리 함수의 참조 vs 비참조$() 에서 반환되는 인스턴스 객체(jQuery 객체) 를 참조했을 경우와 참조하지 않고 사용했을 경우의 성능 차이를 콘솔 타임으로 보도록 하겠습니다. jQuery 인스턴스 객체를 참조하지 않은 경우 console.time('Non Cached'); var i = 0; for(; i < 10000; i++) { var $test = $('div'); } console.timeEnd('Non Cached'); jQuery 인스턴스 객체를 참조한 경우 console.time('Cached'); var i = 0, $test = $('div'); for(; i < 10000; i++) { var s = $test; } console.timeEnd('Cached'); 콘솔창..
Web Tech/jQuery 2015. 6. 30. 12:55

[STEP 04] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 플러그인 사용자를 위한 간단한 유효성 검사항목을 추가하여 제작해 보도록 하겠습니다. STEP 04 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { /** * $.fn.radioClass 플러그인 정의 * @param {string} name radioClass 를 적용할 class 속성 이름 * @param {string} context radioClass 를 적용할 컨텍스트 선택자 * @return {jQuery Obj..
Web Tech/jQuery 2015. 6. 23. 15:25

[STEP 03] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 이번 단계에서는 사용자가 정의한 클래스 속성을 원하는 요소에 설정하도록 제작해보도록 하겠습니다. 마크업은 이전과 동일한 형태입니다. STEP 03 JavaScript / 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (function(global, $){ 'use strict'; // $.fn.radioClass 플러그인이 존재하지 않는다면? if ( !$.fn.radioClass ) { $.fn.radioClass = function(name, context) { // 클래스 속성이 설정될 context 의 기본 값을 설정합니다. // 사용자 정의 값이 있으면 덮어쓰기 context = context ? context : null..
Web Tech/jQuery 2015. 6. 23. 15:18

[STEP 02] 기초 플러그인 제작 가이드

jQuery PlugIn 기초 STEP 01 단계에서는 a 태그가 없는 li 에 class 를 추가하는 플러그인이었습니다. 하지만 li 요소는 탭포커스가 이동되지 않기 때문에 접근성을 위한 탭포커스를 위해 마크업에 a 태그를 추가하여 접근성까지 고려한 플러그인을 제작해보도록 하겠습니다. Mark-up 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. STEP 02 JavaScript // 전역이 오염되지 않도록 별도의 공간을 생성 // 스코프 함수 (즉시 실행되는 함수 내부) (functi..
Web Tech/jQuery 2015. 6. 23. 14:59

[STEP 01] 기초 플러그인 제작 가이드

jQuery Plugin 기초 제이쿼리 플러그인에 대한 기초 단계부터 심화단계까지 포스팅해 보겠습니다. 간단하게 class 를 붙였다 지웠다하는 radio 와 같은 역할을 하는 플러그인을 단계별로 작성해보도록 하겠습니다. STEP 01 JavaScript if (!$.fn.radioClass) { // $.fn 객체의 radioClass 메소드 정의 // $ 가 jQuery 의 Alias(별칭)이듯이 fn 은 prototype 의 Alias(별칭) 입니다. // console.log($.fn === $.prototype); // true $.fn.radioClass = function(name) { // 플러그인 함수 내부에서 this 는 jQuery 인스턴스 객체를 가리킵니다. // $('li.sele..
Web Tech/jQuery 2015. 6. 23. 14:57