[구글 트랜드 jquery, prototype, dojo, mootools]

프로토타입이 상한가를 칠때 책을 통해 학습을 하고선 지금까지 프로토타입만 고집을 했습니다.
그러다 근래에 계속해서 jQuery가 여기저기서 툭툭 튀어나오더니
더 이상 미루면 안되겠다는 생각에 "어떤 놈이야?"라는 생각으로 접해보기로 했습니다.
어제부터 검색을 하면서 이런 저런 기능을 사용해봤는데 ㅡㅡ;; 이건 뭐냐는...
프로토타입보다 사용하기가 아주 편한 것 같습니다.

프로토타입을 사용할때 왠지 복잡해보여서 화면 처리 같은건 사용하지도 않았는데
jQuery에서는 단 면줄로 원하는 효과를 만들어 낼수가 있었습니다.
졸린 시간을 이용해서 10여분 동안 만들어봤는데 마법같은 매력에 빠져들게되었습니다. @..@

일단 구글 트랜드에서 검색을 해본 결과 jQuery가 확실히 대세입니다.
또한 관심을 가지고 있는 모바일 환경에서도 jQuery가 자주 언급이 되고 있구요.
특히나 우니라나처럼 쏠림현상이 심한 곳은... jQuery 꼭 해야죠.
필요할때 검색해서 찾아가며 만들어도 될 것 같지만 큰 맘 먹고 책 한권 구입했습니다.
(개발서 사지 않겠노라는 다짐은 언제나 이렇게 쉽게 무너집니다. ㅠ.ㅠ)

아래 처럼 하나 만들어보니 jQuery라는 놈이 아주 기대가 됩니다.


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>JQuery</title>
<link href="/js_css/fisheyMain.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
   $("#login_btn").click(function(){
   if($("#join_box").is(":visible")){
    $("#join_box").slideToggle("slow");
}
       $("#login_box").slideToggle("slow");
   });
   
   $("#join_btn").click(function(){
    if($("#login_box").is(":visible")){
$("#login_box").slideToggle("slow");
}
       $("#join_box").slideToggle("slow");
   });
});
//]]>
</script>

<style type="text/css">
#top_menu {
width:100%;
height:22px;
line-height:22px;
border-bottom:1px solid #B6BAC0;
background-color:#E1E1E1; /*#E1E1E1;*/
color:#fff;
margin-bottom:7px;
float:left;
}

#topUL{
margin:0 auto;
width:990px;
min-width:990px;
}

.to_home {
float: left;
}

.top_menu_li {
float: right;
cursor:pointer;
}

#wrap{
margin:0 auto;
width:1000px;
min-width:1000px;
}

#left_menu {
width: 200px;
background-color: #ccc;
float: left;
}

#content {
width: 580px;
margin-right:10px;
margin-left:10px;
float: left;
background-color:highlight;
}

#right_menu {
width: 200px;
background-color: #ccc;
float: left;
}

#login_box {
display: none;
height: 300px;
background-color: fuchsia;
}

#join_box {
display: none;
height: 300px;
background-color:lime;
}

</style>

</head>
<body>
<div id="top_menu">
<ul id="topUL">
<li class="to_home"><a href="/">HOME</a></li>
<li class="top_menu_li" id="login_btn">로그인</li>
<li class="top_menu_li"> | </li>
<li class="top_menu_li" id="join_btn">회원가입</li>
</ul>
</div>
<div id="wrap">
<div id="left_menu">left_menu</div>
<div id="content">
<div id="login_box">login_box</div>
<div id="join_box">join_box</div>
<div id="main_content">
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content<br/>
main_content
</div>
</div>
<div id="right_menu">right_menu</div>
</div>
</body>
</html>