기존에 div등을 이용한 팁이 있지만, jQuery로 간단하게 적용할 수 있습니다.
변경전 :
변경후 :
사용방법 :
1. 첨부파일을 다운 받습니다.
2. 다음 두개의 스크립트 파일을 인클루드 시킵니다.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.filestyle.js" type="text/javascript"></script>
3. 적당한 곳에 다음 코드를 입력합니다.
$("input[type=file]").filestyle({
image: "choose-file.gif",
imageheight : 22,
imagewidth : 82,
width : 250
});
1. jQuery 기본
jQuery 래퍼
// HTML조각 묶기
$(“<P>What’s cooking?</P>”);
// 조각을 도큐먼트 끝에 추가
$(“<P>What’s cooking?</P>”).appendTo(“body”);
//도큐먼트내의 모든 <div>요소를 조작하기 위한 래핑
$(“div”)
// someId란 id를 가진 DOM요소를 래핑
$(“#someId”)
// someClass란 이름을 가진 CSS를 처리하기 위해 타입과 상관없이 모든 요소를 래핑한다.
$(“.someClass”)
jQuery 연산을 연결하기
// id가 somdting인 요소에 CSS를 추가하고 보여준다.
$(‘#something’).addClass(‘someClass’);
$(‘#something’).show();
è $(‘#something’).addClass(‘someClass’).show();
// onload보다 먼저 실행됨
$(document).ready(function);
è $(function);
jQuery 와 Prototype을 함께 사용하기
// $전역이름을 JQuery라이브러기가 로드된 이후 Prototype로 되돌리기
jQuery.noConflict()
// Prototype과 함께 사용할 때 별칭을 선언하여 사용 권고
var $j = jQuery;
이벤트 처리
다운로드 : http://docs.jquery.com/Downloading_jQuery 이곳에서 최신버젼(1.2.6)을 다운로드 받아 소스에 추가한다.
1. HMTL로드시 수행하는 코드
(1)자바스크립트
window.onload = function(){
alert("시작");
}
(2)jQuery
$(document).ready(function(){
alert("시작");
});
2. 객체 클릭시 이벤트 발생(a태그를 클릭했을시 해당 스크립트가 동작한다.)
(1)자바스크립트
<html>
<head>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
window.onload = setObjects;
function setObjects(){
var aTag = document.getElementsByTagName("a")[0];
aTag.onclick = function(){
alert("welcome");
//이벤트 발생을 막는 부분이다.
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
//이벤트 발생 막는 부분 끝
}
}
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
(2)jQuery
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting");
event.preventdefault();
//event는 해당 태그의 이벤트를 넘겨받고 preventdefault()를 적용하면 해당이벤트는 동작하지 않는다.
//고로 링크된 페이지로 이동하지 않는다.
});
});
CSS의 제거.
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").addClass("test"); //a태그에 class로써 test를 추가한다.
$("a").removeClass("test"); //a태그에 class test를 제거한다. (우선 이줄을 제거한 상태에서 실행시켜보자)
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
[출처] 2. jQuery기초(2) (자바를 통하여 세계로) |작성자 세피룸
글자가 천천히 사라지는 효과
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault(); //이벤트 발생을 막는다(링크페이지로 이동안함)
$(this).hide("slow"); //this현재 이벤트가 발생한 객체를 받는다.
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
*********************************************************************************************
<input type="text" size="10"/> 이런식으로 태그를 추가하고 $("a")를 $("input")으로 변경 후 해보자!!
The Magic of jQuery
<html>
<head>
<style type="text/css">
a.test{
font-weight : bold;
}
</style>
<script type="text/javascript" src="D:/Util/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
$("a").addClass("test").show().html("foo"); //show()메소드는 a태그를 보여준다. 아래코드에서 class명이 hideme인 a태그를 하나더 추가해보고 테스트 해보면 알 수 있다.
$("a")
.filter(".clickme") //a태그의 class명이 clickme인 것만을 걸러낸다.
.click(function(){
alert("You are now leaving the site.");
})
.end() //첫번째 마법의 끝을 알린다.
.filter(".hideme") //a태그의 class명이 clickme인 것만을 걸러낸다.
.click(function(){
$(this).hide(); //이벤트가 발생한 객체를 숨긴다. (아까 했던 slow를 인자로 주면 천천히 사라진다.)
return false; //링크이벤트를 취소한다.
})
.end();
});
});
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a><br/>
<a href="http://google.com/" class="clickme">I give a message when you leave</a><br/>
<a href="http://yahoo.com/" class="hideme">Click me to hide!</a><br/>
<a href="http://microsoft.com">I'm a normal link</a>
</body>
</html>
2008/12/06 21:44
Posted by 필소굿 Posted in " 인터넷&블로그/jQuery "
설치형 Textcube의 새 티켓 "Dojo를 jQuery로 대체하기"와 관련하여 자바스크립트를 좀 더 활용하기 위해 jQuery를 배워보기로 하고, 결과물들을 정리해 봅니다. 오늘은 첫 날이므로 jQuery에 대한 간단한 소개, 간단한 스크립트를 소개하겠습니다(아주 아주 기초적인. 저도 잘 모르기 때문에.).
jQuery는 자바스크립트/Ajax 프레임웍이며 자체가 한 파일로 이루어져 가벼우며 다수의 플러그인을 사용할 수 있어 확장성도 뛰어나다. 현재 1.2.6버전까지 개발되어 있고 워드프레스에서 적용하고 있으며 prototype에 비해 구문이 쉽고 속도가 빠른 편이라 최근에 각광받고 있다.
지금까지 간단히만 자바스크립트를 뚝딱거리다가(팝업 윈도를 만든다거나 책에 있는 Ajax 예제를 그대로 옮겨 쓰면서 class명과 id만 겨우 바꾸는 수준) 제대로 프레임웍을 다뤄 보게 되었습니다. 아직 교재도 없지만서도 jQuery.com의 영문 도큐먼트를 하나씩 천천히 읽어가며 다뤄보겠습니다.
jQuery를 시작하기 위해서는 다른 스크립트와 마찬가지로 html 문서 첫부분에 jQuery.js를 임포트하여야 합니다. js 파일을 해당 서버에 저장할 수도 있겠지만, jQuery.com의 js 파일을 로드해 봅니다.
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
레퍼런스에 의하면 모든 개체들이 로드되고 난 다음에 스크립트를 적용하기 위해 jQuery에서는 'ready event'를 지정하여, 완전히 로드가 된 후 부터 프로그램을 시작합니다.
$(document).ready(function() {
// do stuff when DOM is ready
});
DOM(Document Object Model)에 의하면 모든 태그와 각 태그의 class, id 속성 등으로 접근하려면 일반적인 환경에서는 getElementById 또는 getElementsByTagName 등으로 접근했는데, jQuery에서는 쉽게 $(" ") 형태로 접근합니다.
간단히, 이 문단을 클릭해 보면 메시지가 뜨는 예제를 소개하겠습니다.
$(document).ready(function() {
$("p.select").click(function() {
alert("Hello world!");
});
});
ready 이벤트로 문서를 모두 로드한 뒤, p(문단) 중에서 class가 select인 문단을 click하여 { } 사이에 있는 구문(경고창 실행)이 실행되는 구조입니다. 변수를 하나 잡고, 글자가 날까 말까 조마조마하며 썼던 getElementsBy~ 보다 훨씬 간편한 느낌입니다. 이런 접근법으로 지정한 부분의 내용을 추가하거나 CSS를 변경하는 예제입니다.
$(document).ready(function() {
$("#orderedlist").find("li").each(function() {
$(this).append( " BAM! ");
$(this).css("background", "#c3e1a7");
});
});
id가 orderedlist인 레이어의 li 태그css에 의해 배경색을 바꾸고, append에 의해 내용을 추가하고 있습니다.
다음은 토글 클릭으로 내용이 보였다 숨는 예제입니다.
$("#sh").toggle(function(){
$(".stuff").hide('slow');
},function(){
$(".stuff").show('slow');
});
click me
opened
위 예제는 다양하게 많이 사용되고 있지요? 간단한 조작으로 좀 더 효과적인 레이어 이동 효과를 줄 수 있네요. 더 많은 효과(페이드, 애니메이션 등)를 위해 jQuery.com의 API > Effect 절을 참고하세요. 다음에 소개할 때에는 좀 더 jQuery의 핵심과 관련있는 내용을 더 찾아보겠습니다. 기다려주세요-:)
jQuery/Core란?
jQuery/Core란 jQuery의 핵심이 되는 것을 의미한다. 그만큼 우리가 jQuery를 사용할 때 많이 사용되는 부분이기도 하다.
하지만 Core라고해서 어려울것은 없고, 의외로 간단하다. Core를 표현하면 "$()"이렇게 된다.
참고로,
jQuery를 표현할 때 두가지가 있는데 한가지는 "jQuery(document).ready()" 이렇게 "jQuery"를 사용하는 방법과 "$(document).ready()" 처럼 "$"로 사용하는 방법이 있다. 이것은 사용자 취향에 맞게 선택해서 사용하면 된다.
정확한 개념을 알고 싶으신 분은 http://docs.jquery.com/Core 여기로 가시면 자세히 알 수가 있다. 하지만 저 처럼 영어에
약하신 분들은 이렇게 이해를 하시면 된다.
그럼 이제 사용법에 대해서 한번 살펴 봅시다.
jQuery 사용법
여기서 사용되는 예제나 API는 http://docs.jquery.com/ jQuery공식 사이트에서 발췌한 것임을 미리 말씀드리고 시작합니다.
1. jQuery( expression, context )
: expression는 String로 표현되고 특정 태그를 찾을때 사용되며, context는 Element나 jQuery으로 인자 값으로 받는다.
즉, $("input:radio", document.forms[0]); 이와 같이 사용된다.
2. jQuery( html )
: jQuery는 인자값으로 html 태그를 받아 그 태그를 HTML페이지에 추가를 할 수가 있다.
즉, 이렇게 $("<div><p>Hello</p></div>").appendTo("body") 사용이 되기도 하고, $("<input/>").attr("type", "checkbox");
이렇게도 사용되기도 한다.
풀이 하자면 첫 번째는 "body"안에 "<div><p>Hello</p></div>"를 삽입(appendTo()는 특정 태그에 사입할 때 사용 )한다는
애기고 두번째는 "input"를 생성하되 "type=checkbox"로 하여 태그를 생성하게 된다. 두번째는 HTML 마지막 부분에 삽입이
된다.
3. jQuery( elements )
: DOM element(s) 를 인자로 받아 그 지역의 elements를 설정할 수가 있다.(한개 혹은 다수를 지정할 수가 있다.)
$(document.body).css( "background", "black" ); -> HTML 배경색을 검정색으로 바꾼다.
$(myForm.elements).hide() -> myForm의 이름을 가진 form안의 elements을 숨긴다.
4. jQuery( callback )
: 이것은 인자값을 함수로 지정을 할 수가 있다는 애기로 jQuery를 처음 시작하는 부분에서 많이 접해 봤을 것이다.
즉, "$(document).ready(function(){....};)" 이 부분
이렇게 사용하는 것은 특정 이벤트가 발생할 때 그 부분을 함수로 처리 하기 위해서 이다. 예를 들어 마우스를 클릭시
경고창을 띄워주고 싶다면 아래와 같이 하면 된다.
"$(document).click(function(){
alert("마우스가 눌려짐!!");
};)"
- jQuery Object Accessors
이번에는 직접 오브젝트를 엑세스할 수 있는 jQuery에 대해서 알아 본다. 뭐, jQuery 홈페이지에 가면 다 나와 있는 것들이긴 하지만 그래도 본좌의 나름 해석판을 듣고 싶다면 계속 봐도 된다. 다만, 본좌도 영어가 짧기 때문에 직접 실행해 봐서 이해 하기도 한 부분도 있고 이리저리 찾아 다니면서 알아낸 것 들도 있다. 그래서 영어 잘하시는 분 들이 봤을 경우 영 아니다 싶으면 자세히 답변을 남겨 주시면 참고하여 수정토록 하겠음...
그럼 오브젝트를 엑세스 할 수 있는 jQuery 에 대해서 알아 봅시다.
1. each( callback )
: 해당 오브젝트에서 어떤 함수처리를 하고 싶을 경우 사용된다. 코드를 직접 보면 이해가 쉽게 된다.
$(document.body).click(function() {
$("div").each(function (i) {
// 클릭 이벤트가 발생 되었을 경우 "div"태그에서만 글 색상을 변경하도록 한다.
if (this.style.color != "blue") {
this.style.color = "blue";
} else {
this.style.color = "";
}
});
});
이 코드를 실행 시키면 클릭 할때마다 색깔이 변경이 된다. 참고로 이 코드는 "body"안의 모든"div"태그를 뜻한다. 특정 "div"
에서만 이벤트가 발생되기를 원하시면 그 태그의 인덱스를 찾아야 할 것이다.
2. size()
: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").size();
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).click(); // trigger the click to start
3. length()
: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다. size()와 동일하다.
$(document.body).click(function () {
$(document.body).append($("<div>"));
var n = $("div").length;
$("span").text("There are " + n + " divs." +
"Click to add more.");
}).trigger('click'); // trigger the click to start
4. eq( position )
: 해당 포지션에 위차한 태그를 찾는다. 한마디로 아파트로 비교하자면 몇호실을 찾는지와 같다. "405호실를 청소해라!"라는
명령이 있다면 그 아파트의 "405호실"을 찾아가서 거기만 청소를 하면 된다. 구지 다른곳도 청소할 필요가 없다는 것이다.
position의 위치는 0 부터 시작해서 -1까지다.
$("p").eq(1).css("color", "red"); // "p"태그에서 1(0 부터 시작하므로 두번째를 의미한다.)번지에 해당하는 "p"를 변경한다.
5. get()
: 해당 태그의 Elements 들을 Array형태로 리턴한다. 즉, '$("div").get() 하면 모든 div태그 들을 Array 형태로 리턴한다.'
한마디로 하면 DOM의 Elements를 배열로 리턴하는 것이다.
function disp(divs) {
var a = [];
for (var i = 0; i < divs.length; i++) {
a.push(divs[i].innerHTML);
}
$("span").text(a.join(" "));
}
disp( $("div").get().reverse() ); // div태그의 값들을 읽어 와서 그 값의 순서를 뒤집는다.
// 예를 들어
// <div>1</div><div>2</div><div>3</div> 이 있으면 reverse() 하면 3, 2, 1로 순서가 뒤집히게 된다.
6. get( index )
: index에 해당되는 위치의 element을 가져온다. 즉, 단일 element를 가져 오게 되는 것이다.
$("*", document.body).click(function (e) { // body안의 모든 Elements에서 클릭 이벤트가 발생되면.
e.stopPropagation();
var domEl = $(this).get(0); // 클릭된 태그의 Elements중 0번지에 해당하는 Element를 가져온다.
$("span:first").text("Clicked on - " + domEl.tagName); // 0번지의 태그이름을 출력한다.
});
이해하는데에는 어렵지 않을 것이다. 프로그래밍을 하다보면 위와 비슷한 함수를 많이 접해 보기 때문이다.
7. index( subject )
: subject의 인덱스 번호를 찾는다. 인덱스 번호도 0부터 시작된다.
$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this); // "div"태그에서 클릭이벤트가 발생 될경우 그 "div"태그의 인덱스 찾아서 리턴한다.
$("span").text("That was div index #" + index);
});
jQuery/Core에 대해서는 여기서 마무를 하겠다. 이 외에도 Data Cash, Plugins에 대한 것도 있지만 아직은 다루지 않겠다.
시간이 짬짬이 날때 마다 글을 남기곤 있지만 회사 일도 바쁘다 보니 쉽게 글을 쓰지 못하는 것도 없지 않아 있다.
이 글을 쓰면서 예제 코드도 함께 올리려고 했는데 너무 도둑놈이 되는것 같아서 간단하게만 소개만 하였다. 뭐 본좌 나름대로
예제소스를 만들어 올리면 되지만...... 그렇게 하려면 시간이 많이 소모가 되고.... 잘못하다가는 회사에서 짤릴까봐 안했음..^^
다음은 Selector에 대해서 알아 볼 것이다. 나의 허접강의는 계속 된다..쭈욱~~~ ^^b
[출처] 4. jQuery 기초(4) jQuery의 마법 (자바를 통하여 세계로) |작성자 세피룸
[출처] 3. jQuery기초(3) (글자가 처천히 사라지는 효과) (자바를 통하여 세계로) |작성자 세피룸
[출처] 1. jQuery 기초 (자바를 통하여 세계로) |작성자 세피룸
 |
 |
안녕하세요?
최근 가장 인기있는 자바스크립트 라이브러리는 jQuery입니다.
MS도 ASP.NET MVC에 jQuery를 포함시킬 예정입니다.
이미 시중에 jQuery 책이 번역되어 나와 있지만,
IBM 사이트에서 jQuery 강좌를 번역해서 연재하고 있으니까
이것을 먼저 보시는 것도 좋으리라 생각합니다.
jQuery로 작업하기, Part 1: 브라우저로 데스크톱 응용 옮기기
jQuery로 작업하기, Part 2: 내일 나올 웹 응용을 오늘 구현해보자
jQuery로 Ajax 개발을 단순화 하기
jQuery로 작업하기, 3부: jQuery와 Ajax로 RIA 만들기
Ajax로 사이트 전면 개편, Part 1: Ajax와 jQuery로 기존 사이트 개선하기Ajax로 사이트 전면 개편, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기
Ajax로 사이트 전면 개편, Part 3: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기
Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기
예> a#myID.myClass
- 아이디가 myID이고 myClass를 클래스로 가지는 <a> 링크 태그와 일치하는 실렉터
p a.myClass
- <p> 엘리먼트 안에 myClass를 클래스로 가지는 모든 <a> 엘리먼트와 일치하는 실렉터
2. 계층 실렉터
3. 기본 필터 실렉터
4. 내용 필터 셀렉터
5. 가시 필터 셀렉터
6. 속성 필터 셀렉터
7. 자식 필터 셀렉터
8. 폼 셀렉터
9. 폼 필터 셀렉트
그러나 이런 CSS 셀렉터 사용법을 좀더 잘 사용하면 처리속도의 향상을 가져옵니다.
여기에서 jQuery의 내부 처리와 같은 코드를 보고, jQuery를 빠르게 사용하기 위한 TIP 5 를
소개하고자 합니다.
1. 여러번 같은 실렉터를 실행하지 않는다.
2. 클래스만으로 지정하는 것을 금지한다.
3. #id 의 사용을 적극 권장한다.
4. 도중까지 결과를 재이용 한다.
5. 자식 셀렉터(>)를 잘 사용하면 처리가 빨라진다.
1. 여러번 같은 실렉터를 실행하지 않는다.
ㅁ 개선전
ㅁ 문제점
jQuery는 CSS 셀렉터를 쓸 때마다 DOM에서 셀럭터와 일치하는 엘리먼트를 찾습니다.
$("div.foo") 실행하면 뒤에서 jQuery는 아래과 같은 작업을 처리합니다.
var ret = [];
// div 태그 목록을 열거
var elems = document.getElementsByTagName("div");
// 각각 클래스명이 foo 의 것을 ret 에 추가
for(var i = 0; i < elems.length; i++){
var classes = elems[i].className.split(" ");
if(classes.indexOf("foo") != -1){
ret.push(elems[i]);
}
}
| CSS 셀렉터 |
FireFox 2 |
IE7 | Opera9 | Safari(win) |
| .body | 22.18ms | 19.85.ms | 5.32ms |
2.49ms |
| div.body | 2.34.ms | 2.82.ms | 1.24ms |
0.49ms |
| #days >div.day>div.body | 2.66.mx | 1.72ms | 1.25ms |
0.44ms |
매우 심플한 Lightbox 플러그인.
이미지 뿐아니라 텍스트도 표시할 수 있는 팝업창.
Lightbox 클론
이미지나 Youtube의 동영상 폼 등 가능.
이름과 같이 매우 심플한 모달창
돋보기 기능, 이미지를 확대(zoom) 기능
부동산 중개에서 물건 소개등에서 사용할 법한, 가상 투어 기능
썸네일 이미지들의 움직임이 좋은 포토 슬라이더
슬라이더 쇼 플러그인
세로형 가로형 슬라이더 지원
이미지를 클릭하면 다음 이미지가 슬라이드 되는..
이미지에 그림자 효과를 주는 플러그인
맥(Mac)의 Dock 모양의 메뉴
각 메뉴 항목에 마우스 오버시 라바램프 같은 둥근 이미지 표시
메뉴가 스라이드 되어 나옴.
플다운 메뉴
아코디언 메뉴 UI
멋진 폼을 만들어 보기
커스텀 셀렉트 상자
커스텀 체크박스
커스텀 콤보 박스
입력상자에 안내 텍스트가 표시되고, 클릭하면 숨기기
정렬 가능한 테이블
드래그 앤 드롭 테이블
값에 따라 배경색을 변경할수 있는 플러그인. 테이블 이외도 사용 가능.
오른쪽 양식에 따라 페이지를 전환
위자드 플러그인
다양한 유형의 툴팁.
차트 플러그인
칼라 픽커 플러그인
또다른 컬러픽커
진행률 막대(프로그래스바) 플러그인
51 종류의 jQuery 예제.
많은 플러그인 나열
jQuery 뿐만 아니라 다양한 프레임웍 소개 사이트
안녕하세요?
최근 가장 인기있는 자바스크립트 라이브러리는 jQuery입니다.
MS도 ASP.NET MVC에 jQuery를 포함시킬 예정입니다.
이미 시중에 jQuery 책이 번역되어 나와 있지만,
IBM 사이트에서 jQuery 강좌를 번역해서 연재하고 있으니까
이것을 먼저 보시는 것도 좋으리라 생각합니다.
http://www.ibm.com/developerworks/kr/library/wa-jquery1/index.html
http://www.ibm.com/developerworks/kr/library/wa-jquery2/index.html
http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html
http://www.ibm.com/developerworks/kr/library/wa-aj-overhaul1/index.html
http://www.ibm.com/developerworks/kr/library/wa-aj-overhaul2/index.html
이 글이 도움이 되었으면 좋겠네요..
http://www.ibm.com/developerworks/kr/library/wa-jquery1/index.html
http://www.ibm.com/developerworks/kr/library/wa-jquery2/index.html
http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html
http://www.ibm.com/developerworks/kr/library/wa-aj-overhaul1/index.html
http://www.ibm.com/developerworks/kr/library/wa-aj-overhaul2/index.html
-light box(이미지 미리보기,pre,next) : http://leandrovieira.com/projects/jquery/lightbox/
-이미지 스크롤 : http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/
-이미지 싸이클 : http://www.malsup.com/jquery/cycle/
-BlockUI Plugin(processing,처리중 등등,confirm!) : http://www.malsup.com/jquery/block/#element
-UI Modal : http://jquery.com/demo/thickbox/
-플래쉬 플러그인 삽입 : http://jquery.lukelutman.com/plugins/flash/#examples
-Photo Slider Tutorial : http://opiefoto.com/articles/photoslider#example
-jScrollPane : http://kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
-Accessible News Slider : http://www.reindel.com/accessible_news_slider/#examples
- unobtrusive tabs(탭메뉴) : http://stilbuero.de/jquery/tabs/#fragment-29
http://www.sunsean.com/idTabs/#t3
-jQuery Ajax Link Checker : http://troy.dyle.net/linkchecker/
-jQuery Form Plugin : http://malsup.com/jquery/form/#code-samples
-jquery.suggest, an alternative jQuery based autocomplete library(자동완성)
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
http://nodstrum.com/2007/09/19/autocompleter/
-jlook(폼객체 리뉴얼) :
-jQuery - LinkedSelect(멀티 select) :
http://www.msxhost.com/jquery/linked-selects/json/
-Masked Input Plugin : (입력포맷 확인)
http://digitalbush.com/projects/masked-input-plugin
http://www.appelsiini.net/projects/jeditable/default.html
-Overlabel with JQuery(박스안에 워터마킹처리) : http://scott.sauyet.com/xxJavascript/Demo/Overlabel/
-Styling an input type="file"(파일찾기 이미지 처리)
http://www.quirksmode.org/dom/inputfile.html
-jQuery UI Datepicker v3.0 Examples(달력)
http://marcgrabanski.com/code/ui-datepicker/
-jQuery Validation Plugin(폼체크,포커싱)
http://jquery.bassistance.de/validate/demo-test/
http://www.texotela.co.uk/code/jquery/focusfields/
-jQuery columnHover plugin(컬럼 하이라이트/컬럼 컨트롤)
http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html
-tablesorterDocumentation(테이블 순서)
http://tablesorter.com/docs/index.html
-jQuery Accordion Demo(컨테이너 예제)
http://jquery.bassistance.de/accordion/?p=1.1.1
-jQPanView based in jQuery 1.1(이미지 확대보기)
http://projects.sevir.org/storage/jpanview/index.html
-jQuery Impromptu(confirm!,alert! 등등)
http://trentrichardson.com/Impromptu/
-jqGrid Examples(그리드)
http://trirand.com/jqgrid/jqgrid.html#
-Toggle HTML-Elements with jQuery
http://jquery.andreaseberhard.de/toggleElements/
-UI/Sortables(테이블 위치변경 ^^)
http://docs.jquery.com/UI/Sortables
-뉴스 슬라이더(부분보기,전체보기)
http://www.reindel.com/accessible_news_slider/
-로컬 스크롤러
http://www.freewebs.com/flesler/jQuery.LocalScroll/
-핫키 테스트
http://jshotkeys.googlepages.com/test-static.html
-슬라이더
http://docs.jquery.com/UI/Slider/slider
-쇼핑카트
http://www.mimul.com/pebble/default/2007/10/30/1193753340000.html
-테이블 소트
http://www.mimul.com/pebble/default/2007/11/06/1194348600000.html
-이미지 나중에 로딩시키기 http://www.mimul.com/pebble/default/2007/11/10/1194695220000.html
-오토탭(입력시 폼객체 자동넘김)
http://dev.lousyllama.com/autotab/
-실시간 폼객체 수정
http://www.appelsiini.net/projects/jeditable/custom.html
-프린트
http://www.designerkamal.com/jPrintArea/#
-차트
http://www.reach1to1.com/sandbox/jquery/jqchart/
-CSS Dock Menu (Jquery + CSS)
후니넷에서 보삼
-툴팁
http://www.codylindley.com/blogstuff/js/jtip/
-XML데이터 뿌리기
http://blog.reindel.com/src/jquery_browse/
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
http://www.mimul.com/pebble/default/2006/11/05/1162710000000.html
-Clearing Form
http://www.learningjquery.com/2007/08/clearing-form-data
--암호 복잡성 체크
http://phiras.googlepages.com/PasswordStrengthMeter.html
--Form Serialize
http://dev.jquery.com/wiki/Plugins/FastSerialize
--GetString 퍼라미터 가져오기
http://www.mathias-bank.de/2006/10/28/jquery-plugin-geturlparam/
--검색 후 콤보생성(ajax with combo) 아주 유용함
http://extjs.com/deploy/ext/examples/form/forum-search.html
http://extjs.com/deploy/ext/examples/grid/edit-grid.html-->그리드
--파일 업로드(input=file) 리폼
http://www.appelsiini.net/projects/filestyle/demo.html
Jquery Best
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/
웹디자인 템플릿트(2.0)
-http://www.templateworld.com/free_templates.html
----------------------------------------
Jquery tag cloud
http://www.ajaxrain.com/tagcloud.php
Jquery 기본설명
http://www.zzbb.kr/34
----------------------------------------
^^Star Rater(순위) --활용가능성 높음
http://www.m3nt0r.de/devel/raterDemo/
^^ AJAX CALLING --활용가능성 높음
http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/
--AJAX 아이디 중복체크 - 활용가능성 아주높음
http://www.shawngo.com/gafyd/index.html
^^ jQuery framework plugins which provide a way to sort and nest elements in web applications, using drag-and-drop(테이블드래그앤드랍) --활용가능성 중간
http://code.google.com/p/nestedsortables/
^^Simple tableSorter(리스트 정렬) 활용가능성 중간
http://motherrussia.polyester.se/docs/tablesorter/
^^Cookie 활용가능성 높음
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
^^태깅 --그냥한번보자..ㅎ
http://www.alcoholwang.cn/jquery/jTaggingDemo.htm
^^죽이는 어코디언 메뉴
http://dev.portalzine.de/index?/Horizontal_Accordion--print
^^ AJAX Indicator 이미지
http://qureyoon.blogspot.com/2006/11/make-your-own-loading-gif.html
----------------------------------------
2007.12.28 찾은것
----------------------------------------
http://rikrikrik.com/jquery/quicksearch/#usage
http://nadiaspot.com/jquery/confirm!/#examples
http://host.sonspring.com/portlets/
http://jquery.andreaseberhard.de/toggleElements/
http://www.getintothis.com/pub/projects/rb_menu/
http://icon.cat/software/iconDock/0.8b/dock.html
http://www.nuernberg.de/internet/portal/index.html
http://rikrikrik.com/jquery/shortkeys/#examples
http://rikrikrik.com/jquery/pager/#examples
http://famspam.com/facebox/ --라이트박스같은것
http://www.andreacfm.com/
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/ --autocomplete
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html - 뉴스 스크롤
http://d-scribe.de/webtools/jquery-pagination/demo.htm# --페이징
http://tinymce.moxiecode.com/example_full.php?example=true --Open Source WYSWYG 웹 에디터
http://www.laptoptips.ca/projects/tinymce-advanced/ --Open Source WYSWYG 웹 에디터 advanced
http://extjs.com/ -또다른 RIA xxJAVASCRIPT 프레임워크
http://www.digital-web.com/extras/jquery_crash_course/ -jquery로 만든 비행 예약 시스템 데모(Passenger Management )
http://markc.renta.net/jquery/ --jquery 간단예제
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html?page=2 -jquery와 XML
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ -쿠키 플러그인
http://jquery.com/files/demo/dl-done.html --간단한 어코디언 메뉴
http://mjslib.org/doc/legacy/fieldgroup.html --폼필드 컨트롤
http://extjs.com/deploy/dev/examples/tree/two-trees.html --트리
http://www.amcharts.com/column/ - 차트(바로 사용^^)
http://particletree.com/features/rediscovering-the-button-element/ - 버튼 스타일링
http://www.i-marco.nl/weblog/jquery-accordion-menu/ - 실용성 높은 어코디언 메뉴
http://www.sastgroup.com/jquery/240-plugins-jquery
http://jquery.bassistance.de/jquery-getting-started.html
Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin
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
jQuery Combobox
jQuery controlled dependent (or Cascadign) Select List
Multiple Selects
Select box manipulation
Select Combo Plugin
jQuery - LinkedSelect
Auto-populate multiple select boxes
Choose Plugin (Select Replacement)
jQuery Form Plugin
jQuery-Form
jLook Nice Forms
jNice
Ping Plugin
Toggle Form Text
ToggleVal
jQuery Field Plugin
jQuery Form’n Field plugin
jQuery Checkbox manipulation
jTagging
jQuery labelcheck
Overlabel
3 state radio buttons
ShiftCheckbox jQuery Plugin
Watermark Input
jQuery Checkbox (checkboxes with imags)
jQuery SpinButton Control
jQuery Ajax Form Builder
jQuery Focus Fields
jQuery Time Entry
jQuery UI Datepicker
jQuery date picker plugin
jQuery Time Picker
Time Picker
ClickPick
TimePicker
Farbtastic jQuery Color Picker Plugin
Color Picker by intelliance.fr
jQuery Star Rating Plugin
jQuery Star Rater
Content rater with asp.net, ajax and jQuery
Half-Star Rating Plugin
jQuery Suggest
jQuery Autocomplete
jQuery Autocomplete Mod
jQuery Autocomplete by AjaxDaddy
jQuery Autocomplete Plugin with HTML formatting
jQuery Autocompleter
AutoCompleter (Tutorial with PHP&MySQL)
quick Search jQuery Plugin
jTagEditor
WYMeditor
jQuery jFrame
Jeditable - edit in place plugin for jQuery
jQuery editable
jQuery Disable Text Select Plugin
Edit in Place with Ajax using jQuery
jQuery Plugin - Another In-Place Editor
TableEditor
tEditable - in place table editing for jQuery
jMedia - accessible multi-media embedding
JBEdit - Ajax online Video Editor
jQuery MP3 Plugin
jQuery Media Plugin
jQuery Flash Plugin
Embed QuickTime
SVG Integration
ThickBox
jQuery lightBox plugin
jQuery Image Strip
jQuery slideViewer
jQuery jqGalScroll 2.0
jQuery - jqGalViewII
jQuery - jqGalViewIII
jQuery Photo Slider
jQuery Thumbs - easily create thumbnails
jQuery jQIR Image Replacement
jCarousel Lite
jQPanView
jCarousel
Interface Imagebox
Image Gallery using jQuery, Interface & Reflactions
simple jQuery Gallery
jQuery Gallery Module
EO Gallery
jQuery ScrollShow
jQuery Cycle Plugin
jQuery Flickr
jQuery Lazy Load Images Plugin
Zoomi - Zoomable Thumbnails
jQuery Crop - crop any image on the fly
jQuery Plugin googlemaps
jMaps jQuery Maps Framework
jQmaps
jQuery & Google Maps
jQuery Maps Interface forr Google and Yahoo maps
jQuery J Maps - by Tane Piper
Tetris with jQuery
jQuery Chess
Mad Libs Word Game
jQuery Puzzle
jQuery Solar System (not a game but awesome jQuery Stuff)
jQuery Grid Plugin
Table Filter - awesome!
TableEditor
jQuery Tree Tables
Expandable “Detail” Table Rows
Sortable Table ColdFusion Costum Tag with jQuery UI
jQuery Bubble
TableSorter
Scrollable HTML Table
jQuery column Manager Plugin
jQuery tableHover Plugin
jQuery columnHover Plugin
jQuery Grid
TableSorter plugin for jQuery
tEditable - in place table editing for jQuery
jQuery charToTable Plugin
jQuery Grid Column Sizing
jQuery Grid Row Sizing
jQuery Wizard Plugin
jQuery Chart Plugin
Bar Chart
jQuery Corner
jQuery Curvy Corner
Nifty jQuery Corner
Transparent Corners
jQuery Corner Gallery
Gradient Plugin
jQuery Spoiler plugin
Text Highlighting
Disable Text Select Plugin
jQuery Newsticker
Auto line-height Plugin
Textgrad - a text gradient plugin
LinkLook - a link thumbnail preview
pager jQuery Plugin
shortKeys jQuery Plugin
jQuery Biggerlink
jQuery Ajax Link Checker
jTip - The jQuery Tool Tip
clueTip
BetterTip
Flash Tooltips using jQuery
ToolTip
jQuery Tabs Plugin - awesome! [demo nested tabs]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin)
jQuery idTabs
jdMenu - Hierarchical Menu Plugin for jQuery
jQuery SuckerFish Style
jQuery Plugin Treeview
treeView Basic
FastFind Menu
Sliding Menu
Lava Lamp jQuery Menu
jQuery iconDock
jVariations Control Panel
ContextMenu plugin
clickMenu
CSS Dock Menu
jQuery Pop-up Menu Tutorial
Sliding Menu
jQuery Accordion Plugin Horizontal Way
haccordion - a simple horizontal accordion plugin for jQuery
Horizontal Accordion by portalzine.de
HoverAccordion
Accordion Example from fmarcia.info
jQuery Accordion Example
jQuery Demo - Expandable Sidebar Menu
Sliding Panels for jQuery
jQuery ToggleElements
Coda Slider
jCarousel
Accesible News Slider Plugin
Showing and Hiding code Examples
jQuery Easing Plugin
jQuery Portlets
AutoScroll
Innerfade
UI/Draggables
EasyDrag jQuery Plugin
jQuery Portlets
jqDnR - drag, drop resize
Drag Demos
XSLT Plugin
jQuery Ajax call and result XML parsing
xmlObjectifier - Converts XML DOM to JSON
jQuery XSL Transform
jQuery Taconite - multiple Dom updates
RSS/ATOM Feed Parser Plugin
jQuery Google Feed Plugin
Wresize - IE Resize event Fix Plugin
jQuery ifixpng
jQuery pngFix
Link Scrubber - removes the dotted line onfocus from links
jQuery Perciformes - the entire suckerfish familly under one roof
Background Iframe
QinIE - for proper display of Q tags in IE
jQuery Accessibility Plugin
jQuery MouseWheel Plugin
jQuery Impromptu
jQuery Confirm Plugin
jqModal
jQuery Style Switcher
JSS - Javascript StyleSheets
jQuery Rule - creation/manipulation of CSS Rules
jPrintArea
jQuery Dimenion Plugin
jQuery Loggin
Metadata - extract metadata from classes, attributes, elements
Super-tiny Client-Side Include Javascript jQuery Plugin
Undo Made Easy with Ajax
JHeartbeat - periodically poll the server
Lazy Load Plugin
Live Query
jQuery Timers
jQuery Share it - display social bookmarking icons
jQuery serverCookieJar
jQuery autoSave
jQuery Puffer
jQuery iFrame Plugin
Cookie Plugin for jQuery
jQuery Spy - awesome plugin
Effect Delay Trick
그리드 (*) : 전체 페이징을 하지 않는 Ajax 게시판
http://www.reconstrukt.com/ingrid/example2.html
팬시박스 (**) : 이미지 팝업창에 모달효과 약간의 에니메이션이 들어감.
http://fancy.klade.lv/ (****)
예제 : http://fancy.klade.lv/example
jQuery Lightbox Plugin (balupton edition) (**) : 이미지 모달 팝업
http://www.balupton.com/sandbox/jquery_lightbox/
imagebox : 이미지 모달 팝업
http://www.intelliance.fr/jquery/imagebox/
이미지 회전 : 이미지의 회전이 가능하게 한다.
http://www.piksite.com/mRotate/mRotate.html
jQuery sliding gallery demo : 이미지 애니메이션 슬라이드
http://phplug.net/components/javascript/jquery-gallery.html
이미지 슬라이딩 : 좌 우로 움직임
http://www.maxb.net/scripts/ycodaslider-2.0/include/demo/#10
이미지 공간감 효과 (***) : 여러 이미지를 레이어 겹쳐 놓음으로써 3D 효과를 준다.
http://webdev.stephband.info/parallax.html
디자이너를 위한 jquery (**) : 태그 조작과 에니메이션 효과와 관련된 사이트
http://www.webdesignerwall.com/demo/jquery/(****)
AutoScroll (*) : 컨트롤 키 누른 채로 mouse 움직였을 때, 자동 스크롤이 가능하게끔
http://jdsharp.us/jQuery/plugins/AutoScroll/demo.php (****)
drag and drop (*) : 드래그 드랍 예제
http://host.sonspring.com/dragdrop/ (***)
JQuery 예제 모음 사이트 (*****)
http://www.ajaxrain.com/tag?tag=jquery
컬럭 Picker (****) : PhotoShop의 색 선택 기능이 가능.
http://www.intelliance.fr/jquery/color_picker/
jQuery MultiSelect (**) : custom 셀렉트 박스, 셀렉트 박스에 체크박스가 추가 되어 여러개를 선택 가능한 박스.
http://abeautifulsite.net/notebook_files/62/demo/jqueryMultiSelect.html
"jQuery checkbox v.1.0.0" demo (**) : custom 디자인 체크박스
http://widowmaker.kiev.ua/checkbox/
jQuery Treeview Plugin Demo (**) : 트리 컨트롤러 1
http://jquery.bassistance.de/treeview/demo/
jQuery File Tree Demo (***) : JQuery 트리 컨트롤로 2
http://abeautifulsite.net/notebook_files/58/demo/
jQuery columnManager plugin (*) : 테이블의 컬럼을 추가 삭제등의 기능 제공
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html
jQuery AIR (***) : ajax를 이용한 항공 좌석 예약.
http://www.digital-web.com/extras/jquery_crash_course/
Masked Input Plugin (**) : 입력상자에 exel과 같은 서식 적용.
http://digitalbush.com/projects/masked-input-plugin
Watermark Input Plugin (*): 입력상자에 워터마크 표시
http://digitalbush.com/projects/watermark-input-plugin
ClockPick (***): 입력상자에 시간을 선택해서 넣을 수 있다.
http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm
chart : JQuery를 이용한 차트
http://www.reach1to1.com/sandbox/jquery/jqchart/
달력
http://tedserbinski.com/jcalendar/index.html#demo
3D로테이션 : 글자들이 xy 좌표에서 3D효과로 회전함.
http://www.willjessup.com/sandbox/jquery/rotator/rotator.html
스크롤중 데이터가져오기 :
http://www.webresourcesdepot.com/dnspinger/
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/
Query Flash Plugin - Basic Example : flash 삽입 플러그인
http://jquery.lukelutman.com/plugins/flash/example-basic.html
jquery combobox demo : custom 콤보박스 ie 7.0으로 보면 깨져나온다.
http://jquery.sanchezsalvador.com/samples/example.htm
scrollable table : 테이블에 스크롤바가 붙어있다-_-;;
http://www.webtoolkit.info/demo/jquery/scrollable/demo.html
accordion-madness
http://www.learningjquery.com/2007/03/accordion-madness
jQuery Multimedia Portfolio
http://www.openstudio.fr/jquery/
체크박스 이동
http://sanisoft-demo.com/jquery/plugins/shiftcheckbox/demo.html
위지윅에디터
http://projects.bundleweb.com.ar/jWYSIWYG/
크랍
http://remysharp.com/2007/03/19/a-few-more-jquery-plugins-crop-labelover-and-pluck/#crop
슬라이딩 퍼즐
http://www.bennadel.com/blog/1009-jQuery-Demo-Creating-A-Sliding-Image-Puzzle-Plug-In.htm
날짜픽업
http://kelvinluck.com/assets/jquery/datePicker/v2/demo/
레이팅
http://php.scripts.psu.edu/rja171/widgets/rating.php
JQuery Curvy Corners Demo page
http://blue-anvil.com/jquerycurvycorners/test.html
줌
http://www.mind-projects.it/blog/jqzoom_v10
LavaLamp for jQuery lovers!
http://gmarwaha.com/blog/?cat=8
컬러
http://www.jnathanson.com/blog/client/jquery/heatcolor/index.cfm#examples
비쥬얼 쿼리
http://visualjquery.com/1.1.2.html
jQuery "Highlight" Demo
http://www.keyframesandcode.com/resources/javascript/jQuery/demos/highlight-demo.html
Hot Key Testing
http://jshotkeys.googlepages.com/test-static.html
accordion menu
http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/
jQuery easyThumb
http://www.hverven.net/div/easyThumb/
갤러리
http://www.flyerstop.ca/ui/apps/gallery_advanced/
thickbox
http://jquery.com/demo/thickbox/
마우스휠 플러그인
http://www.ogonek.net/mousewheel/jquery-demo.html
http://www.ogonek.net/mousewheel/demo.html
휴먼메세지
http://binarybonsai.com/misc/humanmsg/
jQuery - LinkedSelect
http://www.msxhost.com/jquery/linked-selects/json/
jQuery » iFrame Sizing
http://host.sonspring.com/iframe/
jQuery for Designers - Ajax Form Validation Example
http://jqueryfordesigners.com/demo/ajax-validation.php
폰트크기 바꾸기
http://www.lllcolor.com/jQuery/demo/demo01b.html
dimension
http://brandonaaron.net/docs/dimensions/#code-samples
portlet 데모
http://www.rymix.co.uk/jquery/d15/sortables2.html
FX데모
http://magalies.net/downloads/Jquery/Interface%20examples/demos/ifx.html#pulsate-fx
오픈윈도우
http://magalies.net/downloads/Jquery/Interface%20examples/demos/windows.html
JQuery tricks: using Greybox + form plugin for a modal dialog box
http://corky.net/dotan/programming/jquery.dialog/dialog-demo.html
FaceBoox style autosuggest with jQuery
http://web2ajax.fr/examples/facebook_searchengine/
Auto-Growing Textarea Demo
http://www.aclevercookie.com/demos/autogrow_textarea.html
jQuery Helper for Komodo Media CSS Star Rater (Redux)
http://www.m3nt0r.de/devel/raterDemo/
에디터
http://avidansoft.com/dsrte/
jQuery Keyboard Navigation Plugin
http://amountaintop.com/project/keynav/
텝
http://jqueryfordesigners.com/demo/tabs.html
jQuery AccessKey Demo
http://methvin.com/jquery/jq-access.html
Semi-transparent rollover effect using jQuery
http://coderseye.com/files/demos/pngrollover/index.html
Revealing Photo Slider
http://css-tricks.com/examples/RevealingPhotoSlider/
Simple jQuery form validation
http://www.willjessup.com/sandbox/jquery/form_validator/form_validate.html
after callback demo
http://jsdesigning.com/gal/gal.php?top=10&id_pic=9&id_album=2
갤러리
http://devkick.com/lab/galleria/demo_01.htm#img/ladybug.jpg
SWF Upload
http://www.alexandremagno.net/blog/wp-content/uploads/swfupload/index.htm
jQuery gradient - Visual Test
http://brandonaaron.net/jquery/plugins/gradient/test/
tEditable :: In place table editing for jQuery
http://joshhundley.com/teditable/index.html
sort
http://interface.eyecon.ro/demos/sort.html
http://geeknation.blinklist.com/tag/jQuery/
http://www.nalanta.com/node/7
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
http://www.blinklist.com/mungkey/jquery/
http://geekswithblogs.net/AzamSharp/archive/2008/02/21/119882.aspx
http://www.learningjquery.com/2006/12/multiple-fancy-drop-caps
http://www.trirand.com/blog/?page_id=5
http://people.iola.dk/olau/flot/examples/selection.html(챠트 선택)
http://www.mootools.net/dragdrop/
http://plugins.jquery.com/project/Plugins/category/21
http://mohamedshaiful.googlepages.com/add_remove_form.htm
http://www.chazzuka.com/Portofolio/
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.sortable.html
http://hooney.net/code/2007/08/UnobtrusiveTabNav/tabNav03.html
http://jqueryfordesigners.com/coda-slider-effect/
http://benjaminsterling.com/jquery-jqgalview-photo-gallery/
http://www.mind-projects.it/blog/jqzoom_v10
http://www.reach1to1.com/sandbox/jquery/jqchart/
http://jquery.lukelutman.com/plugins/flash/
http://leandrovieira.com/projects/jquery/lightbox/
http://marcgrabanski.com/code/ui-datepicker/
http://www.noupe.com/ajax/37-more-shocking-jquery-plugins.html
http://www.webdesignerwall.com/demo/jquery/
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html
http://jquery.glyphix.com/
http://www.balupton.com/sandbox/jquery_lightbox/
챠트
http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery/
http://sorgalla.com/projects/jcarousel/
http://designreviver.com/tutorials/jquery-examples-horizontal-accordion
http://host.sonspring.com/portlets/
http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/
http://www.digital-web.com/extras/jquery_crash_course/
http://www.blinklist.com/codearachnid/jquery/
http://drupalmodules.com/module/image-enhanced-scaling
http://www.ajaxdaddy.com/store
http://www.ajaxrain.com/tag.php?tag=image&page=2(모음)
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/(예제모음)
-light box(이미지 미리보기,pre,next) : http://leandrovieira.com/projects/jquery/lightbox/
-이미지 스크롤 : http://benjaminsterling.com/2007/09/09/jquery-jqgalscroll-photo-gallery/
-이미지 싸이클 : http://www.malsup.com/jquery/cycle/
-BlockUI Plugin(processing,처리중 등등,confirm) : http://www.malsup.com/jquery/block/#element
-UI Modal : http://jquery.com/demo/thickbox/
-플래쉬 플러그인 삽입 : http://jquery.lukelutman.com/plugins/flash/#examples
-Photo Slider Tutorial : http://opiefoto.com/articles/photoslider#example
-jScrollPane : http://kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
-Accessible News Slider : http://www.reindel.com/accessible_news_slider/#examples
- unobtrusive tabs(탭메뉴) : http://stilbuero.de/jquery/tabs/#fragment-29
http://www.sunsean.com/idTabs/#t3
-jQuery Ajax Link Checker : http://troy.dyle.net/linkchecker/
-jQuery Form Plugin : http://malsup.com/jquery/form/#code-samples
-jquery.suggest, an alternative jQuery based autocomplete library(자동완성)
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/
http://nodstrum.com/2007/09/19/autocompleter/
-jlook(폼객체 리뉴얼) :
-jQuery - LinkedSelect(멀티 select) :
http://www.msxhost.com/jquery/linked-selects/json/
-Masked Input Plugin : (입력포맷 확인)
http://digitalbush.com/projects/masked-input-plugin
http://www.appelsiini.net/projects/jeditable/default.html
-Overlabel with JQuery(박스안에 워터마킹처리) : http://scott.sauyet.com/Javascript/Demo/Overlabel/
-Styling an input type="file"(파일찾기 이미지 처리)
http://www.quirksmode.org/dom/inputfile.html
-jQuery UI Datepicker v3.0 Examples(달력)
http://marcgrabanski.com/code/ui-datepicker/
-jQuery Validation Plugin(폼체크,포커싱)
http://jquery.bassistance.de/validate/demo-test/
http://www.texotela.co.uk/code/jquery/focusfields/
-jQuery columnHover plugin(컬럼 하이라이트/컬럼 컨트롤)
http://p.sohei.org/stuff/jquery/columnhover/demo/demo.html
http://p.sohei.org/stuff/jquery/columnmanager/demo/demo.html
-tablesorterDocumentation(테이블 순서)
http://tablesorter.com/docs/index.html
-jQuery Accordion Demo(컨테이너 예제)
http://jquery.bassistance.de/accordion/?p=1.1.1
-jQPanView based in jQuery 1.1(이미지 확대보기)
http://projects.sevir.org/storage/jpanview/index.html
-jQuery Impromptu(confirm,alert 등등)
http://trentrichardson.com/Impromptu/
-jqGrid Examples(그리드)
http://trirand.com/jqgrid/jqgrid.html#
-Toggle HTML-Elements with jQuery
http://jquery.andreaseberhard.de/toggleElements/
-UI/Sortables(테이블 위치변경 ^^)
http://docs.jquery.com/UI/Sortables
-뉴스 슬라이더(부분보기,전체보기)
http://www.reindel.com/accessible_news_slider/
-로컬 스크롤러
http://www.freewebs.com/flesler/jQuery.LocalScroll/
-핫키 테스트
http://jshotkeys.googlepages.com/test-static.html
-슬라이더
http://docs.jquery.com/UI/Slider/slider
-쇼핑카트
http://www.mimul.com/pebble/default/2007/10/30/1193753340000.html
-테이블 소트
http://www.mimul.com/pebble/default/2007/11/06/1194348600000.html
-이미지 나중에 로딩시키기
http://www.mimul.com/pebble/default/2007/11/10/1194695220000.html
-오토탭(입력시 폼객체 자동넘김)
http://dev.lousyllama.com/autotab/
-실시간 폼객체 수정
http://www.appelsiini.net/projects/jeditable/custom.html
-프린트
http://www.designerkamal.com/jPrintArea/#
-차트
http://www.reach1to1.com/sandbox/jquery/jqchart/
-CSS Dock Menu (Jquery + CSS)
후니넷에서 보삼
-툴팁
http://www.codylindley.com/blogstuff/js/jtip/
-XML데이터 뿌리기
http://blog.reindel.com/src/jquery_browse/
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html
http://www.mimul.com/pebble/default/2006/11/05/1162710000000.html
-Clearing Form
http://www.learningjquery.com/2007/08/clearing-form-data
--암호 복잡성 체크
http://phiras.googlepages.com/PasswordStrengthMeter.html
--Form Serialize
http://dev.jquery.com/wiki/Plugins/FastSerialize
--GetString 퍼라미터 가져오기
http://www.mathias-bank.de/2006/10/28/jquery-plugin-geturlparam/
--검색 후 콤보생성(ajax with combo) 아주 유용함
http://extjs.com/deploy/ext/examples/form/forum-search.html
http://extjs.com/deploy/ext/examples/grid/edit-grid.html-->그리드
--파일 업로드(input=file) 리폼
http://www.appelsiini.net/projects/filestyle/demo.html
Jquery Best
http://www.spicyexpress.net/general/jquerry-at-it-best-downloadable-jquerry-plugins-and-widgets-for-you-2/
웹디자인 템플릿트(2.0)
-http://www.templateworld.com/free_templates.html
----------------------------------------
Jquery tag cloud
http://www.ajaxrain.com/tagcloud.php
Jquery 기본설명
http://www.zzbb.kr/34
----------------------------------------
^^Star Rater(순위) --활용가능성 높음
http://www.m3nt0r.de/devel/raterDemo/
^^ AJAX CALLING --활용가능성 높음
http://cgaskell.wordpress.com/2006/11/02/jquery-ajax-call-and-result-xml-parsing/
--AJAX 아이디 중복체크 - 활용가능성 아주높음
http://www.shawngo.com/gafyd/index.html
^^ jQuery framework plugins which provide a way to sort and nest elements in web applications, using drag-and-drop(테이블드래그앤드랍) --활용가능성 중간
http://code.google.com/p/nestedsortables/
^^Simple tableSorter(리스트 정렬) 활용가능성 중간
http://motherrussia.polyester.se/docs/tablesorter/
^^Cookie 활용가능성 높음
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/
^^태깅 --그냥한번보자..ㅎ
http://www.alcoholwang.cn/jquery/jTaggingDemo.htm
^^죽이는 어코디언 메뉴
http://dev.portalzine.de/index?/Horizontal_Accordion--print
^^ AJAX Indicator 이미지
http://qureyoon.blogspot.com/2006/11/make-your-own-loading-gif.html
----------------------------------------
2007.12.28 찾은것
----------------------------------------
http://rikrikrik.com/jquery/quicksearch/#usage
http://nadiaspot.com/jquery/confirm/#examples
http://host.sonspring.com/portlets/
http://jquery.andreaseberhard.de/toggleElements/
http://www.getintothis.com/pub/projects/rb_menu/
http://icon.cat/software/iconDock/0.8b/dock.html
http://www.nuernberg.de/internet/portal/index.html
http://rikrikrik.com/jquery/shortkeys/#examples
http://rikrikrik.com/jquery/pager/#examples
http://famspam.com/facebox/ --라이트박스같은것
http://www.andreacfm.com/
http://www.vulgarisoip.com/2007/06/29/jquerysuggest-an-alternative-jquery-based-autocomplete-library/ --autocomplete
http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html - 뉴스 스크롤
http://d-scribe.de/webtools/jquery-pagination/demo.htm# --페이징
http://tinymce.moxiecode.com/example_full.php?example=true --Open Source WYSWYG 웹 에디터
http://www.laptoptips.ca/projects/tinymce-advanced/ --Open Source WYSWYG 웹 에디터 advanced
http://extjs.com/ -또다른 RIA JAVAscRIPT 프레임워크
http://www.digital-web.com/extras/jquery_crash_course/ -jquery로 만든 비행 예약 시스템 데모(Passenger Management )
http://markc.renta.net/jquery/ --jquery 간단예제
http://www.xml.com/pub/a/2007/10/10/jquery-and-xml.html?page=2 -jquery와 XML
http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ -쿠키 플러그인
http://jquery.com/files/demo/dl-done.html --간단한 어코디언 메뉴
http://mjslib.org/doc/legacy/fieldgroup.html --폼필드 컨트롤
http://extjs.com/deploy/dev/examples/tree/two-trees.html --트리
http://www.amcharts.com/column/ - 차트(바로 사용^^)
http://particletree.com/features/rediscovering-the-button-element/ - 버튼 스타일링
http://www.i-marco.nl/weblog/jquery-accordion-menu/ - 실용성 높은 어코디언 메뉴
http://www.sastgroup.com/jquery/240-plugins-jquery
http://jquery.bassistance.de/jquery-getting-started.html
jquery.filestyle.js