jQuery UI CSS Framework 2

Development/jQuery 2012. 6. 9. 11:39

음. 제목에는 테이블 예제라고 썻지만, 정확히 말해서 여기에 사용된 UI는 button뿐이다...
그렇다고 낚였다고 너무 화들내지 마시고... css소스 다 줄터이니...

우선 예제 화면 부터 확인하고 가자.

여기에 사용된 UI는 Button 및 Icon이다.
Button에 관한 자세한 내용은 http://jqueryui.com/demos/button/ 에서 확인 가능하다.

이제 소스를 보면서 하나하나 알아보자

1. HTML

가. Header

<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' />
    

    <link rel="Stylesheet" type="text/css" href="css/common.css" />
     
    <link rel="Stylesheet" type="text/css" href="css/TableCss.css" />
     
    <script type="text/javascript" src="js/onLoadScrtip.js"></script>
     
</head>

나. Body

<div style='margin-bottom:20px;'>
        <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>
        
        <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%" />
        <col width="10%" />
        <col width="10%" />
        <col width="14%" />
        <col width="14%" />
        <col width="14%" />
        <col width="14%" />
        <col width="14%" />
        <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;
}

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;

}

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;
}

table a {
text-decoration: none;
border-bottom: 1px dotted #f60;
color: #f60;
font-weight: bold;
}

table a:hover {
text-decoration: none;
color: #fff;
background: #f60;
}

table tr th a {
color: #369;
border-bottom: 1px dotted #369;
}

table tr th a:hover {
color: #fff;
background: #369;
}

table thead tr th {
text-transform: uppercase;
background: #e2e2e2;
}

table tfoot tr th, table tfoot tr td {
text-transform: uppercase;
color: #000;
font-weight: bold;
}

table tfoot tr th {
/*width: 20%;*/
}

table tfoot tr td {
/*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%;*/
}

table tr.odd th, table tr.odd td {
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'} });
});

끝.

사용법은 간단하다. 각 태그에 $().button();만 추가해주면된다. 너무 쉬워서 더이상 할 말이 없다....

출처 - http://storyofdream.tistory.com/95

저작자표시

'Development > jQuery' 카테고리의 다른 글

jquery ajax pagination 예제 (0)	2012.06.16
jQuery UI CSS Framework 3 - ibm (0)	2012.06.09
jQuery UI CSS Framework 1 (0)	2012.06.09
jQuery - getJSON POST (0)	2012.06.08
jQuery 추천 플러그인 (0)	2012.06.07