집에와서 와이프가 근무나간사이에 간만에 버닝되어서 다보면서 따라해보기 한 4시간정도.
따라해보면서 내가 해보고 싶은 내용들을 하나둘씩 넣어보는 것으로 무엇을 어떻게 할 수 있을지에 대한 생각들이 많이 들게 되는 것 같다.
좀더 UI 적으로 사용자에게 편하게 하는 방법은 무엇일까.. 라는 생각도 들고 무엇보다도 나도 이런 것을 할 수 있다는 생각이 들면서 왠지 너무 기쁘다는 생각이 드는 이유가 무엇일까. ^^
그리고, 오늘 꽤나 괜찮은 툴을 하나 발견.
Mac에서의 Killer S/W인 TextMate의 windows 버젼인 E-TextEditor 인데. 이거 사용법도 쉬우면서 너무나 간편한 인터페이스를 많이 가지고 있는 것 같다. Multi Select 변경이 가장 인상적인데. 좀더 사용을 해봐야지 될듯.
오늘 한 내용들 간단하게 정리.
1. toggleClass(), toggle()
: 오늘 회사에서 잠시 사용해서 그전까지 조금 어색했던 UI를 해결한 방법. css단까지 toggle로 보낼 수 있는 jQuery의 다양한 확장성에 정말 놀랄수밖에 없었다.;
<script type="text/javascript">
$(function() {
$('a').click(function() {
//$('#box').toggle(4000);
$('#box').toggleClass('border');
});
$('p').click(function() {
$(this).toggleClass('highlight');
})
});
</script>
2. animate 기능
: 단순히 style의 변경이 아닌, style의 점진적인 변경이 이루어지기 때문에 animation이 나타나게 된다. 화려한 UI를 꾸밀때에 도움이 될 것 같고, 무엇보다 menu같은 것에서 menu를 선택하고 menu를 확장하는데에 도움을 줄 수 있다.
<script type="text/javascript">
$(function() {
$('#container img').animate({
"opacity" : .5
})
$('#container img').hover(function() {
$(this).stop().animate({ "opacity" : 1 });
console.log("message");
}, function(){
$(this).stop().animate({"opacity" : .5})
});
$('#container img').click(function() {
$(this).animate( { "opacity" : 1 } );
console.log("click") ;
});
});
</script>
3. mouse event 기능
: 기본적으로 hover() 함수를 이용해서 mouse 에 대한 over를 잡아서 선택 가능하다. event를 function으로 잡아서 mouse의 좌표를 얻어서 작업하는 것은 windows application에서 동작하는 것과 거의 유사하게 움직이게 된다.
<script type="text/javascript">
$(function() {
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="image"/>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function(){
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$('#largeImgae')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
});
});
</script>
4. ajax 기능
: 오늘 본 내용들은 다른 html을 읽어서 그 안에 있는 내용을 긁어서 보여주는 것으로 매우 단순하긴 했지만, 다른 파일에 있는 항목을 긁어오는 것은 하나의 파일에서 너무나 많은 내용을 담고 있을때, 나눠주는 기능으로도 사용 가능해보인다. 조금 만 더 응용을 한다면 web service에서 얻어오는 결과를 다시 보내주는 것도 가능해보인다.
<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#info').load('index7.html #movies', function() {
$(this).hide()
.appendTo('#container')
.slideDown(1000);
alert($(this).id);
});
});
});
</script>
보면 볼 수록 내용들이 많아지고 재미있는 기능들이 많아진다는 느낌이 든다.
좀 더 해보고 싶고, 조금만 더 공부를 해서 javascript가 지원되는 tistory에서 한번 사용해볼까.. 하는 욕심도 생기고. 여러모로 공부하면 할수록 즐겁다는 느낌이 드는 framework이다.
구조도 한번 봐봐야지 될 것 같은데...
아직은 너무나 방대해서 구조까지는 볼 생각도 못하고 훝어보는 기분이 드는 것이 조금은 아쉽기만 하다.;
