블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

calendar

        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      

우아하게 화면 scroll 하기

2012.12.20 05:55 | Posted by 솔웅


.animate()   와 .scrollTop()


웹 앱을 개발하다 보면 textfield 를 사용하는 경우가 많이 있습니다.

그리고 이 textfield 가 있는 화면을 모바일 디바이스에서 사용하려면 screen keyboard를 사용해야 되죠.
평상시에는 별 문제가 없는데 이걸 autocomplete 기능과 같이 사용하게 되면 문제가 발생할 수도 있습니다.

screen keyboard 가 리스트의 일부 아이템을 가려버려서 유저가 그 아이템을 클릭할 수 없게 될 수 있거든요.




화면 키보드 밑에 아이템이 깔려 있습니다.

이럴 경우 scroll 이 안되는 layout 하면이라면 유저가 많이 불편하겠죠.

이럴경우 jQuery 의 .animate() 과 .scrollTop() 함수를 사용하면 아주 우아하게 화면을 스크롤 업해서 유저 친화적인 인터페이스를 제공할 수 있습니다.
보통 자바스크립트의 window.scrollTo(x, y);를 사용하셔도 되는데요. 좀 더 자연스럽게 움직이도록 하기 위해 이 두 메소드를 사용하면 좋습니다.

저는 아래와 같이 사용했습니다.

$('body,html').animate({scrollTop: 160 }, 900);

textfield 에 focus 가 가서 키보드가 올라왔을 때.


$('body,html').animate({scrollTop: 0 }, 500);

키보드가 다시 내려갔을 때 화면을 다시 원상 복구 함.

숫자는 마음대로 넣으시면 됩니다.

이해를 돕기 위해 우선 .animate() 함수 예제를 볼까요?


<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="go">&raquo; Run</button>

<div id="block">Hello!</div>
<script>

/* Using multiple unit types within one animation. */

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>

</body>
</html>


#go 를 클릭하면 width 가 화면의 70%로 늘어나고 투명도도 바뀌고 폰트 사이즈, border 굵기 등이 바뀝니다. 이 동작은 1.5초 동안 일어납니다.


tistory551_01.html


위 파일을 다운 받아서 실행해 보세요.

예제 하나 더 보면요.


<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

</script>

</body>
</html>


#right, #left 를 클릭하면 .block을 각각 50픽셀씩 오른쪽 혹은 왼쪽으로 움직이는 소스입니다.


tistory551_02.html

.scrollTop()에 대한 예제도 보죠.


<!DOCTYPE html>
<html>
<head>
 
<style>
div
.demo {
background
:#CCCCCC none repeat scroll 0 0;
border
:3px solid #666666;
margin
:5px;
padding
:5px;
position
:relative;
width
:200px;
height
:100px;
overflow
:auto;
}
  p
{ margin:10px;padding:5px;border:2px solid #666;width:1000px;height:1000px; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div class="demo"><h1>lalala</h1><p>Hello</p></div>
<script>$("div.demo").scrollTop(300);
</script>

</body>
</html>

tistory551_03.html


이 예제를 실행하면 작은 화면안에 페이지가 위에서 300픽셀 내려간 부분이 중앙이 되도록 display 할 겁니다.


이 두개를 조합해서 사용한 예제도 하나 올릴테니까 다운 받아서 보세요.

scroll-to-top.zip


.clone() 메소드 알아보기

2012.08.23 21:25 | Posted by 솔웅


.clone()


.clone()은 말그대로 복제 해 놓는 겁니다.


<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>

이 코드를 가지고 아래 처럼 표현하면

$('.hello').appendTo('.goodbye');

그 결과는

<div class="container"> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div>

이렇게 나올 겁니다.

hello 클래스를 goodbye 클래서 다음에 appendTo 했으니까요.
그런데 Hello를 그대로 유지하면서 goodbye 클래스 다음에 hello 클래스를 다시 넣고 싶을

때 clone()을 쓰시면 됩니다.


$('.hello').clone().appendTo('.goodbye');

이렇게 하면 .hello 클래스의 복제를 만들어서 goodbye 클래스의 뒤에 appendTo를 할 겁니다.
그 결과는 아래와 같겠죠.

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

이벤트 핸들러까지 clone 하고 싶으면 withDataAndEvents parameter를 사용하면 됩니다.

var $elem = $('#elem').data( "arr": [ 1 ] ), // Original element with attached data $clone = $elem.clone( true ) .data( "arr", $.extend( [], $elem.data("arr") ) ); // Deep copy to prevent data sharing





예제파일을 보죠.

<!DOCTYPE html>
<html>
<head>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
 
<b>Hello</b><p>, how are you?</p>

<script>
  $
("b").clone().prependTo("p");
</script>

</body>
</html>


b 태그에 있는 내용을 복제해서 p 태그에 붙입니다.

그러면

Hello

Hello, how are you?

이렇게 나옵니다. Hello 가 앞에 나온건 appendTo가 아니라 prependTo를 했기 때문이죠.

<!DOCTYPE html>
<html>
<head>
 
<style>
 
#orig, #copy, #copy-correct {
   
float: left;
    width
: 20%;
 
}
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<div id="orig">
   
<div class="elem"><a>1</a></div>
   
<div class="elem"><a>2</a></div>
   
<div class="elem"><a>3</a></div>
   
<div class="elem"><a>4</a></div>
   
<div class="elem"><a>5</a></div>
</div>
<div id="copy"></div>
<div id="copy-correct"></div>

<script>
// sort order is not guaranteed here and may vary with browser  
$
('#copy').append($('#orig .elem')
         
.clone()
         
.children('a')
         
.prepend('foo - ')
         
.parent()
         
.clone());
 
// correct way to approach where order is maintained
$
('#copy-correct')
         
.append($('#orig .elem')
         
.clone()
         
.children('a')
         
.prepend('bar - ')
         
.end());
</script>

</body>
</html>

두번째 예제의 스크립트 부분을 보면 id 가 copy 인 곳 (#copy)에 뭔가를 append 하네요.

바로 그 전에 있던 id 가 orig인 곳 내의 elem 클래스들인데요. 이것을 clone() 했습니다.

그리고 children()으로 그 안의 a 부분을 찾고 그 앞에 foo - 를 넣습니다.

그 다음 parent().clone()은 뭘까요. 그 parent 의 값을 받아서 clone을 하는 것 같습니다.

그러면 div 까지 clone 이 되서 줄 바꿈 효과까지 나오게 됩니다.

두번째는 id가 copy-correct 인 곳에 id가 orig인 것의 elem 클래스를 append 하는데요.

그것을 clone 하고 children 중에 a 를 찾은 다음에 앞에 bar - 를 붙이네요. 그리고 끝입니다.

.end()는 어떤 역할을 할까요. 위에 있었던 .parent().clone()이랑 같은 역할을 하는 것 같은데.

잠깐 봤더니 해당 부분에만 적용 된 효과를 전체 문서에 적용 되게끔 확장 해 주는 메소드인 것 같습니다. 나중에 따로 공부해 봐야 할 것 같습니다.


그 결과는 아래와 같습니다.




.find() 메소드 알아보기

2012.08.23 19:38 | Posted by 솔웅


.find()



이 메소드는 DOM 안에 있는 엘리먼트를 찾는 메소드로서 .children() 메소드와 비슷합니다. 다른점은 .children() 메소드는 단지 single level down 만 한다고 하네요.

.find() 정리한 다음에 .children()도 정리해야 겠네요.

곧바로 예제부터 볼께요.


<!DOCTYPE html>
<html>
<head>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<script>
  $
("p").find("span").css('color','red');
</script>

</body>
</html>


스크립트를 보면 p 태그에서 span을 찾아서 css를 적용해서 색을 빨강으로 바꾸네요.

그러면 첫번쨰 Hello와 두번째 good 이 빨간색으로 바뀔겁니다.




<!DOCTYPE html>
<html>
<head>
 
<style>
    span
{ color: blue; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p><span>Hello</span>, how are you?</p>
 
<p>Me? I'm <span>good</span>.</p>
 
<div>Did you <span>eat</span> yet?</div>
<script>
 
var $spans = $('span');
  $
("p").find( $spans ).css('color','red');
</script>

</body>
</html>


두번째 예제는 해당 엘리먼트를 변수에 담았네요. 그래서 p 태그내에 있는 span에 있는 내용이 빨간색으로 변합니다.

div 에 있는 span에는 적용이 안 될 겁니다.


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ font-size:20px; width:200px; cursor:default;
      color
:blue; font-weight:bold; margin:0 10px; }
 
.hilite { background:yellow; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>
  When the day is short
  find that which matters to you
  or stop believing
 
</p>
<script>
 
var newText = $("p").text().split(" ").join("</span> <span>");
  newText
= "<span>" + newText + "</span>";

  $
("p").html( newText )
   
.find('span')
   
.hover(function() {
      $
(this).addClass("hilite");
   
},
     
function() { $(this).removeClass("hilite");
   
})
 
.end()
   
.find(":contains('t')")
   
.css({"font-style":"italic", "font-weight":"bolder"});

</script>

</body>
</html>


세번째 예제는 좀 복잡하네요.

newText 변수에 어떤 내용을 담았는데요.

p 태그 안에있는 내용들을 한칸 띄어쓰기 된 부분을 기준으로 모두 나누고 각각 span 을 적용하는 겁니다. 그러면 각 단어별로 span 이 따로따로 적용이 되겠죠.


다음에는 p 태그 안에 html부분에 이 newText를 담은 다음에 span을 찾습니다.

거기에 마우스를 올리면 hilite 라는 클래스가 적용이 되도록 했네요. 마우스가 빠져나가면 그 클래스 적용이 해제되구요.


hilite 클래스는 jQuery에 미리 정해진 클래스 인가 봅니다. 배경을 노란색으로 hilite 해 주네요.

여기서 끝이 아니라 t 자가 들어가 있는 단어들을 찾아서 폰트 스타일을 이탤릭으로 바꾸고 또 볼드체로 바꿉니다.


좀 복잡하군요.


.find 가 다른 여러 메소드와 협동해서 이렇게 복잡한 일을 하네요.


.delegate() 메소드 알아보기

2012.08.23 10:58 | Posted by 솔웅


.delegate()


오늘 일하다가 눈에 띈 몇가지 jQuery API를 공부해 보겠습니다.


다른 사람이 만든 소스를 보다 보니까 .delegate() 메소드를 사용한게 있었는데요.

jQuery API에는 이 .delegate() 메소드는 1.4.3 버전에서 사용한 것이고 1.7 버전에서는 .on() 메소드를 사용하고 있다고 하네요.


그 신택스는 아래와 같네요.


$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+ $(elements).on(events, selector, data, handler); // jQuery 1.7+


약간 바뀌었죠.

$("table").delegate("td", "click", function() { $(this).toggleClass("chosen"); });

위 소스코드는 1.7 버전에서 아래와 같이 사용할 수 있다고 합니다.


$("table").on("click", "td", function() {
  $(this).toggleClass("chosen");
});






그럼 곧바로 예제를 보죠.


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ background:yellow; font-weight:bold; cursor:pointer;
      padding
:5px; }
  p
.over { background: #ccc; }
  span
{ color:red; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Click me!</p>

 
<span></span>
<script>
    $
("body").delegate("p", "click", function(){
      $
(this).after("<p>Another paragraph!</p>");
   
});
</script>

</body>
</html>


스크립트 부분을 보면 <body> 내에서 p 태그안에 있는 콘텐츠를 클릭하면 그 p 태그 다음에 <p> Another paragraph!</p> 를 추가하는 겁니다.


두번째 샘플을 보죠


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ color:red; }
  span
{ color:blue; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
 
<button>Trigger custom event</button>
 
<span style="display:none;"></span>
<script>

    $
("body").delegate("p", "myCustomEvent", function(e, myName, myValue){
      $
(this).text("Hi there!");
      $
("span").stop().css("opacity", 1)
               
.text("myName = " + myName)
               
.fadeIn(30).fadeOut(1000);
   
});
    $
("button").click(function () {
      $
("p").trigger("myCustomEvent");
   
});

</script>

</body>
</html>


스크립트를 해석해 보자면.

먼저 밑에 button 부분을 봐야 겠네요.

버튼이 클릭되면 myCustomEvent 가 trigger 되네요.


그 다음에 delegate 부분을 봐야 되는데요.

이 myCustomEvent가 trigger 되면 p 태그 부분을 Hi there! 로 고치고 span 부분에 myName = myName 을 표시하는데 잠깐 나타났다가 서서히 사라지는 효과가 나타납니다.




샘플 앱을 분석하려다 보니까 jQuery 메스드가 많이 나오네요.

먼저 jQuery 메소드 부터 대충 익히고 소스 분석 들어가겠습니다.


.html()


element의 내용을 얻을 때 사용합니다.

예제를 보시죠.


<!DOCTYPE html>
<html>
<head>
 
<style>
  p
{ margin:8px; font-size:20px; color:blue;
      cursor
:pointer; }
  b
{ text-decoration:underline; }
  button
{ cursor:pointer; }
 
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>

   
<b>Click</b> to change the <span id="tag">html</span>
 
</p>
 
<p>

    to a
<span id="text">text</span> node.
 
</p>
 
<p>
    This
<button name="nada">button</button> does nothing.
 
</p>
<script>
    $
("p").click(function () {
     
var htmlStr = $(this).html();
console.log(htmlStr);
      $(this).text(htmlStr);
   
});
</script>


</body>
</html>


자바스크립트를 보면 p 태그가 있는 곳을 클릭하면 그 부분의 내용을 긁어 와서 htmlStr 변수 에 담습니다. 그리고  이것을 text로 뿌려주죠.

제가 중간에 console.log()를 이용해서 로그를 뿌렸습니다.

크롬 부라우저의 inspection에 있는 console 에서 보면 이 로그를 확인하실 수 있습니다.


보니까 <p> </p> 사이에 있는 모든 글자를 가져왔죠? 그것이 html 태그이든 글자이든 다 가져왔습니다.


보니까 .text()도 나오네요. 이 예제도 볼까요?

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><b>Test</b> Paragraph.</p>

  <p></p>
<script>
    var str = $("p:first").text();
    console.log(str);
    $("p:last").html(str);

</script>

</body>
</html>


p 태그 첫번째 텍스트만 불러와서 마지막 p 태그에 뿌려주는 것인가 봅니다.


그리고 jQuery Mobile 메소드 중에 .checkboxradio("refresh") 가 있습니다.

자바스크립트로 radio 버튼을 만들 때 사용합니다.


그리고 .page() 메소드도 있습니다. (jQuery Mobile)

정확히 뭐하는 걸까요? 해당 페이지를 refresh 하는 건가?

느낌상 그런것 같네요.


다음에 jQuery 메소드 중에 .bind() 가 있습니다.

예제가 재밌네요.

<!DOCTYPE html>
<html>
<head>
 
<style>
p
{ background:yellow; font-weight:bold; cursor:pointer;
padding
:5px; }
p
.over { background: #ccc; }
span
{ color:red; }
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Click or double click here.</p>
<span></span>
<script>
$
("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$
("span").text("Click happened! " + str);
});
$
("p").bind("dblclick", function(){
$
("span").text("Double-click happened in " + this.nodeName);
});
$
("p").bind("mouseenter mouseleave", function(event){
$
(this).toggleClass("over");
});


</script>

</body>
</html>


p 태그를 클릭하면 Click Happend : x좌표, y 좌표를 표시해 주고 더블 클릭하면 p 태그에서 더블클릭이 있어 났다는 메세지를 뿌려줍니다.

그리고 마우스가 enter, 되고 leave 될 때마다 css 의 over 기능이 적용 됐다가 해제 됐다가 하구요.


<!DOCTYPE html>
<html>
<head>
 
<style>
p
{ color:red; }
span
{ color:blue; }
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>

$
("p").bind("myCustomEvent", function(e, myName, myValue){
$
(this).text(myName + ", hi there!");
$
("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$
("button").click(function () {
$
("p").trigger("myCustomEvent", [ "John" ]);
});


</script>

</body>
</html>


이 소스에서는 버튼을 클릭하면 myName = john 이라는 텍스트가 fadeIn, fadeOut 기능이 적용되서 나타 났다가 사라집니다.


직접 파일을 만드셔서 확인해 보시면 쉽게 이해가 가실 겁니다.


자바스크립트는 웬지 막 좀 복잡합니다.


하여간 오늘은 .html(), .text(), .bind() 를 메인으로 공부했습니다.

그거 공부하면서 예제에 나오는 fadeIn, fadeOut, click, doubleClick, x,y 좌표 구하기, mouseenter, mouseleave 시 토글 형식으로 효과 주기 등등을 배웠습니다.



jQuery API .live() 공부하기

2012.08.09 09:17 | Posted by 솔웅


jQuery Mobile 샘플 소스를 하나 분석하고 나니까 어디서 막히는 지 알겠네요.

제가 자바스크립트랑 jQuery 에서 약한 것 같습니다.


그냥 jQuery Mobile 튜토리얼만  봐서는 실무에서 많이 힘들것 같아요.

그래서 jQuery 쪽도 하나하나 배워야겠습니다.


우선 눈에 먼저 띈 .live() 를 배워보죠.


<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Click me!</p>

  <span></span>
<script>
$("p").live("click", function(){
  //$(this).after("<p>Another paragraph!</p>");
  $(this).before("<p>Another paragraph!</p>");
});
</script>

</body>
</html>


보시면 아시겠지만 위의 소스는 jQuery Mobile이 아닙니다. 그냥 jQuery 이죠.

처음에 나오는 style은 <p> 태그에 스타일을 준겁니다. 배경색을 노랑으로 하고 볼드체로 하고 패딩을 5픽셀을 주었네요.

다음줄은 jquery-latest.js를 참조했구요.

그 다음에 브라우저에 표시될 body 부분이 시작됩니다.


Click me! 가 <p> 태그에 감싸였으니까 여기에 CSS가 적용이 되겠네요.


그 다음이 지금 배울 .live() 메소드가 나오는 자바스크립트 부분입니다.

$("p").live("click", function(){} 는 p 태그를 클릭하면 {} 안에 있는 함수를 실행하라는 겁니다.


안에는 $(this).before("<p>Another paragraph!</p>"); 이 있는데요.

여기서 $(this) 는 클릭한 p를 말합니다. 처음에는 Click me! 가 되겠죠. 이것의 전에(before)  괄호안에 있는 부분을 추가하는 겁니다.

before 부분을 주석처리하고 위의 after 주석을 풀고 실행하면 클릭한 것의 바로 다음에 괄호 안의 내용이 추가 됩니다.




아주 쉽네요.


.live() API 에 있는 다른 예제도 하고 싶은데 오늘은 힘이 딸려서 이만 쉬어야 겠습니다.

에너지가 되시는 분은 위 링크를 따라가서 보세요. 도움이 될 겁니다.


새로운 프로젝트를 할수록 공부해야 될 것은 점점 더 많아 지네요.


어쨌든 새로운걸 배우는 건 재밌습니다.


좋은 하루 되세요.

이전 1 다음