본문 바로가기

거침없이 배우는 자바스크립트17

jQuery) 새 창을 여는 이벤트 자바스크립트를 사용할 때, 창을 열 수 있는 이벤트로 허용된 것은 사용자가 링크를 클릭하거나 폼을 전송할 때뿐이다. 따라서, 새 창을 열려면 HTML 요소에(반드시 링크일 필요는 없다) click 이벤트를 추가해야 한다. 가령 페이지에 있는 어떤 링크들을 너비, 높이가 각각 300 픽셀이고 스크롤바가 있으며, 크기 조절이 가능하고, (도구 모음과 같은) 그 밖의 요소는 없는 창에 열고 싶다고 가정했을때 $('.popup').click(function(){ var winProps='height=300, width=300, resizable=yes, scrollvars=yes'; var newWin=open($(this).attr('href'),'aWin',winProps); } 이렇게 특별한 링크들에 po.. 2012. 1. 25.
jQuery) 새 창에서 외부 링크 열기 홈페지를 만들 때 당연히 _self로 링크를 했었다. _blank로 하면 매번 새창이 뜨고 지저분해졌기 때문이다. 그리고 항상 내 홈페이지를 만들어서 보이는것만 했었기 때문에 다른것을 신경쓰지 않았었는데, 책을 보니 링크에 대해서 자세히 설명되어있었다. 만약에 내 홈페이지를 보던사람이 다른 사이트를 눌렀을때 내 홈페이지가 사라지고 다른것을 띄우게 된다면 내 홈페이지를 보던 중요한 사람이 사라지게 되는 것이다. 그렇기 때문에 방문객들을 다른 사이트로 보내지 않고, 자신의 사이트에 잡아 두기 위해 외부 홈페이지의 주소로 링크가 이어질 경우에는 target을 _blank로 하는 것이 좋다. 그런데 일일이 링크마다 target을 정해주는 것 대신 jQuery를 이용해서 링크들을 관리하는 좋은 방법이 있다. 우선.. 2012. 1. 25.
jQuery) lightBox를 사용한 갤러리 사진 갤러리를 보여주는 방법중에서 가장 많이 쓰이는 기술 중 하나는 웹 페이지를 흐릿하게 만들고 브라우저 창에 썸네일의 큰 이미지를 보여주는 것이다. lightBox라는 자바스크립트 프로그램은 이 방법을 사용하는 프로그램 중 가장 널리 알려져 있다.(http://www.huddletogether.com/projects/lightbox2) jQuery 환경에서 동작하는 스크립트도 있다. http://leandrovieira.com/projects/jquery/lightbox/ 2012. 1. 18.
jQuery 효과 http://docs.jquery.com/UI/Effects 보여주기와 감추기의 기본 show()는 감춰진 HTML 요소를 보여지게 한다. HTML 요소가 이미 보여지고 있으면 아무 효과도 없다. 속도값을 전달하지 않으면, HTML 요소는 바로 보여지지만 속도값을 전달하면 HTML 요소는 좌측 상단부터 나타나 우측 하단까지 애니메이션 효과를 주며 나타난다. hide()는 show()의 반대. 이것도 속도값을 줄 수 있다. toggle()은 HTML 요소가 보여지는 상태를 서로 바꾼다. 이 함수는 HTML 요소를 보이게 하거나 숨기는 것을 (버튼과 같은) 하나의 컨트롤로 제어할 떄 가장 좋다. fadeIn/fadeOut fadeIn()은 감춰진 HTML 요소에 페이드 인 효과를 적용해 서서히 나타나게 한다.. 2012. 1. 17.
jQuery) each() each() 함수는 익명함수를 인수로 갖는다. 익명함수는 이름을 부여하지 않는다. 익명함수의 기본구조는 function(){ //실행할 코드 } 이렇게된다. 이름이 없기 때문에, 이 함수를 호출할 방법도 없다. 대신, 익명 함수를 다른 함수에 인수로 전달해서 사용할 수 있다. each() 함수의 일부로서 익명 함수를 사용하려면 $('selector').each(function(){ //실행할 코드 }); 이렇게 한다. 2012. 1. 17.
jQuery) hover() jQuery는 mouseover와 mouseout 이벤트를 한꺼번에 다루는 hover()라는 이벤트를 제공하기 때문에 이미지를 롤오버 할 때 유용하다. hover() 함수는 두 개의 인수를 갖는데, 첫 번째는 마우스가 이미지 위로 올라갔을 때 브라우저가 할 일을 알려주는 함수이며 두 번째는 마우스가 이미지 밖으로 옮겨졌을 때 브라우저가 할 일을 알려주는 함수다. 롤오버는 이미지가 아닌 HTML 요소에도 적용이 가능하다. hover() 함수는 링크, 폼 HTML 요소, 문단까지 어느 태그에나 사용할 수 있다. 2012. 1. 17.

티스토리툴바