달력

09

« 2010/09 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
2008/08/20 11:13

[JS] IE6인지 구분하기 작은 팁2008/08/20 11:13

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;

if(IE6) {
  alert("i love ie");
}


참고링크
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim 기다림
2008/05/23 12:10

flowchart.com의 js 웹/프로그래밍2008/05/23 12:10

와우!
js파일중 하나가 26164줄;; 것도 압축한게;;

완전 토나온다 -ㅅ-;
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim 기다림
2008/03/06 14:53

탭메뉴는 어떻게 코딩 해야 할까? 작은 팁2008/03/06 14:53

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 '2' 라는 값을 만들기 위해서
  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4
같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고...
  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록
위의 사항들을 고려하며 코딩되었다.

<menu id="tab_menus">
html markup 결과

    <li class="selected"><a href="#Menu_01">Menu 01</a></li>
    <li><a href="#Menu_02">Menu 02</a></li>
    <li><a href="#Menu_03">Menu 03</a></li>
</menu>
<div class="tab_right"></div>

<div id="Menu_01" class="content">
    <h3>Menu 01</h3>
    <p>Menu 01...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_02" class="content">
    <h3>Menu 02</h3>
    <p>Menu 02...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_03" class="content">
    <h3>Menu 03</h3>
    <p>Menu 03...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>

tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.

이제는 tab menu스럽게 꾸며보자.

body {
    font:12px arial;
}
a {
    text-decoration:none;
}
img {
    border:0;
}

/* tab menu */
#tab_menus {
    margin:0;
    padding:0;
    list-style:none;
}
#tab_menus li {
    margin-bottom:16px;
    float:left;
    padding:0px;
}
#tab_menus li a {
    padding:8px 10px;
    color:#505050;
    border-width:1px 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    background-color:#eae4e0;
    background-image:none;
    font-weight:bold;
    font-size:0.9em;
    display:block;
}
#tab_menus li a:hover {
    color:black;
}
#tab_menus li.selected a {
    border-bottom:0 solid white;
    background:white url("blt_arrowdown.gif") no-repeat center bottom;
    color:black;
}
CSS 적용 후 모습

.tab_right {
    margin-bottom:16px;
    border-width:0 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    width:80px;
    height:31px;
    float:left;
}

/* content */
.content {
    clear:both;
    padding-left:10px;
}
.content h3 {
    margin:0;
    padding:0;
    font-size:1.2em;
    color:#ff4800;
}

tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다.
#Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재!
Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..

자 이제는 마무리. Javascript로 tab menu 동작을 만들자.
mootools 1.11(Element.Event, Element.Selectors)을 이용하였다
var selected_menu = 0;
Javascript 적용 후 모습

var menus = $$('#tab_menus li');
var contents = $$('div.content');
contents.each(function(div, i) {
    if (i != 0) {
        div.setStyle('display', 'none');
    }
})

menus.each(function(quick_link, i) {
    quick_link.getElement("a").blur();
    quick_link.addEvent('click', function(event) {
        e = new Event(event).stop();
        contents[selected_menu].setStyle('display', 'none');
        menus[selected_menu].removeClass('selected');

        contents[i].setStyle('display', 'block');
        quick_link.addClass('selected');
        selected_menu = i;
    });
});

#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다.
만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다.
Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.


결론.
결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.

다운로드
미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)



압축파일(html, js, images)





ps > 이거 스크롤의 압박이;;
크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim 기다림
2007/12/05 11:34

JSSpec용 EditPlus ACP,STX 파일 작은 팁2007/12/05 11:34

간략하게 JSSpec을 설명하자면 Javascript BDD 툴입니다.
JSSpecBDD에 대한 설명은 다음에 기회될때 포스팅하기로 하고..(과연..?)
일단, 자세한 설명은 JSSpec홈페이지 http://code.google.com/p/jsspec/를 참고하세요~

Editplus용 자동완성파일 ACP, 구문파일 STX을 만들었습니다.
jscript.zip (2007-05-10)
JScript stx with Prototype.js - W. Jordan
jscript.acp.zip (2007-05-10)
JScript acp, ctl with Prototype.js - W. Jordan
이것들이 원본인데 제 입맛에 맞춰서 수정을 해서 쓰다가 JSSpec구문을 추가한 것입니다.
원본이 With Prototype이어서 prototype을 쓰시는 분들께는 사용하시기 더 편리하지 않을까 생각합니다.

만약 사용하시던 ACP, STX가 있으시면 제가 추가한 부분(JSSpec으로 검색해서 나오는 부분)만 현재 사용하시는 파일에 추가를 해주시면 됩니다.

다운로드 >>http://editplus.com/kr/html.html 에서 다운받으실 수 있습니다. (js7.zip)




acp에 추가된 내용
#T=_________________
#T=  JSSpec
#T=jss
describe("^!", {
    "should ": function() {
       
    }
});
#T=vof
value_of("^!")
#T=ept
expect(^!)
#T=sb
should_be(^!)
#t=snb
should_not_be(^!)
#t=sbe
should_be_empty(^!)
#t=snbe
should_not_be_empty(^!)
#t=sbt
should_be_true(^!)
#t=sbf
should_be_false(^!)
#t=snbt
should_not_be_true(^!)
#t=snbf
should_not_be_false(^!)
#t=sh
should_have(^!)
#t=she
should_have_exactly(^!)
#t=shal
should_have_at_least(^!)
#t=sham
should_have_at_most(^!)
#t=si
should_include(^!)
#t=sni
should_not_include(^!)
#t=sm
should_match(^!)
#t=snm
should_not_match(^!)
#t=sf
should_fail(^!)

stx에 추가된 내용
#KEYWORD=JSSPec
describe
value_of
expect
beforebe_each
should_be
should_not_be
should_be_empty
should_not_be_empty
should_be_true
should_be_false
should_not_be_true
should_not_be_false
should_have
should_have_exactly
should_have_at_least
should_have_at_most
should_include
should_not_include
should_match
should_not_match
should_fail

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim 기다림
엄청 간단합니다.

String.prototype.trim = function(){
    return this.replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g, "");
}

String.prototype.ltrim = function(){
    return this.replace(/^(\s|&nbsp;)+/g, "");
}

String.prototype.rtrim = function(){
    return this.replace(/(\s|&nbsp;)+$/g, "");
}

str = "  &nbsp;1234567890   ";
ltrim = str.ltrim();
rtrim = str.rtrim();
trim = str.trim();

result = "<pre>orignal = \"" + str + "\"\n";
result += "ltrim length = " + ltrim.length + ", string = \"" + ltrim + "\n";
result += "rtrim length = " + rtrim.length + ", string = \"" + rtrim + "\n";
result += "trim length = " + trim.length + ", string = \"" + trim + "\n";

document.write(result);

크리에이티브 커먼즈 라이선스
Creative Commons License
Posted by Johan Kim 기다림