Rev. 2.73

scripty2.gif

Thomas Fuchs씨의 Scripty2 버전이 벌써 Alpha 5가 되었습니다. UI 비헤이비어 / 컨트롤 부분에 멀티 터치 지원 및 몇몇 기능이 추가되었습니다. 그리고 Andrew Dupont씨가 버튼, 다이얼로그, 오버레이, 슬라이더, 자동완성, 아코디언 컨트롤을 추가했다고 합니다. 이 데모를 직접 보세요.

이 컨트롤들은 Prototype의 클래스 시스템과 커스텀 이벤트로 작성되었습니다. 그래서 쉽게 조작하고 사용자 정의 버전을 생성할 수 있습니다. 모든 컨트롤들은 현재 작업중이며 올해 안으로 배타버전을 출시할 계획을 가지고 있습니다. 키보드 네비게이션 지원과 WAI-ARIA(장애를 가진 사람들이 접근할 수 있도록 다양한 제어 환경을 제공하는 기술)를 제공하여 접근성을 높일 것이라고 합니다. 그리고 더욱 놀라운 사실은 Samo Korošec씨의 작업에 의해 jQuery UI의 Themeroller와 호환된다는 점입니다. 그래서 아주 쉽게 기존의 테마를 날로먹을 수 있습니다. 벌써부터 Scripty2를 기반으로 만들어진 웹사이트(derStandard.at Express, Ford Fusion 41)가 등장하고 있네요.

덧. Scripty2 Alpha 5에는 Scripty1(script.aculo.us)과의 의존성이 완전히 재거되었으며 대체하기 위한 코드가 상당부분 추가되었습니다. 함께 로드하는 경우 오류가 발생하더군요. 슬슬 교체할 준비를 해야겠어요.

Comments



이것은 Toki Woki에서 만든 스크롤 시계입니다. <div> 요소의 overflow 속성을 절묘하게 이용하여 만들었습니다. 소스를 보니 MooTools 라이브러리를 기반으로 슈퍼 클래스를 상속하여 사용하고 있습니다. 이것을 Prototype 라이브러리로 다시 작성해 보았습니다. :

(function() {
  var barDim = 64, sbDim = 18;
  var Bar = Class.create({
    initialize: function(dir) {
      this.dir = dir;
      var dim = dir == 'v' ? barDim : (Prototype.Browser.Gecko ? barDim : barDim + sbDim);
      this.holder = new Element('div', {style: 'width:' + (dir == 'h' ? dim : sbDim) + 'px; height:' + (dir == 'h' ? sbDim : dim) + 'px; overflow: auto; float: left'});
      this.content = new Element('div', {style: 'line-height: 0'}).update(' ');
      this.activate(true, true);
      this.holder.insert(this.content);
    },
    activate:function(b, now) {
      var side = this.dir == 'h' ? 'width' : 'height';
      if (now) this.content.setStyle(side + ':' + (b ? barDim + sbDim : barDim / 2) + 'px');
      else this.content.morph(side + ':' + (b ? barDim * 2 : barDim / 2) + 'px');
    }
  });
  var HBar = Class.create(Bar, {
    initialize: function($super){
      $super('h');
      this.holder.setStyle('margin-left:' + sbDim + 'px; margin-right: ' + sbDim + 'px');
    }
  });
  var VBar = Class.create(Bar, {
    initialize: function($super, push){
      $super('v');
      push && this.pushRight();
    },
    pushRight:function() {
      this.holder.setStyle('margin-left:' + barDim + 'px');
    }
  });
  var Digit = Class.create({
    initialize: function(push) {
      var holder = this.holder = new Element('div', {style: 'width:' + (barDim + 2 * sbDim) + 'px; float: left; margin-right: 5px'});
      this.bars = [new HBar(), new VBar(), new VBar(true), new HBar(), new VBar(), new VBar(true), new HBar()].each(function(it) { holder.insert(it.holder);});
      this.lights = [
        [1, 1, 1, 0, 1, 1, 1],//0
        [0, 0, 1, 0, 0, 1, 0],//1
        [1, 0, 1, 1, 1, 0, 1],//2
        [1, 0, 1, 1, 0, 1, 1],//3
        [0, 1, 1, 1, 0, 1, 0],//4
        [1, 1, 0, 1, 0, 1, 1],//5
        [1, 1, 0, 1, 1, 1, 1],//6
        [1, 0, 1, 0, 0, 1, 0],//7
        [1, 1, 1, 1, 1, 1, 1],//8
        [1, 1, 1, 1, 0, 1, 1] //9
      ];
      push && this.pushRight();
    },
    show: function(n) {
      n = Math.floor(n);
      n = n % 10;
      var light = this.lights[n];
      this.bars.each(function(it, index) { it.activate(light[index] == 1); });
    },
    pushRight: function() {
      this.holder.setStyle('margin-left: 12px');
    }
  });
  function showTime() {
    var now = new Date();
    h1.show(now.getHours()/10);
    h2.show(now.getHours());
    m1.show(now.getMinutes()/10);
    m2.show(now.getMinutes());
    s1.show(now.getSeconds()/10);
    s2.show(now.getSeconds());
  }
  var h1 = new Digit(), h2 = new Digit(), m1 = new Digit(true), m2 = new Digit(), s1 = new Digit(true), s2 = new Digit();
  $('main').insert(h1.holder).insert(h2.holder).insert(m1.holder).insert(m2.holder).insert(s1.holder).insert(s2.holder);
  showTime();
  setInterval(showTime, 1000);
})();

덧. IE에서는 작동하지 않습니다.

Comments

jQuery용으로 만들어진 jQSlickWrap 플러그인을 이용하면 보시는 것 처럼 이미지의 피사체를 피하여 문자열들을 어울리게 배치할 수 있습니다. 실제로 애플로고 이미지를 첨부하고 jQSlickWrap 플러그인을 적용한 것입니다. 작동원리는 간단합니다. HTML5의 <canvas> 요소를 이용하여 이미지 데이터의 정해진 구간으로 루프를 돌면서 색상값을 근거로 피사체가 끝나는 위치을 분석하고 가상의 <div> 요소에 분석한 너비를 적용하여 바꿔치기하는 것입니다.
이 블로그는 Prototype 라이브러리를 사용하기 때문에 jQSlickWrap 플러그인을 그대로 날로먹을 수가 없어서 Prototype의 클래스로 변환하여 적용하였습니다. MIT 라이센스라 부담없이 마구 때려 고쳤습니다. 필요하신 분은 가져다 쓰셔도 무방합니다.

사용법 :

new SlickWrap(img, {
  bgColor: null,
  bloomPadding: false,
  resolution: 18,
  cutoff: 5
});

다운로드 :

Comments