본문 바로가기

Ohming364

jQuery) Submit (전송버튼) 폼이 signup이라는 아이디를 가지고 있으며 내부에 username이라는 아이디를 가진 이름 필드가 있다고 할 때, 이 폼에 대한 유효성 검사는 아래와 같이 할 수 있다. 3번째 줄에서는 필드가 비었는지를 확인하고, 아무런 값도 포함하지 않았다면 경고창을 보여주고, return false로 폼 전송을 중단시킨다. 만약 이 부분이 생략된다면 방문객의 이름이 입력되지 않아도 폼을 전송해 버린다. $(document).ready(function(){ $('#signup').submit(function(){ if($('#username').val() == ''){ alert('이름 필드에 값을 입력해 주세요.'); return false; } }); }); 2012. 1. 30.
jQuery) 폼 필드 선택자 귀찮아서 안적어 놓을까도 했는데 ㅠㅠ 인터넷에 찾아보니 없다. 날 위해서라도 적어 놓아야겠다. $(':input') - 모든 폼 HTML 요소를 선택한다. $(':text') 이렇게 jQuery 형식으로 :password, :radio, :checkbox, :submit, :image, :reset, :button, : file, :hidden 이 있고, 사용할 수 있다. 그리고 폼 선택자를 다른 선택자와 조합해서 사용할 수도 있다. 선택하려는 폼이 signup이라는 아이디를 가지고 있고, 이 폼에 있는 텍스트 필드를 선태하려고 한다면 $('$signup :text') 로 사용할 수 있다. 그리고 jQuery는 특정 상태와 일치하는 폼 필드를 찾을 수 있는 유용한 필터도 제공한다. :checked 는 체.. 2012. 1. 30.
탐색 메뉴 HTML을 사용해서 중첩하는 링크를 만들고, CSS를 사용해 이 링크들을 탐색 메뉴처럼 꾸민 후 하위 메뉴는 숨기도록 한다. 그 다음에 탐색 메뉴의 버튼에 마우스를 올리면 메뉴를 애니메이션하며 보여주는 자바스크립트를 추가하면 된다. 탐색 메뉴에 사용할 HTML은 태그를 사용하는 순서 없는 목록이다. 최상위 태그는 탐색 메뉴의 메인 버튼이다. 하위 메뉴를 만들려면, 먼저 하위 메뉴를 포함할 태그 안에 중첩하는 태그를 만든다. 처음으로 제품소개 ~~~ 써주고 ~~~ 써주고 이런식으로 할 수 있다. 이러면 탐색버튼은 처음으로, 제품소개 두개가 나오게 되고, 제품소개 아래에는 두개의 중첩 목록이 생긴다. 실제 대부분의 작업을 담당하는 것은 탐색 메뉴에 사용할 스타일 시트이다. 스타일 시트는 한 무더기의 중첩되는.. 2012. 1. 25.
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.

티스토리툴바