Seongsiks

Being A DevOpser. Powered by
Obtvse, highlight.js, theme toc Creative Commons License
Seongsiks Twitter Github Email
DevOps Ruby On Rails Chef Projects Misc Movies & Drama ME

Jquery : Effect and Digging Deeper #3

Overview

간단하게 사용하던 효과에 각종 옵션들을 체크하고, jQuery의 플러그인을 만들거나, 메소드를 추가하는 방법 추가

Effect Chaining

// 이런 식으로 쓰면 한번에 사라졌다 생기는게 아니고
// 체인 앞에 있는 effect가 끝나면 다음이 시작된다.
$('#login').fadeOut().html(...).fadeIn();

Easing

Effect의 속도의 변화를 바꾼다 jquery_easing

$("...").css({'background-color': '#2C1F11', 'opacity':'0.5'})
        .animate({ opacity: '1', height: '30'}, 'slow', 'linear');

Effect Function params

$("body").fadeIn( '<speed>', function() { callback; } , '<easing>');

$.map Utillity

map메소드는 Array를 받아서 Array를 반환하는 메소드

fetchingFlights = $.ajax('/flights.json', {
   data: { date: activeDiv },
   ...
   success: function(result) {
     $(activeDiv + ' tbody td').remove();
      // json array를 받아서 html로 구성된 array를 만들어 리턴
     var flight_rows = $.map(flights, function(flight) { 
       return "<tr>" +
       <td>" + flight.depart + "</td>" +
       <td>" + flight.arrive + "</td>" +
        ...
       </tr>"; 
     });
     // html로 구성된 array를 조인해서 화면에 넣기
     $(activeDiv + ' tbody').html(flight_rows.join(''));
     ...

Custom Jquery Utillity

 // closure를 이용해서 jQuery 컨텍스트 안에서 메소드 추가
 (function($){
   $.hello = function() {
     alert("Hello!");
   }
 })(jQuery);

 $.hello();

Creating Plugins

 // closure를 이용해서 jQuery 컨텍스트 안에서 메소드 추가
(function($){
  $.fn.callOut = function() {
    this.css({ opacity:0.5 }).animate({ opacity:1 }, 'fast');
  };
})(jQuery);

// 반드시 jQuery 객체에 대해서 실행해야함
$(activeDiv).callOut();

Encapsulation

원본 코드가 다음과 같을때,

var fetchingFlights = null; 
var currentFlights = null;

function showFlights(activeDiv)  { .. }
function changeTab(e) { .. }
function selectFlight(e) { .. }

function showTotal(json) { .. }
function login(e) { .. }

$("#tabs ul li a").click(changeTab);

$("#tabs div").delegate('#flights a', 'click', selectFlight);

이를 객체로 묶어버리자.

var selectFlights = {
  fetchingFlights : null,
  currentFlights : null,
  init : function() {
    //자기 자신은 this로 지칭
    $("#tabs ul li a").click(this.changeTab);
    $("#tabs div").delegate('#flights a', 'click', this.selectFlight);
  },
  showFlights : function(activeDiv) { .. },
  changeTab : function(e) { .. },
  selectFlight : function(e) { .. }
};

var confirmFlight = {
  showTotal : function(json) { .. },
  login : function(e) { .. }
};

selectFlights.init();

Custom Event

$("#tabs ul li a").bind({
  'selectTab': function(e) {
  // Select proper tab, switch classes, do ajax call
  } 
});

$(document).keydown(function(e) {
  if (e.keyCode >= 49 && e.keyCode <= 53) {
    var numSelected = e.keyCode - 49;
    $("#tabs ul li:eq(" + tabSelected + ") a").trigger('selectTab'); 
  }
});
comments powered by Disqus
Back to Misc