jQuery UI widget 은 기본적으로 한번에 여러 개의 옵션을 설정할 수 있다.

$('...').somewidget('option',{aa:bb, cc:dd});

하나의 옵션을 설정할 때의 추가적인 로직을 넣으려면 _setOption() 을 재정의하면 된다.

_setOption: function(key,value){
  if(key=='some'){...do something...}
}

가끔은 여러 개의 옵션을 한번에 설정할 때, 그 중 몇몇 옵션이 바뀔 경우에 대한 추가적인 로직을 넣으려면 _setOptions 를 재정의하면 된다. jQuery UI Dialog 의 코드가 가장 좋은 예제일 것이다. 다만 1.8.6 부터 지원하니까 버전에 주의하길.

_setOptions: function( options ) {
  var self = this,
  resizableOptions = {},
  resize = false;

  $.each( options, function( key, value ) {
  self._setOption( key, value );

  if ( key in sizeRelatedOptions ) {
  resize = true;
  }
  if ( key in resizableRelatedOptions ) {
  resizableOptions[ key ] = value;
  }
  });

  if ( resize ) {
  this._size();
  }
  if ( this.uiDialog.is( ":data(resizable)" ) ) {
  this.uiDialog.resizable( "option", resizableOptions );
  }
},

개요

• jquery ui 1.9 에서부터 지원된다. 1.8 에서 사용하려면 약간의 소스 수정이 필요하다.
• 기본적으로 title 속성을 툴팁 텍스트로 사용한다. 동적으로 컨텐트를 만들려면 content 함수를 이용해서 DOM 을 리턴해야 한다.
• 툴팁은 dialog 와 마찬가지로 body 에 추가된다. 자동으로 ui-tooltip-1 ui-tooltip-2 와 같이 id 가 붙는다.
• this.element 는 툴팁을 띄우는 원본 DOM 이고, 툴팁 컨텐트에 직접 접근하려면 this.tooltip 또는 this.widget() 을 이용해야 한다.
• beforeOpen 같은 걸 지원하면 좋을텐데.. 일단은 없다. 뜨지 않게 하려면 disable 시키는 수 밖에 없다.
• 툴팁 내부 컨텐트에 jquery ui 위젯을 사용하려면 open 콜백에서 적용할 것.

툴팁 내부에 템플릿을 적용한 후 Progressbar 넣기

xxx.tooltip({
  content: function(){
    return $('#building-unit-tooltip-tmpl')
      .tmpl(unit);
  },
  open: function(event){
    var timeRatio = (unit.maxTime-unit.remainTime) / unit.maxTime * 100;
    var $tooltip = $(this).data('tooltip').widget();
    $tooltip
      .find('div.progressbar')
        .progressbar({value:timeRatio})
      .end()
      .find('.ui-progressbar-value')
        .animate({
          width: "100%"
        }, {
          duration: unit.remainTime*1000
        });
  }});

구글맵처럼 (바닥 - 마커 - 오버레이) 등 여러 개의 레이어로 구성하고, 그 안에 위치한 각종 마커들끼리의 z-index 를 상황(?)에 따라서 코드 레벨에서 정렬해야 한다고 가정하자.

<div id="map">
  <div id="ground">
  <div id="first" class="marker">1st</div>
  <div id="second" class="marker">2nd</div>
  </div>
  <div id="overlay">
  <div id="third" class="overlay">3rd</div>
  <div id="fourth" class="overlay">4th</div>
  </div>
</div>

보통 맵은 relative, 레이어들은 absolute 로 두게 된다. 이때 레이어들의 z-index 를 지정하지 않으면(또는 auto 로 설정하면), #first 마커의 z-index 를 9999 로 잡으면 상위 레이어 위로 올라오게 된다.

#map {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: gray;
}
.marker, .overlay {
  position: absolute;
  text-align: center;
}
#ground {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ededed;
  z-index: 1000;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1001;
}
#first {
  width: 100px;height: 100px;
  background-color: yellow;
}
#second {
  width: 50px;height: 200px;
  background-color: green;
}
#third {
  width: 200px;height: 50px;
  background-color: red;
}
#fourth {
  width: 50px;height: 300px;
  background-color: blue;
 }

대신 그냥 각 레이어들의 z-index 를 각각 1000,1001 로 설정하기만 하면, 아무리 하위 레이어의 마커에 높은 z-index 를 줘도, 절대 상위 레이어를 침범하지는 않게 된다.

관련 테스트 코드는 jsfiddle에서 볼 수 있다.