jQuery.UI를 이용하여 디자이너 없이 디자인 하기 II

728x90

안녕하세요~

저번 포스팅에서는 Button만 UI를 이용하였 었는데, 다른 UI도 같이 사용하다가 스킨 바꾸기도 귀찮고..그래서 전체를 UI를 써서 만들어봤어요~

1. jQuery.UI가 사용된기능

가. Button

- <Button></Button> 태그 뿐만 아니라, <Input type='radio'> 태그도 사용 했습니다.

나. UI관련 Css

- .ui-state-default

- 기타 아이콘(".ui-icon-search", ".ui-icon-plusthick"...)

다. Dialog

2. 테이블 디자인

가. 테이블 디자인에 사용된 태그

- <table></table> : 테이블을 나타내는 태그

- <caption></caption> : 테이블 제목을 나타내는 태그

- <col />: 태이블의 Column의 속성을 지정해 주는 부분

- <thead></thead>: 테이블에서 해더를 나타내는 태그

- <tbody></tbody>: 테이블에서 바디를 나타내는 태그

- <tfoot></tfoot>: 테이블에서 풋을 나타내는 태그

- <tr></tr> : 테이블의 Row를 나태내는 태그

- <th></th>: 컬럼 강조를 나타내는 태그(보통 <thead></thead>안에 사용한다.)

- <td></td>: 컬럼을 나타내는 태그

나. HTML 코드

<table cellpadding="0" cellspacing="0" width='100%' class='ui-widget'>
   <caption class='ui-widget-header '>Web Inventory - Ver.1.0.1. </caption>
   <col width="12%" />
   <col width="12%" />
   <col width="12%" />
   <col width="16%" />
   <col width="16%" />
   <col width="16%" />
   <col width="16%" />
   <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>
   </tr>
   <tr>
   <th>NetSol</th>
   <th>NetSol</th>
   <th>Amazon</th>
   <th>eBay</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>
   </tr>
   </tbody>
   </table>

다. jQuery.UI코드

$(function() {
$('table thead tr th').addClass('ui-state-default'); //해더 컬럼에 ui-state-default class를 추가해준다
$('table tbody tr td').addClass('ui-widget-content td-clear');//body컬럼에 ui-widget-content 와 td-clear 추가해준다. 여기에서 td-clear는 내가 만든 css로서 backgroudn를 지우기 위해 만들었다. 코드는 .td-clear{background:#fff; } 이다.

$("#btnsearch").button({ icons: { primary: 'ui-icon-search'} });//Button설정

$("#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'} });

});

라. css

table {

border-collapse: collapse;

}

table td, table th {

padding: 5px;

vertical-align: middle;

font-size:0.8em;

}

table thead tr th {

text-transform: uppercase;

}

table tfoot tr th, table tfoot tr td {

text-transform: uppercase;

font-weight: bold;

}

table caption {

font-size: 1.1em;

font-weight: bold;

letter-spacing: -1px;

margin-bottom: 10px;

padding: 5px;

}

.td-clear

{

background:#fff;

}

마. 화면

3. Dialog Box 디자인

가. 사용된 코드

- <div></div> : DialogBox의 기본 Panel

- <button></button> : 전송을 위한 버튼

나. HTML코드

<div id='importPanel' title='Import Infomation' style='display:none;'> 

<form id="frmWebInventoryFile" enctype="multipart/form-data" method="post" action="CSVImportExport/CSVImport.aspx">

Update Option:

<input type="radio" runat='server' name='rdoUpdateOption' id='rdoProductList' onclick='SelUpdateOption()' /><label for="rdoProductList" style='margin:5px;'>Product List</label>

<input type="radio" runat='server' name='rdoUpdateOption' id='rdoSalesOrder' onclick='SelUpdateOption()'/><label for="rdoSalesOrder" style='margin:5px;'>Sales Order</label>

</div>

Company:

<input type="radio" runat='server' name='rdoCompany' id='rdoSelini' onclick='SelCompany(0)' /><label for="rdoSelini" style='margin:5px;'>SeliniNY</label>

<input type="radio" runat='server' name='rdoCompany' id='rdoBoxed' onclick='SelCompany(1)' /><label for="rdoBoxed" style='margin:5px;'>Boxed-Gifts</label>

</div>

Data Type:

<input type="radio" runat='server' name='rdoDataType' onclick='SelDataType()' id='rdoNetsol' /><label id='lblNetsol' for="rdoNetsol" style='margin:5px;' >NetSol</label>

<input type="radio" runat='server' name='rdoDataType' onclick='SelDataType()' id='rdoAmazon' /><label id='lblAmazon' for="rdoAmazon" style='margin:5px;'>Amazon</label>

</div>

<label>Import: </label>

</form>

</div>

다. jQuery.UI코드

$(function() {

var frm = $('#frmWebInventoryFile');

frm.ajaxForm(FileUploadCallBack);//jQuery.Form.JS 사용을 위한 콜벡처리

$("#btnimport").click(function() {

$('#importPanel').dialog({ width: 500, modal: true });//Dialog그로 만드는 명령어

return false;

});

//Input type='radio' 를 버튼으로 그룹화 시키는 코드

$('#UpdateOptionPanel').buttonset();

$('#CompanyPanel').buttonset();

$('#DataTypePanel').buttonset();

//버튼 활성화/비활성화 코드

$('#rdoSelini').button({ disabled: true });

$('#rdoBoxed').button({ disabled: true });

$('#rdoAmazon').button({ disabled: true });

$('#rdoNetsol').button({ disabled: true });

$('#rdoeBay').button({ disabled: true });

//버튼 iCon지정

$("#btnSend").button({

icons: { primary: 'ui-icon-signal-diag' },

disabled: true

});

$("#btnSend").click(function() {

if (ImportErrorCheckUp()) {

FileUpload();

}

});

라. 화면

자~~간단하게 코드 몇줄로서 끝냈다.

jQuery.UI알면 알수록 참 괜찮은것 같다.

특히나 디자이너 없이 일하는 나에게는 약간이나마 디자인을 한 듯한 모양을 만들어 주니깐~ㅋㅋ

다음에 시간나면 jquery.form.js를 이용한 비동기 파일 전송에 대해서 한번 포스팅 해야겠다.

오늘은 이만~

끝.

728x90

저작자표시 비영리 변경금지

prographer J

jQuery.UI를 이용하여 디자이너 없이 디자인 하기 II

댓글

티스토리툴바

jQuery.UI를 이용하여 디자이너 없이 디자인 하기 II

관련글

댓글

티스토리툴바