블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 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 29 30 31    

우아하게 화면 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 다음

티스토리 툴바