Web For All/jQuery 썸네일형 리스트형 jQuery 에서 테이블의 row 추가하기 jQuery add table row function definition:/* Add a new table row to the bottom of the table */ function addTableRow(jQtable){ jQtable.each(function(){ var $table = $(this); // Number of td's in the last table row var n = $('tr:last td', this).length; var tds = ''; for(var i = 0; i 0){ $('tbody', this).append(tds); }else { $(this).append(tds); } }); }jQuery add table row function usage example: ad.. 더보기 jQuery Validate jquery 플러그인 중 하나인 jquery.validator 의 옵션을 분석(해석?)해 본 겁니다. 뭐 별 쓸데도 없는 문서지만 기왕 정리한거 저 같이 영어레벨이 쎄멘바닥인 분들한테는 조금이나마 도움이 될까 하여 올려봅니다. 스프링노트에 적어두었던걸 그대로 옮긴거라 경어가 아닌점 양해바랍니다. 중간 중간 몰라서 분석 못한것도 있구요 잘못된 부분이 있을지도 모릅니다. ㅠㅠ 말씀해 주시면 수정하겠습니다. jquery.validator Option 정리 debug 기본값: false 디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다 $(".selector").validate({ debug: true }) submitHandler 폼이 submit 될때 마지막으로 뭔가 할 수 있도록 핸들을 넘겨.. 더보기 jQuery Plugin 50 Awesome New jQuery Plugins http://speckyboy.com/2010/08/22/50-awesome-new-jquery-plugins/ 최고! http://vadikom.com/demos/poshytip/ 더보기 자바스크립트 로그 더보기 JavaScript *중요 개체 지향 기술을 이용한 고급 웹 응용 프로그램 만들기 Ray Djajadinata 이 기사에서 다루는 내용: 프로토타입 기반 언어로서의 JavaScript JavaScript를 사용한 개체 지향 프로그래밍 JavaScript에서의 코딩 트릭 JavaScript의 미래 이 기사에서 사용하는 기술: JavaScript 목차 JavaScript 개체는 사전입니다. JavaScript에서는 함수가 가장 중요합니다. 생성자 함수는 있지만 클래스는 없습니다. 프로토타입 정적 속성 및 메서드 차단 전용 속성 시뮬레이션 클래스로부터 상속 네임스페이스 시뮬레이션 JavaScript에서 이와 같이 코딩해야 할까요? 앞으로의 전망 최근에 필자는 웹 응용 프로그래밍 개발 부문에 5년 경력을 가진 소프트웨어 개발자와 인터뷰를.. 더보기 자바스크립트 패키지 자바스크립트에서 패키지 지정 방법 자바는 클래스를 패키지 단위로 분류하고 있다. java.lang이나 java.util 과 같이 패키지를 사용해서 클래스를 분류함으로써 클래스의 이름을 정할 때의 불편함으로 줄이고 있다. (만약 패키지가 없었다면 java.awt.List 클래스와 java.util.List 클래스의 이름은 AwtList와 UtilList 처럼 되었을지도 모른다.) 자바스크립트에서도 약간의 트릭으로 자바의 클래스와 같은 효과를 낼 수 있다. 이를 위해서는 다음과 같이 Object()나 JSON 표기법인 '{}'를 사용하면 된다. var tle = new Object(); // 또는 var tle = {}; 위와 같이 패키지 이름으로 사용할 객체를 생성한 뒤에 다음과 같이 패키지를 나타내는 객.. 더보기 자바스크립트 클로저 참조: http://decoder.tistory.com/623 클로저(Closure) - JavaScript 더글라스 크록포드의 자바스크립트 핵심 가이드 http://hanb.co.kr/look.php?isbn=978-89-7914-598-4 어찌됐건 자바스크립트를 다뤄야 하고, 또 잘 다루고 싶다면 이 책을 읽어볼 것을 권장한다. 또는 나처럼 당장 자바스크립트를 쓰고 있지는 않더라도 자바스크립트와 같은(??) 언어에 대해 관심이 있다면 읽어볼 만하다. 책은 얇지만 그리 쉽게 읽을 순 없을 듯. ㅋㅋ 이 책에선 클로저를 유효범위(scope)로 인해 발생할 수 있는 문제를 해결하는 한 방법으로 기술하고 있다. 자바스크립트에는 블록 유효범위가 없고, 대신 함수 유효범위가 있기 때문에 함수 내에서 정의된 매개.. 더보기 디버그 FIREBUG BREAKPOINTS http://www.pageoff.net/896 스크린캐스트 참조 사이트) http://snook.ca/archives/javascript/firebug-breakpoints 더보기 Blackbird Output all message types log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); Click the block to execute the code Generate test string log.profile( 'generate test string' ); var testContent = ''; for ( var i = 0; i < 3000; i++ ) { testContent += '-'; } log.profile( 'generate test string' ).. 더보기 jQuery의 성능을 높힐 수 있는 10가지 방법들 항상 최신 버전의 라이브러리를 사용하라. 스크립트를 최대한 결합시키고 축소하라. $.each() 대신에 for()문을 사용하라. 클래스명 대신에 아이디명을 사용하라. 현재 개체를 지정하라. $(expression, context) 이런 문맥으로.. 엘리먼트를 variable에 담자. (안그러면 루프문에서는 속도저하의 주범) DOM 조작을 피하라. 긴 문자열 연결에는 concat() 보다 join() 을 사용하자. return false 구문 사용. 치트시트나 라이브러리를 참조하라. 원본 http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ 성능에 관하여 다룬 또 다른 주소.. 더보기 IBM 디벨로퍼 웍스에 소개된 jQuery IBM 디벨로퍼 웍스에 소개된 글들입니다. 시간을 내서 한 번씩 읽어보세요. http://www.ibm.com/developerworks/kr/views/web/libraryview.jsp?sort_by=&show_abstract=true&show_all=&search_flag=&topic_by=-1&type_by=모든+종류&search_by=jquery&가기.x=0&가기.y=0 밑에 있는 3개는 먼저 읽어 보신 후에 다른 위의 링크로 들어가서 읽어보세요 jQuery로 Ajax 개발을 단순화 하기Ajax와 DOM 스크립팅을 쉽게 하는 방법 http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html 고급 jQuery(1)좋은 애플리케이션을 우수한 애플리.. 더보기 jQuery Tree view http://abeautifulsite.net/2008/03/jquery-file-tree/#demo http://jquery.bassistance.de/treeview/demo/ 더보기 jQuery 플러그인 제작 플러그인/저작 jQuery는 메소드와 함수를 플러그인으로 넣을 수 있는 방법을 제공합니다. 기본적으로 다운로드 되는 대부분의 메소드와 함수들은 jQuery 플러그인 구조를 이용해 만들어져 있습니다. 플러그인은 두 단계를 거쳐 만듭니다. 첫번째는 공용(public) 함수와 메소드를 작성하는 것입니다. 예를 들면 아래와 같습니다. jQuery.fn.debug = function() { return this.each(function(){ alert(this); }); }; jQuery.log = function(message) { if(window.console) { console.debug(message); } else { alert(message); } }; 코더들은 다음과 같이 당신의 새 플러그인을 호출.. 더보기 jQuery 1.4.2 delegate jQuery 1.4.2에 두 가지의 메서드가 추가되었습니다. .delegate()와 .undelegate()가 그것인데요. .undelegate()는 그냥 .delegate()의 해제 메서드이므로 .delegate()를 가지고 알아보려고 합니다. .delegate()는 .live()를 대신하여 추가된 메서드입니다. .delegate()와 .undelegate()는 특정 루트와 특정 이벤트에 대한 처리를 단순화 합니다. 그리고 기존의 .live()의 단점을 보안하였습니다. 사실 1.3버전에 추가된 .live()는 .bind()를 사용함에 있어서 보다 더 유연하게 이벤트에 접근할 수 있었습니다. 기존에는 동적으로 생성되는 엘리먼트에 이벤트를 걸려면 재 .bind()를 해야 하는 번거로운 작업이 필요했습니다... 더보기 jQuery 괜찮은 사이트 참조: http://simulz.com/category/PC%26웹/웹프로그래밍 더보기 jQuery 를 이용한 페이지 새로 고침 방지하기 보호되어 있는 글입니다. 더보기 jQuery DOM 조작 간단 정리 보호되어 있는 글입니다. 더보기 정말 헷갈리는 jQuery 요소 다루기 보호되어 있는 글입니다. 더보기 jQuery 플러그인 만들기 jQuery 홈페이지에 있던 플러그인 제작 방법에 관한 문서입니다. 플러그인을 제대로 된 형태에 맞춰 작성하게 되면 범용성, 재사용성도 높아지고 코드도 보기 좋아지죠^^ 읽기 귀찮으실 분들이 혹 있을지도 몰라서 번역해봤습니다. 아무래도 영어실력도 국어실력도 짧은 터라 오히려 더 읽기 어려울지도 모르겠지만... 원본 글은 여기를 클릭해서 볼 수 있습니다. - LazyGyu 플러그인/저작 jQuery는 메소드와 함수를 플러그인으로 넣을 수 있는 방법을 제공합니다. 기본적으로 다운로드 되는 대부분의 메소드와 함수들은 jQuery 플러그인 구조를 이용해 만들어져 있습니다. 플러그인은 두 단계를 거쳐 만듭니다. 첫번째는 공용(public) 함수와 메소드를 작성하는 것입니다. 예를 들면 아래와 같습니다. jQuer.. 더보기 jQuery의 append와 appendTo 차이점 aaa bbb ccc ddd append와 appendTo의 차이점: $(obj).append(some); 하면 some 객체를 obj 의 가장 마지막 자식객체로 등록한다는 말이고 $(obj).appendTo(some); 하면 obj 객체를 some 객체의 가장 마지막 자식객체로 등록한다는 말이다. 그리고 위에보면 each 라고 있는데 이것은 jQuery 객체에 내장된 함수다 피라미터로 function을 넘겨야하는데 function 안에서 this 라고 하면 현재의 dom 객체를 참조한다 근데 dom 객체 자체로는 기능이 별로없으므로 $(this) 이렇게 사용하는것이다. $(this) 이것은 jQuery 객체를 리턴한다. 출처: http://boast.tistory.com/entry/jQuery-초간단하.. 더보기 jQuery Selector 강력한 jQuery Selector. javascript 의 원래 문법에 비해 너무도 강력한 css style 의 selecting 을 지원한다. 하지만 css 엔진을 이용하는 것이 아니고, 원래의 javascript 접근방식으로 재해석하여 동작하는 것이므로, jQuery 가 어떻게 selecting 해 올지 예상하는것이 필요하다. 그렇지 않으면 모든 dom 객체를 수십번 훑는 막장 코드가 나올지도 모른다. 일단 js 에서 dom 객체를 선택하는 방법을 생각해 보자. document.name getElementById() getElementsByName() getElementsByTagName() getElementsByClassName() getElementsByClassName() 의 경우 최신의 몇.. 더보기 jQuery Select # 기본 셀렉터 * : 모든 엘리먼트와 일치 E : 태그명이 E인 모든 엘리먼트와 일치 E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치 E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치 E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치 E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치 E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치 E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함 E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함 E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치 E[A=V] : 값이 V인 .. 더보기 jQuerify Bookmarklet Someone recently asked if it was possible to somehow include jQuery in Firebug for testing jQuery code on web pages that don't already have it included. It's not only possible to include the jQuery source right from the Firebug console, but you can also add a bookmarklet to your Bookmarks toolbar for one-click jQuery action! Here is an example of what you could type into the Firebug console, lin.. 더보기 jQuery Plugins jQuery - JavaScript Framework (Library) [HOME] jquery.com Google Hosting [UI] ui.jquery.com ui.jquery.com/themeroller/ [PLUG-IN] plugins.jquery.com [ 240 plugins jQuery ] [PPT] presentation - jQuery for Designers , jQuery Tutorials for Designers [HOWTO] - jQuery API Browser - Visualjquery.com - jQuery Selectors - www.learningjquery.com - Beginner jQuery Tutorials - jQuery and JavaScript Coding: .. 더보기 15 Great jQuery Plugins For Better Table Manipulation Table is the most difficult object to be styled, due to its browser compatibility and markup. Most of the designers and developers will use div to replace table because it is much more easier to style div than table. But, we still need table in our daily applications, one of the best example is comparison table. This article will share 15 useful jQuery table plugins for you to display, sort, fil.. 더보기 Handling Keyboard Shortcuts in JavaScript Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have cr.. 더보기 How to Make a Smooth Animated Menu with jQuery Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu and animate it with some smooth effects. The Goal - One Smooth MenuHere’s a demo of what we’ll end up with by the end. Introduction - An explanation of easingThe menu has such a smooth animation because of a thing called “easing”. Adobe’s definition in the .. 더보기 jQuery Plugin File upload Ajax File Upload jQUploader Multiple File Upload plugin jQuery File Style Styling an input type file Progress Bar Plugin Form Validation jQuery Validation Auto Help Simple jQuery form validation jQuery XAV - form validations jQuery AlphaNumeric Masked Input TypeWatch Plugin Text limiter for form fields Ajax Username Check with jQuery Form - Select Box stuff jQuery Combobox jQuery con.. 더보기 이전 1 다음