드럼치는 프로그래머

HTML ### CSS .wrap { width: 500px; height: auto; position: relative; display: inline-block; } .wrap textarea { width: 100%; resize: none; min-height: 4.5em; line-height:1.6em; max-height: 9em; } .wrap span { position: absolute; bottom: 5px; right: 5px; } #counter { background:rgba(255,0,0,0.5); border-radius: 0.5em; padding: 0 .5em 0 .5em; font-size: 0.75em; } JavaScript $(function() { $('#conte..

jQuery의 .slideToggle()은 객체를 말아올리거나 펼치는 효과를 낸다. .slideToggle()의 형식은 아래와 같다. .slideToggle( [움직임 시간(duration)] [, 움직이고 나서 실행할 함수(callback)] ) .slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] ) 움직임 시간은 밀리초(ms) 단위로 넣거나 slow, normal, fast를 쓸 수 있다. 아래는 jQuery로 단추(button)를 딸깍하면 상자(div)가 펼쳐져 있으면 말아올려서 접고, 접혀 있으면 천천히 펼쳐내리는 예제이다. 딸깍해 보세요 말아올리고 말아내리는 글상자 딸깍해 보세요 말아올리고 말아내리는 글상..

slideUp([speed], [callback]) / version : 1.0 - 높이를 지정한 시간동안 0으로 감소시키고 style의 display:none 상태를 적용시킨다. 슬라이딩(UP) 형식으로 표현되면서 사라지게 된다. $(document).ready(function(){ $("#test_id").click(function(){ $("#a").slideUp(500); }); }); - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(UP) 효과를 나타내며 사라진다. slideDown([speed], [callback]) / version : 1.0 - 숨겨진 요소의 style의 display:none 상태를 이전의 상태(block 또는 lilin..

fadeOut([speed], [callback]) / version : 1.0 - 지정한 시간동안 투명도를 1에서 0으로 감소시키고 style의 display:none 상태로 적용시킨다. 해당 요소가 서서히 사라지게 표현된다. $(document).ready(function(){ $("#test_id").click(function(){ $("#a").fadeOut(500); }); }); - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 페이딩(Out) 효과를 나타내며 사라진다. fadeIn([speed], [callback]) / version : 1.0 - 지정한 시간동안 투명도를 0에서 1로 증가시키고 style의 display를 none의 이전상태(bloc..

window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다 window.onload = function () { alert("로딩 완료"); } 와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다. 하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.또한 와 같은 attribute 가 설정이 되어 있는 경우..

slideToggle 원문 링크 http://api.jquery.com/slideToggle/ .slideToggle( [duration] [, callback] ) Returns : jQuery 개요 : 슬라이드를 통해 요소를 보이게 안보이게 처리합니다..slideToggle( duration [, callback] )duration 시간 값callback 콜백 함수.slideToggle( [duration] [, easing] [, callback] )duration 시간 값easing 특수한 효과 함수callback 콜백 함수.slideToggle() 함수는 요소의 height 값을 조작해서 움직임을 만들어 냅니다. 보이면 안보이게 안보이면 보이게 처리해 줍니다. 토글이니 당연하겠죠?보이게 처리할 ..

.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다.문법jQuery.inArray( value, array [, fromIndex ] )value에는 검색하고자 하는 값을, array에는 배열의 이름을 넣습니다.fromIndex는 옵션으로 몇번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫번째 배열 값부터 검색합니다. 예를 들어jQuery.inArray( 'as', jbAry )는 jbAry라는 배열에 as라는 값이 있는지 검색합니다.만약 배열에 as가 없다면 -1을 반환합니다. 첫번째 배열 값이 as라면 0을, 두번째 배열 값이 as라면 1을 반환합니다. 예제var jbAry = [ 'a', 'b', 'c', 'd', 'e' ] var jbResult = ..

JQuery에 다른 기능을 검색하다가 아래의 사이트를 발견하여 나중에 도움이 될 듯하여 정리해둔다. 1. jQuery로 선택된 값 읽기 $("#selectBox option:selected").val();$("select[name=name]").val(); 2. jQuery로 선택된 내용 읽기 $("#selectBox option:selected").text(); 3. 선택된 위치 var index = $("#test option").index($("#test option:selected")); 4. Add options to the end of a select $("#selectBox").append("Apples");$("#selectBox").append("After Apples"); 5. Add ..

텍스트박스 : 라디오버튼 : 남 여 드롭다운리스트 : JavaS-ript jQuery JavaS-ript [출처] http://egloos.zum.com/xxwony/v/82540