'jQuery UI' 태그의 글 목록

'jQuery UI'에 해당되는 글 2건

2010.03.12 jQuery UI Theme 4
2010.02.22 Practice : jQuery Dialog & Validity

jQuery UI Theme

개발/jQuery 2010. 3. 12. 09:37

jQuery UI Theme를 Customizing하는 방법에 대해서 알아보도록 하겠습니다.

먼저 jQeury UI CSS Framework에 대한 구조를 살펴보고 아래의 2가지 방법을 통해서 Theme를 변경해보도록 하겠습니다.
1. ThemeRoller를 이용한 방법
2. jQuery UI CSS Framework를 직접 변경하는 방법

jQuery UI의 Theme는 표준 스타일과 각 컨트롤의 스타일이 합쳐져서 구성됩니다. jQuery UI Theme중에 'ui-lightness'를 다운받고 압축을 풀어서 themes폴더를 보면 아래 그림과 같습니다.

=> 앞에서 말한 표준 스타일에 해당하는 파일은 'ui.theme.css'입니다. 'ui.core.css'는 Layout Helpers, Icos 등에 대한 클래스들이 존재하고 'ui.base.css'는 'ui.core.css'와 각 컨트롤에 대한 css파일을 import해주는 파일이며 ui.all.css는 'ui.base.css'와 'ui.theme.css'파일을 import해주는 파일입니다. 그리고 마지막으로 'jquery-ui-1.7.2.custom.css'는 이런 모든 파일을 단순히 모아놓은 파일이고 실질적으로 프로젝트를 진행하면서는 이 파일 하나만을 참조해서 사용합니다.
'ui.theme.css'파일을 열어보면 widget이라는 container가 보입니다. 이것은 각 컨트롤마다 공통되는 부분의 스타일을 정의해놓은 클래스입니다. 따라서 ui-widget-header를 변경해주면 jQuery UI 컨트롤인 dialog, datepicker, tabs, progressbar등 모든 컨트롤의 header가 변경됩니다.
개인적으로 가장 재미있는 부분은 바로 icon입니다. images폴더에 보면 하나의 파일에 여러 가지 아이콘 모양이 있는 것이 보입니다. 그리고 똑같은 위치에 색깔만 다른 아이콘 가지고 있는 것을 볼 수 있습니다.

.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }

.ui-icon-alert { background-position: 0 -144px; }

.ui-icon-info { background-position: -16px -144px; }

.ui-icon-notice { background-position: -32px -144px; }

.ui-icon-help { background-position: -48px -144px; }

.ui-icon-check { background-position: -64px -144px; }

.ui-icon-bullet { background-position: -80px -144px; }

.ui-icon-radio-off { background-position: -96px -144px; }

.ui-icon-radio-on { background-position: -112px -144px; }

.ui-icon-pin-w { background-position: -128px -144px; }

.ui-icon-pin-s { background-position: -144px -144px; }

.ui-icon-play { background-position: 0 -160px; }

.ui-icon-pause { background-position: -16px -160px; }

.ui-icon-seek-next { background-position: -32px -160px; }

=> icon 역시 widget으로 각 부분(여기서는 header)별로 지정할 수 있습니다. 백그라운 이미지로 하나의 파일을 첨부해주는 것을 볼 수 있으며 파일명에서 그 색깔(ffffff:흰색)을 알 수 있습니다. 그리고 밑을 보면 하나의 파일에 position으로 아이콘을 나타내고 있습니다. 그래서 첨부되는 아이콘 파일은 한 가지이며 그 위치가 모두 동일한 색만 다른 파일 이였던 것입니다. 이런 파일을 만드는 것은 어렵겠지만 이미 만들어진 파일이 있으므로 해당 파일만 변경해주면 jQuery UI에 사용된 모든 아이콘의 색을 변경할 수 있는 것입니다. 바로 css를 사용하는 이유이기도 합니다.

그러면 이제 테마를 변경해보겠습니다.
1. ThemeRoller를 이용한 방법
http://jqueryui.com/themeroller/

아래의 사이트를 가보면 갤러리에 이미 20개정도의 테마가 존재하며 해당 테마를 선택하고 이름에서도 알 수 있듯이 font, header, content 등을 변경하면 오른쪽에 화면에서 적용되는 컨트롤 전부를 볼 수 있습니다. 이렇게 변경한 이후에 download theme 를 클릭하게 되면 변경된 테마로 jQuery UI를 다운받을 수 있습니다.

2. jQuery UI CSS Framework를 직접 변경하는 방법
특정한 스타일로 변경해야 하는 것이 아니라면 ThemeRoller를 이용하면 대부분 해결이 됩니다. 그러나 특정 이미지를 백그라운드 이미지로 하고 싶은 경우처럼 수동으로 변경해야 할 경우도 생길 수 있습니다.
만약에 dialog 컨트롤에 백그라운드 이미지로 특정한 파일을 보여주고 싶다면 어떻게 해야 될까요?

'jquery-ui-1.7.2.custom.css'파일에서 아래의 부분을 변경해주시면 됩니다.

.ui-dialog .ui-dialog-titlebar { padding: .5em .3em .3em 1em; position: relative; }

.ui-dialog .ui-dialog-title { float: left; margin: .1em 0 .2em; }

.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }

.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }

.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }

.ui-dialog .ui-dialog-content { border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }

.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }

.ui-dialog .ui-dialog-buttonpane button { background-image: url(images/파일명) ; float: right; margin: .5em .4em .5em 0; cursor: pointer; padding: .2em .6em .3em .6em; line-height: 1.4em; width:auto; overflow:visible; }

=> dialog 컨트롤이기 때문에 당연히! ui-dialog클래스를 찾아주면 됩니다. 위와 같이 이름만 보아도 알 수 있는 클래스와 그 클래스에 대한 속성들이 나열되어 있습니다. dialog 컨트롤에는 여러 개의 버튼이 올 수 있기 때문에 buttonpane이라는 것도 보이고 titlebar, cotent 등등 변경이 참 쉬워 보입니다. ^^

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

Posted by resisa

Practice : jQuery Dialog & Validity

개발/jQuery 2010. 2. 22. 00:00

이번 포스트에서는 jQuery UI의 Dialog와 Validity라는 플러그인을 사용해보도록 하겠습니다. 먼저 아래의 사이트에서 다운로드 받으시면 됩니다.
http://jqueryui.com/
http://validity.thatscaptaintoyou.com/

Validity에서 Validation 메세지를 보여주는 방식은 3가지 있습니다. Label, Modal, Summary입니다. Summary방식을 사용하면 Validation 메세지를 한꺼번에 지정된 위치에 보여줄 수 있어 Summary 방식을 사용하였습니다. 그런데 여러 개의 Dialog에 Summary를 사용하다 보니 Dialog에서 Validation를 체크하는 코드가 실행되고 난 이후에 다른 Dialog에의 Validation메세지가 한꺼번에 보여지는 문제점이 있었습니다. Validity 코드를 살펴보니 validity-summary-container라고 class가 지정된 Dialog의 Validation를 사용하고 있었기 때문입니다. 그래서 저는 마스터 페이지에 Validation메세지를 보여주는 div태그를 하나 두고 해당 div태그를 Dialog에 prepend해주는 방식으로 사용했습니다.

마스터 페이지 추가 코드

</div>

초기화 코드

$(function() {

$.validity.setup({ outputMode: "summary" });

$("#dialog").dialog({

width: "auto",

bgiframe: true,

autoOpen: false,

modal: true,

resizable: false,

close: function() {

var allFields = $([]).add($("#id")).add($("#name"));

allFields.val('');

$.validity.clear();

}

});

$("#create").click(Create);

$("#modify").click(Modify);

});

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

=> 먼저 Validity의 모드를 Summary로 해준 것을 볼 수 있고 dialog()를 사용하여 해당 div태그를 초기화 해주었습니다. 이렇게 초기화를 해주게 되면 해당 div태그는 화면에 보이지 않는 효과가 있습니다. 그리고 Create, Modify 이벤트를 등록해주는 것을 볼 수 있습니다. Delete와 같은 경우에는 Delete에 해당하는 Dialog를 따로 만들어서 사용하는 것이 바람직해 보여 여기서는 제외하였습니다.
close를 살펴보면 재미있는 문법이 보입니다. jQuery Object를 배열 형태로 만들어서 id와 name이라는 jQuery Object를 Add해주고 val('')이라는 메소드를 사용하여 배열 안에 존재하는 모든 jQuery Object를 초기화 해주는 것을 볼 수 있습니다. 실질적으로 여러 데이터가 존재하고 초기화 해주는 내용이 다르다면 하나씩 초기화 해주는 것이 맞지만 여기서는 해당 문법이 재미있어 보여 한 번 사용해보았습니다. 그리고 Validity의 Clear()메소드를 호출해주어서 Validation메세지도 초기화 해줍니다. 여기서 close가 가장 중요한 부분인데 이제 Create, Modify에서 만들게 될 Buttons에서 이 close를 호출해줌으로써 Dialog의 상태가 항상 초기화 상태로 돌아갈 수 있게 되는 것입니다. 그러면 Create에 대한 코드를 먼저 보도록 하겠습니다.

function Validate() {

$.validity.start();

$("#id").require();

$("#name").require();

var result = $.validity.end();

$("#dialog").prepend($("#validity"));

return result.valid;

}

function Create() {

var options = {

title: "Create",

buttons: {

OK: function() {

if (Validate()) {

// Execute Server Side Call

$(this).dialog('close');

}

Cancle: function() {

$(this).dialog('close');

}

};

$('#dialog').dialog('option', options);

$('#dialog').dialog('open');

}

=> $(function(){})에서 Create이벤트를 추가해주었기 때문에 Create라는 button를 클릭하게 되면 위의 Create 함수가 실행이 됩니다. 먼저 Dialog의 title를 지정해주고 button를 만들어줍니다. 여기서는 ok, cancle 두 개의 버튼을 만들어주는데 공통적으로 $(this).dialog('close')를 호출하는 것을 볼 수 있습니다. 바로 이 부분이 이전에 초기화 코드에서의 close부분을 호출해주는 것입니다. ok버튼에서는 Validate라는 함수를 호출해줍니다. Validate라는 함수를 살펴보면 require라는 Validity에서 제공해주는 함수를 사용하는데 id, name중에 하나라도 공백으로 놔두고 ok버튼을 클릭하면 false가 리턴되어 Validation를 체크하는 것입니다. 이외에도 match, range, greaterThan 등등 많은 함수를 Validity에서 제공해주며 사용방법은 Validity 사이트의 문서를 참고하시기 바랍니다.

거의 모든 경우의 Create나 Modify의 양식은 똑같을 것입니다. 이번에는 Modify 함수의 코드를 보도록 하겠습니다.

function Modify() {

    var options = {
        title: "Modify",
        buttons: {
            OK: function() {
                if (validate()) {
                    // Execute Server Side Call
                    $(this).dialog('close');

}

Cancle: function() {

$(this).dialog('close');

}

};

$('#dialog').dialog('option', options);

$('#dialog').dialog('open');

}

=> Create와 유사합니다. 실질적으로 모두 구현을 한다면 buttons에의 ok버튼의 Server Side를 호출해주는 부분과 Modify기 때문에 Dialog를 띄우기 전에 id, name에 수정되기 전의 값을 조회해서 넣어주는 코드가 필요합니다.
jQuery UI의 Dialog를 이용하여 CRUD를 해줄 경우에 이러한 방법으로 구현하는 것이 제가 사용하는 가장 심플한 방법입니다.