'JavaScript'에 해당되는 글 9건

  1. 2008/08/20
    [JS] IE6인지 구분하기
  2. 2008/05/23
    flowchart.com의 js
  3. 2008/03/06
    탭메뉴는 어떻게 코딩 해야 할까? (3)
  4. 2007/12/05
    JSSpec용 EditPlus ACP,STX 파일
  5. 2007/08/31
    [JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기

[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

'작은 팁' 카테고리의 다른 글

IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (3) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
Posted by Johan Kim 기다림
tag IE6, JavaScript
Trackback 0 And Comment 0

flowchart.com의 js

| 웹/프로그래밍 2008/05/23 12:10
와우!
js파일중 하나가 26164줄;; 것도 압축한게;;

완전 토나온다 -ㅅ-;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹/프로그래밍' 카테고리의 다른 글

Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
api.rubyonrails.org renewal  (0) 2008/04/21
vista로 국민은행(kbstar.com)가기..  (0) 2008/03/25
관심사  (0) 2008/03/18
Posted by Johan Kim 기다림
tag JavaScript
Trackback 0 And Comment 0

탭메뉴는 어떻게 코딩 해야 할까?

| 작은 팁 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되어야 한다는 것이다.

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




압축파일(html, js, images)
tab-menu.zip





ps > 이거 스크롤의 압박이;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[JS] IE6인지 구분하기  (0) 2008/08/20
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (3) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
Posted by Johan Kim 기다림
tag CSS, HTML, JavaScript, MooTools, Semantic, tabmenu, 탭메뉴
Trackback 0 And Comment 3

JSSpec용 EditPlus ACP,STX 파일

| 작은 팁 2007/12/05 11:34
간략하게 JSSpec을 설명하자면 Javascript BDD 툴입니다.
JSSpec과 BDD에 대한 설명은 다음에 기회될때 포스팅하기로 하고..(과연..?)
일단, 자세한 설명은 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

'작은 팁' 카테고리의 다른 글

CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (4) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
JSSpec용 EditPlus ACP,STX 파일  (0) 2007/12/05
EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (2) 2007/10/01
[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (0) 2007/08/31
Posted by Johan Kim 기다림
tag acp, BDD, EditPlus, JavaScript, JSSpec, STX, 구문 파일, 자동 완성
Trackback 0 And Comment 0

[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기

| 작은 팁 2007/08/31 12:12
엄청 간단합니다.

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

'작은 팁' 카테고리의 다른 글

EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (2) 2007/10/01
[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (0) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
Posted by Johan Kim 기다림
tag JavaScript, trim, 여백
Trackback 1 And Comment 0
prev Prev [1] [2] Next next