Development/jQuery
jQuery UI CSS Framework 2
linuxism
2012. 6. 9. 11:39
음. 제목에는 테이블 예제라고 썻지만, 정확히 말해서 여기에 사용된 UI는 button뿐이다...
그렇다고 낚였다고 너무 화들내지 마시고... css소스 다 줄터이니...
우선 예제 화면 부터 확인하고 가자.
여기에 사용된 UI는 Button 및 Icon이다.
Button에 관한 자세한 내용은 http://jqueryui.com/demos/button/ 에서 확인 가능하다.
이제 소스를 보면서 하나하나 알아보자
1. HTML
가. Header
나. Body
<head>
<title>Web Inventory - Ver.1.0.1. Program by Joe</title>
<!--멋지게 버전도 써주시고~만든사람 이름도작성-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js'></script>
<link rel="Stylesheet" type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css' />
<!--google에서 제공하는 jQuery 를 아용했다. 위 내용은 이전 포스트에서도 설명 한 적있다-->
<link rel="Stylesheet" type="text/css" href="css/common.css" />
<!--공용으로 사용 할 css를 정의하는 부분-->
<link rel="Stylesheet" type="text/css" href="css/TableCss.css" />
<!--테이블 관련 css를 정의 하는 부분-->
<script type="text/javascript" src="js/onLoadScrtip.js"></script>
<!--페이지 Load시에 발생시킬 javascript코드를 정의 할 부분. 이 부분에서 button을 활상화 시킨다-->
</head>
<title>Web Inventory - Ver.1.0.1. Program by Joe</title>
<!--멋지게 버전도 써주시고~만든사람 이름도작성-->
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js'></script>
<link rel="Stylesheet" type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/smoothness/jquery-ui.css' />
<!--google에서 제공하는 jQuery 를 아용했다. 위 내용은 이전 포스트에서도 설명 한 적있다-->
<link rel="Stylesheet" type="text/css" href="css/common.css" />
<!--공용으로 사용 할 css를 정의하는 부분-->
<link rel="Stylesheet" type="text/css" href="css/TableCss.css" />
<!--테이블 관련 css를 정의 하는 부분-->
<script type="text/javascript" src="js/onLoadScrtip.js"></script>
<!--페이지 Load시에 발생시킬 javascript코드를 정의 할 부분. 이 부분에서 button을 활상화 시킨다-->
</head>
나. Body
<div style='margin-bottom:20px;'>
<div style='float: left;padding:10px;'>
<label id='searchlabel'>Search:</label>
<input id='searchbox' type='text' />
</div>
<!--Search Box만드는 부분. 추후에 Autocomplet을 사용 할 것이다.-->
<div style='float: right;padding:10px;'>
<button id='btnimport'>Import</button>
<button id='btnexport'>Export</button>
</div>
<div style='float: right;padding:10px;'>
<button id='btninsert'>Insert</button>
</div>
<!--각종 버튼 정의-->
</div>
<table cellpadding="0" cellspacing="0" width='100%'>
<caption>Web Inventory - Ver.1.0.1. </caption>
<col width="10%" /><!--No-->
<col width="10%" /><!--Qty-->
<col width="10%" /><!--UCD-->
<col width="14%" /><!--S-Netsol-->
<col width="14%" /><!--B-Amazon-->
<col width="14%" /><!--B-eBay-->
<col width="14%" /><!--B-Netsol-->
<col width="14%" /><!--A-Netsol-->
<thead>
<tr>
<th rowspan='2'>
No.
</th>
<th rowspan='2'>
Quantity
</th>
<th rowspan='2'>
Unique Code
</th>
<th>SeliniNY</th>
<th colspan='3'>Boxed-Gifts</th>
<th>Angelic Rise</th>
</tr>
<tr>
<th>NetSol</th>
<th>Amazon</th>
<th>eBay</th>
<th>NetSol</th>
<th>NetSol</th>
</tr>
</thead>
<tbody>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
</td>
<td>6
</td>
<td>7
</td>
<td>8
</td>
</tr>
</tbody>
</table>
<div style='float: left;padding:10px;'>
<label id='searchlabel'>Search:</label>
<input id='searchbox' type='text' />
<button id='btnsearch' style='margin-left: 15px;'>Search</button>
</div>
<!--Search Box만드는 부분. 추후에 Autocomplet을 사용 할 것이다.-->
<div style='float: right;padding:10px;'>
<button id='btnimport'>Import</button>
<button id='btnexport'>Export</button>
</div>
<div style='float: right;padding:10px;'>
<button id='btninsert'>Insert</button>
</div>
<!--각종 버튼 정의-->
</div>
<table cellpadding="0" cellspacing="0" width='100%'>
<caption>Web Inventory - Ver.1.0.1. </caption>
<col width="10%" /><!--No-->
<col width="10%" /><!--Qty-->
<col width="10%" /><!--UCD-->
<col width="14%" /><!--S-Netsol-->
<col width="14%" /><!--B-Amazon-->
<col width="14%" /><!--B-eBay-->
<col width="14%" /><!--B-Netsol-->
<col width="14%" /><!--A-Netsol-->
<thead>
<tr>
<th rowspan='2'>
No.
</th>
<th rowspan='2'>
Quantity
</th>
<th rowspan='2'>
Unique Code
</th>
<th>SeliniNY</th>
<th colspan='3'>Boxed-Gifts</th>
<th>Angelic Rise</th>
</tr>
<tr>
<th>NetSol</th>
<th>Amazon</th>
<th>eBay</th>
<th>NetSol</th>
<th>NetSol</th>
</tr>
</thead>
<tbody>
<tr>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
</td>
<td>6
</td>
<td>7
</td>
<td>8
</td>
</tr>
</tbody>
</table>
2. common.css
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#searchlabel
{
font-weight:bolder;
vertical-align:middle;
}
#searchbox
{
border:solid 1px #ccc;
font-size:14px;
padding:5px;
vertical-align:middle;
}
button
{
vertical-align:middle;
}
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#searchlabel
{
font-weight:bolder;
vertical-align:middle;
}
#searchbox
{
border:solid 1px #ccc;
font-size:14px;
padding:5px;
vertical-align:middle;
}
button
{
vertical-align:middle;
}
3. TableCss.css
/*
--------------------------------------------------------------------------------
What: "Oranges in the sky" Styles(Table data design)
Who: Krasimir Makaveev(krasi [at] makaveev [dot] com)
When: 15.09.2005(created)
--------------------------------------------------------------------------------
*/
table {
border-collapse: collapse;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
color: #333;
}
border-collapse: collapse;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
color: #333;
}
table caption {
font-size: 1.1em;
font-weight: bold;
letter-spacing: -1px;
margin-bottom: 10px;
padding: 5px;
background: #efefef;
border: 1px solid #ccc;
color: #666;
}
font-size: 1.1em;
font-weight: bold;
letter-spacing: -1px;
margin-bottom: 10px;
padding: 5px;
background: #efefef;
border: 1px solid #ccc;
color: #666;
}
table a {
text-decoration: none;
border-bottom: 1px dotted #f60;
color: #f60;
font-weight: bold;
}
text-decoration: none;
border-bottom: 1px dotted #f60;
color: #f60;
font-weight: bold;
}
table a:hover {
text-decoration: none;
color: #fff;
background: #f60;
}
text-decoration: none;
color: #fff;
background: #f60;
}
table tr th a {
color: #369;
border-bottom: 1px dotted #369;
}
color: #369;
border-bottom: 1px dotted #369;
}
table tr th a:hover {
color: #fff;
background: #369;
}
color: #fff;
background: #369;
}
table thead tr th {
text-transform: uppercase;
background: #e2e2e2;
}
text-transform: uppercase;
background: #e2e2e2;
}
table tfoot tr th, table tfoot tr td {
text-transform: uppercase;
color: #000;
font-weight: bold;
}
text-transform: uppercase;
color: #000;
font-weight: bold;
}
table tfoot tr th {
/*width: 20%;*/
}
/*width: 20%;*/
}
table tfoot tr td {
/*width: 80%;*/
}
/*width: 80%;*/
}
table td, table th {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
line-height: 1.8em;
font-size: 0.8em;
vertical-align: middle;
/*width: 20%;*/
}
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
line-height: 1.8em;
font-size: 0.8em;
vertical-align: middle;
/*width: 20%;*/
}
table tr.odd th, table tr.odd td {
background: #efefef;
}
background: #efefef;
}
4. onLoadScript.js
$(function() {
$("#btnsearch").button({ icons: { primary: 'ui-icon-search'} });
$("#btninsert").button({ icons: { primary: 'ui-icon-plusthick'} });
$("#btnimport").button({ icons: { primary: 'ui-icon-arrowreturnthick-1-n'} });
$("#btnexport").button({ icons: { primary: 'ui-icon-arrowreturnthick-1-s'} });
});
$("#btnsearch").button({ icons: { primary: 'ui-icon-search'} });
$("#btninsert").button({ icons: { primary: 'ui-icon-plusthick'} });
$("#btnimport").button({ icons: { primary: 'ui-icon-arrowreturnthick-1-n'} });
$("#btnexport").button({ icons: { primary: 'ui-icon-arrowreturnthick-1-s'} });
});
끝.
사용법은 간단하다. 각 태그에 $().button();만 추가해주면된다. 너무 쉬워서 더이상 할 말이 없다....
출처 - http://storyofdream.tistory.com/95