Click Event Binding with Clickable Elements

너무 기초적인 내용인데, 이리 저리 사이트 둘러다니다보면 생각보다 지켜지지 않는 경우가 많아서 포스팅 하기로 했지만..사실 별 내용없다.
요점은 click 이벤트는 clickable한 요소에 등록하자.

내 눈은 Clickable 하지않거든? ㅋㅋ

먼저 아래 코드를 보자.

<img onclick="like('post', 1)" alt="좋아요" src="btn_like.png" />

위 코드는 시멘틱(Semantic)하지 않고,
clickable하지 않은 요소에 이벤트를 등록해 키보드로 이용을 할 수 없다는 또 다른 문제점이 있다.
이것은 접근성적인 측면에서 큰 문제가 된다.

너무나 당연해 얘기하는것 조차 민망하지만, click 이벤트가 일어나는것들은 Clickable한 요소를 이용해 마크업을 해야한다.
클릭커블한 요소들은

  • a
  • button
  • input type=”button”
  • input type=”submit”

정도가 있다.

그러므로 위 img태그는 아래와 같이 수정되어야 한다.

<a href="#" onclick="like('post', 1)"><img alt="좋아요" src="btn_like.png" /></a>

href에 알맞은 url까지 적어주면 금상첨화.

<a href="/like?content_type=post&content_id=1" onclick="like('post', 1)"><img alt="좋아요" src="btn_like.png" /></a>

아. 물런 url은 실제로 동작을 해야한다.

이것만으로도 충분하지만, html과 js를 분리시키는게 더 나은 방법(Unobtrusive)임으로 분리를 시켜준다.

<a href="/like?content_type=post&content_id=1" data-content-type="post" data-content-id="1" class="like-button"><img alt="좋아요" src="btn_like.png" /></a>

이런식으로 필요한 정보들은 data 속성(attribute)를 이용해서 제공을 하고

.like-button에 이벤트(event)를 등록(bind)한다.

$(".like-button").click(function(e) {
  e.preventDefault();
  var content_type = $(this).attr("data-content-type");
  var content_id = $(this).attr("data-content-id");

  // ajax ...
});
광고

IE6인지 구분하는 또 다른 방법

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

 

if(IE6) {
alert(“i love ie”);
}

참고링크

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

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 ‘2’ 라는 값을 만들기 위해서

  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4

같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고…

  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록

위의 사항들을 고려하며 코딩되었다.

<menu id=”tab_menus”>
<li><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></div>

<div id=”Menu_01″>
<h3>Menu 01</h3>
<p>Menu 01…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_02″>
<h3>Menu 02</h3>
<p>Menu 02…blablablablabla</p>
<a href=”#tab_menus”><img src=”btn_top.gif” alt=”go tab menu” /></a>
</div>
<div id=”Menu_03″>
<h3>Menu 03</h3>
<p>Menu 03…blablablablabla</p>
<a href=”#tab_menus”><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;
}
.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;
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 > 이거 스크롤의 압박이;;

 

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

엄청 간단합니다.

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);

 

timestamp 를 date 형식으로 보여주기(like php date())

timestamp 로 받은 값을 원하는 date형식으로 보여주는 겁니다.
아주 간단하므로, 원하시는대로 살을 붙여서 사용하시면 됩니다.
샘플로 월을 영어로 표기하도록 해봤습니다.

소스코드

var DateFormatter = {
month : [‘Jan’,’Feb’,’Mar’,’Apr’,’May’,’Jun’,’Jul’,’Aug’,’Sep’,’Oct’,’Nov’,’Dec’],
parse : function(timestamp, format) {
var timestamp = parseInt(timestamp);
if(timestamp < 10000000000) timestamp *= 1000;

_date = new Date();
_date.setTime(timestamp);

var year = _date.getFullYear();
var month = this.month[_date.getMonth()];
var day = _date.getDate();

var hour = _date.getHours();
var min = _date.getMinutes();
var sec = _date.getSeconds();

if(format){
format = format.replace(/y/i, year);
format = format.replace(/m/i, month);
format = format.replace(/d/i, day);
format = format.replace(/h/i, hour);
format = format.replace(/i/i, min);
format = format.replace(/s/i, sec);

return format;
}
else{
return day + ” ” + month + ” ” + year;
}
}
};

사용예제

var timestamp = new Date().getTime();
alert(DateFormatter.parse(timestamp));
alert(DateFormatter.parse(timestamp, ‘d m y h:i:s’));

 

HTML Attribute Parser

HTML Element의 Attribute를 전부 뽑아 각각을 Object로 만들어 주는 코드입니다.
HTML Parser가 Element의 Attributes를 뽑는것과 비슷하다고 생각하시면 됩니다.

getAttribute 와의 차이점은, 제가 만든 정규식은 Element의 모든 Attributes를 Attribute와 value로 가져오는 것이죠.
무슨말인지 모르시겠죠?

<img src=”a.jpg” width=”100″ height=”100″ alt=”bla..” align=”right”>

에서

src=”a.jpg” width=”100″ height=”100″ alt=”bla..” align=”right”

만 뽑아서 각각 object로 만들어 줍니다. 즉

[“height=”100″”, “height”, “100”]

같은 형태로 뽑아주는거지요.

여기까지 끈기있게 읽으신분들은 “근데 이거 만들어서 어따 쓸려고..” 라는 의문점이 드실거에요.(의문점이 드시면 당신은 천재..!!?? 혹은 동변상련을 느끼시는 분들..??)
이걸 왜 만들었냐하면, Wiki에 쓸 Formatter를 만드는데 거기에 쓸려고 만든 정규식입니다.
(Formatter 같은거 만들때 꽤나 유용하게 쓰일 정규식입니다.)

wiki 혹은 punBB같은 Formatter가 있는것들은 내부적으로 문법이 있습니다. 문법따라 여러가지 옵션들이 붙는데 이 옵션을 뽑아내서 처리하는 부분이 필요하죠.
바로 이 문제때문에 만들게 된 것입니다.
무슨말이신지 잘 모르시겠죠?? 그러실것 같아서 아래 예제를 준비했습니다.

[[image(src = “a.jpg” width  = 100% height=”50″ alt=”bla..!! bla… ;(” align=”center”)]]

와 같은 문법이 있다고 한다면, 각각의 Attribute을 뽑아서 선행처리(Attribute가 옳바른 것인가? 쉽게 말하면 onclick 같은게 있는가..검사하는 등등)해야 하고,
Attribute속성에 맞게 다시 수정을 해줘야 합니다.(width, height같은것은 css로 만드는 등등)

이런것에 아주 유용하게 쓰일 정규식입니다.

쓸대없이 두서가 길었네요.
Formatter에서 [[image(~~~)]] 는 제거하여 순수하게 Attribute만 남기겠습니다.
그렇게 되면

src = “a.jpg” width  = 100% height=”50″ alt=”bla..!! bla… ;(” align=”center”

만 남겠죠, 이걸가지고 예제를 하겠습니다.

var getAttributes = function(attributes){
var param_regExp = /(\w+)\s*=\s*((?:\”|\’)[\w\s.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?(?:\”|\’)|[\w.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?)(?:\s+?|$)/i;
nextMatch = 0;

while(attributes){
if(nextMatch < attributes.length){
attribute = param_regExp.exec(attributes.substr(nextMatch, attributes.length));
nextMatch = nextMatch + attribute[0].length;

document.write(attribute[0] + ” : ” + attribute[1] + ” => ” + attribute[2] + “<br />”);

if(nextMatch >= attributes.length){
return;
}
}
}
}

getAttributes(“src  = \”a.jpg\” width  = 100% height=\”50\” alt=\”bla..!! bla… ;(\” align=\”center\””);

뛰워쓰기( ), 쌍따움표(“), 홀따움표(‘), 세키콜론(;), 괄호({([) 등등 특수문자처리도 됩니다.

이 몇줄 안되는 코드를 짜기위해 몇시간을 소비한것인지..ㅠ,.ㅠ
검색해보면 쉽게 나올지도 모른다는 생각이…왜 이제서야 든걸까요..ㅠ,.ㅠ

ps> 지금 시간이 새벽 1시 11분이군요.. 왠지 오타도 많을것 같고, 말도 많이 틀릴것 같은데..
그러려니하고 봐주세요;;