'UI'에 해당되는 글 2건
- 2011/06/04 :: UI에 대한 생각#1
- 2011/06/04 :: jQuery를 이용한 커스텀 alert 창
Think/UI/UX
2011/06/04 16:38
여러 사이트 및 여러 어플을 사용하면서 UI대해 느낀점이 몇가지 있어서.. 정리 차원에서 남깁니다.
1. 나쁜 UI란 UI가 존재하는걸 사용자가 인식하지 못하는 경우
2. 나쁜 UI란 UI가 존재하는걸 알고 있어도 귀찮아서 다른 UI를 사용하도록 만드는 UI
3. 더 나쁜 UI란 UI가 사용자의 생각과 다르게 작동하는 경우
1. 좋은 UI란 UI가 존재하는걸 사용자가 알기 쉽운 경우
2. 좋은 UI란 UI가 존재하는걸 사용자가 알기 쉽고 사용하기 쉬운 경우
3. 좋은 UI란 UI가 존재하는걸 알지 못하더라도 존재 확인 후(학습 후)에는 사용하기 쉬운 경우
4. 더 좋은 UI란 UI가 존재하는걸 사용자가 알지 못하는 상태에서 무의식적으로 사용 되는 경우
5. 더 좋은 UI란 사용자 행동 패턴 상 마우스 포인터나 시야의 변경 없이 무의식적으로 포인터가 위치하는 위치에 존재하는 UI
Language/Javascript
2011/06/04 16:37
기존 Alert 창이 모달이긴 하나, 디자인적인 수정도 안되며, 별로 아름답지 않아서.. jQuery를 이용해 커스텀 alert창을 만들게 되었다.
차후에 다른
CSS
#l_alert_bg { display:block; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000; }
#l_alert_bg.open { display:block; }
#l_alert_bg .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50); }
#l_alert { width:400px; background:#c5d8eb; padding:2px 2px 2px 2px; font-size:small; position:absolute; top:50%; left:50%; margin:-150px 0 0 -194px; line-height:normal; white-space:normal;}
#l_alert_title { height:20px; display:block; background:#9dc6ef; padding-top:3px; font-weight:bold; color:black; }
#l_alert_content { background:white; padding-top:5px; padding-bottom:10px; padding-right:5px; padding-left:5px; }
#l_alert_icon { float:left; background-image:url('/Content/alert_img.gif'); width:40px; height:40px; }
#l_alert_detail { margin-left:50px; padding-bottom:20px; }
#l_alert_btnSpace { background:#ddd;padding-top:5px; padding-bottom:2px; padding-right:5px; height:23px; clear:both; }
#l_alert_btnConfirm { height:18px; width:50px; border:double 3px black; float:right; text-align:center; cursor:pointer; background:white; padding-top:2px; }
#l_alert_btnConfirm a { text-decoration:none;}
JS
// 경고창 출력
function Alert(msg) {
var str = '';
str = '<div id="l_alert_bg" class=""><div class="bg"></div> ';
str = str + ' <div id="l_alert"> ';
str = str + ' <div id="l_alert_title"> ';
str = str + ' 확인 ';
str = str + ' </div> ';
str = str + ' <div id="l_alert_content"> ';
str = str + ' <div id="l_alert_icon"></div> ';
str = str + ' <div id="l_alert_detail">' + msg + '</div> ';
str = str + ' </div> ';
str = str + ' <div id="l_alert_btnSpace"> ';
str = str + ' <div id="l_alert_btnConfirm"><a href="#" onclick="AlertClose();">확인</a></div> ';
str = str + ' </div> ';
str = str + ' </div> ';
str = str + '</div> ';
$(str).appendTo(document.body);
$('#l_alert_bg').addClass('open');
}
function AlertClose() {
$('#l_alert_bg').remove();
return false;
}
function AlertT(title, msg) {
var str = '';
str = '<div id="l_alert_bg" class=""><div class="bg"></div> ';
str = str + ' <div id="l_alert"> ';
str = str + ' <div id="l_alert_title"> ';
str = str + ' ' + title + ' ';
str = str + ' </div> ';
str = str + ' <div id="l_alert_content"> ';
str = str + ' <div id="l_alert_icon"></div> ';
str = str + ' <div id="l_alert_detail">' + msg + '</div> ';
str = str + ' </div> ';
str = str + ' <div id="l_alert_btnSpace"> ';
str = str + ' <div id="l_alert_btnConfirm" onclick="AlertClose();"><a href="#" onclick="AlertClose();">확인</a></div> ';
str = str + ' </div> ';
str = str + ' </div> ';
str = str + '</div> ';
$(str).appendTo(document.body);
$('#l_alert_bg').addClass('open');
}
HTML
<a href="#" onclick="Alert('확인 버튼 누르시오..');">얼랏?</a>
<a href="#" onclick="AlertT('타이틀', '확인 버튼 누르시오..');">타이틀</a>