jQuery 기반 UI Library인 jQuery TOOLS가 나온 소식을 몇일전에 접했습니다.
자바스크립트 코드 몇줄이면 멋진 UI가 튀어나오더군요.
너무 재밌어서 데모를 시연해보다가 탭 디자인 한개를 직접 사용해봤습니다.
1. jQuery와 jQuery TOOLS 링크입니다.
body {
width: 456px;
}
/* root element for tabs */
ul.tabs {
margin:0 !important;
padding:0;
height:61px;
border-bottom:1px solid #666;
}
/* single tab */
ul.tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.tabs a {
float:left;
font-size:33px;
display:block;
padding:15px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:28px;
background-color:#efefef;
background: -moz-linear-gradient(-90deg,#003471,#448CCB);
/*color:#777;*/
color: #0D4383;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
margin-right:2px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright:4px;
position:relative;
top:1px;
}
ul.tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.tabs a.current {
background-color:#ddd;
border-bottom:2px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
background-color:#ddd;
}
3. HTML
