공부/자바스크립트 jQuery36 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. 이미지 미리 읽기 이미지를 미리 읽어둔다(preloading)는 것은 브라우저로 하여금 이미지를 보여주기 전에 미리 다운로드하도록 만드는 것을 의미합니다. 이미지는 다운로드된 후 웹 브라우저의 캐시에 저장되고 이후 발생하는 요청은 웹 서버로부터 시간을 들여 다운로드받는 대신 방문객의 하드 드라이브로부터 해당 파일을 제공받습니다. 미리 읽어두기를 위한 방법 중 하나는 스크립트의 첫부분에 미리 읽어두고자 하는 모든 그래픽 파일의 경로를 담은 배열을 생성한 다음, 이 배열에 루프를 수행하여 각각에 대한 새 이미지 객체를 생성하는 것입니다. var preloadImages = ['images/1.png', 'images/2.png', 'images/3.png']; var imgs = []; for (var i=0; i 2012. 1. 17. 이전 1 2 3 4 5 6 다음
