Rev. 2.73

prototip.gif

PrototipPrototype/Scriptaculous를 기반하여 만들어진 툴팁 컴포넌트이다. 표준을 따르는 HTML, CSS를 이용한 다양한 레이아웃 디자인과 출력효과를 내장하고 있어 단순히 메시지를 표시하는 것 이상의 표현이 가능하다. 특히, CSS를 이용해 디자인을 손쉽게 커스터마이즈 할 수 있게 한 점과 특정 타겟의 시야를 가리지 않도록 하는 Hooking옵션은 사용자의 입장을 충분히 고려해 만든 모습이 역력하다.

new Tip(
  element,                 // the id of your element
  content,                 // html
  {  
    className: 'tooltip',  // or your own class
    closeButton: false    // or true
    duration: 0.3,         // duration of the effect, if used
    delay: 0.2             // seconds before tooltip appears
    effect: false,        // false, 'appear' or 'blind'
    fixed: false,         // follow the mouse if false
    hideOn: 'mouseout'     // 'click', 'mousemove', 'mouseover',
                           // { element: 'element|target|tip|closeButton|.close',
                           //   event: 'click|mouseover|mousemove' }
    hook: false,          // { element: 'topLeft|topRight|bottomLeft|bottomRight|
                           //  topMiddle|bottomMiddle|leftMiddle|rightMiddle',
                           //  tip: 'topLeft|topRight|bottomLeft|bottomRight|
                           //  topMiddle|bottomMiddle|leftMiddle|rightMiddle' }
    offset: {x:16, y:16}   // or your own, example: {x:30, y:200}
    showOn: 'mousemove',   // or 'click', 'mouseover', 'mouseout'                              
    target: 'anotherId',   // make the tooltip appear on another element
    title: false,         // or a string, example: 'tip title'
    viewport: true        // keep within viewport, false when fixed or hooked
  }
);

Comments

datepicker.gif

최근들어 PrototypeScriptaculous 자바스크립트 라이브러리에 기반하는 강력한 컴포넌트들이 봇물입니다.(흐뭇) MS 필이 물씬 풍기는 완성도 높은 자바스크립트 데이트피커(날짜 선택기)도 출현했군요! <input type="text" id="date-from" name="date-from" />태그에 ID를 이벤트로 할당하고 클릭하면 데이트피커 위젯이 뜹니다. 퍼다 쓰세요!

var dpck   = new DatePicker({
  relative  : 'date-from',
  language  : 'en'
});

Comments

portal.gif

Prototype에 기반하는 프로젝트를 여럿 소개한 바 있는 Sebastien Gruhier씨는 또다시 놀라운 컴포넌트를 공개하였습니다. Scriptaculous 라이브러리를 적극 활용하여 iGoogleNetvibes와 같은 위젯기반 UI를 제공케 할 수 있는 Prototype Portal Class를 공개한 것입니다. 개인화 서비스라고도 하지요. 이와 비슷한 한국형 서비스로는 위자드닷컴요즘엔 등이 있습니다. 아무튼, 정말 훌륭하십니다!

Comments