[jQuery] 누르면 크기가 늘어나는 검색창

Posted by Readiz
2014.05.04 22:56 Creation/Design


jQuery로 구현하는 눌렀을 때 크기가 늘어나는 검색창



  항상 느끼는 것이지만 웹에서 마음에 딱 드는 컨셉의 디자인을 찾기는 힘이 드는 것 같습니다. 하나하나 찾기는 어렵지 않은데, 이러한 것들이 모여 이루어지는 디자인이라는 것은 개개인의 취향에 따라 마음에 들고 안들고 하기 때문인데요.. 그래서 이번에도 크기가 늘어나는 검색창을 찾다가.. 마음에 다 안들어서 그냥 jQuery로 한번 구현해보았습니다. jQuery자체가 그렇게 어렵지가 않아서 쉽게 구현이 가능합니다. blur 이벤트와 focus 이벤트를 사용하여 구현합니다. 모습은 아래와 같습니다.



구현 모습





  위쪽 그림이 누르기 전의 모습이고, 아래쪽 그림이 눌렀을 때 크기가 늘어난 모습입니다. 공간도 적게 차지하면서 애니메이션과 함께 커지기 때문에 재미(?)도 있습니다.




코드


	
// Search box change by Readiz
$("#desktopNav input").focus(function(){
	$("#desktopNav form").animate({
			"width": "200px"
	}, 300, function() {});
});
$("#desktopNav input").blur(function(){
	$("#desktopNav form").animate({
			"width": "60px"
	}, 300, function() {});
});
$("#desktopNav form").click(function(){
	$("#desktopNav input").focus();
}); 
	




  제가 작성한 코드는 평상시에 width가 60px인 상태로 있다가, focus를 받으면 200px로 늘어나게 되는 코드입니다. click이벤트가 하나 더 있는 이유는 크롬에서 저 돋보기 모양을 눌렀을 때는 input이 포커스를 가지는 것으로 인식이 되지가 않아서 이를 방지하기 위한 코드입니다.

  animate가 부드러운 애니메이션 효과를 내는 method입니다. 그냥 width를 200, 60으로 해버리면 바로 팍팍 늘어나고 줄어들지만, animate옵션을 줌으로써 부드럽게 늘어나고 줄어드는 효과를 줄 수 있습니다.


 

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 잘보고갑니다
    나중에 다른곳에 활용해봐야겟네요 '';;
    그나저나 1.6버전은 언제쯤볼수있을까요 ㅎㅎ
    • 지금도 보고 계시는데요(?)
      이번에 정말 공들이고 있습니다.
    • 지금스킨이 1.6이에요? 오른쪽상단에 1.5.1이나와서
      아직은 배포는 안하신거져?
    • ㅋㅋㅋ 네 아마 새로 배포하는 글에도 제일 먼저 오실듯 한데요..
    • ㅎㅎ 그런가요
      마크쿼리님 스킨사용하는거에 인용문쪽CSS수정만하면 글수정안해도
      리드이지님 스킨사용할수있을꺼같아서요
      이번 배포때한번 적용해볼까해서요 ㅎㅎ
  2. 상단 메뉴바 골격이 확 달라졌는데요. 1.6버전이네요.
    • 몇가지 문제만 해결되면 오늘 밤에라도 배포할 예정입니다. 적어도 연휴 전까지는!!
  3. 저는 제이쿼리를 몰라서 css3으로 구현하죠 ㅋㅋ
    input:focus{
    width:...
    border:1px solid blue}
    • 아.. 이 방법이 있었네요. 허무..
      가끔은 바보같은 짓을 하네요 ㅋㅋ

티스토리 툴바