良く訓練されたスライダー

js ネタ

JavaScript で作った UI 部品の話になると、

jQuery UI とか、jQuery TOOLS あるじゃん

とか良く聞きますね。

UI の話だったら、jQuery よりも、YUI や Ext.js のがスゲ〜とか思うんですけどね。

せっかく UI 組むんだったら、ネットブック上の IE6 でもサクサク動かしたいよね

私も UI 部品をいくつか実装してみました。


スライダーのデモでは、マスタースライダーで後続のスライダーを連動して動かせるようしています。これはメッセージの同期 + ブロードキャスト で実現しています。

こんな感じです。

function boot(uu) {
  uu.exp();
  slider = []; // スライダーのインスタンス管理用の配列
               // デモだから気張らずに グローバル変数
}

function createSlider() {
  slider = query.ui('slider'); // オレオレ CSS セレクタで Slider Widget のインスタンスを収集

  if (!slider.length) {
    // マスタースライダーを作成し、インスタンスを保存
    // 動きがあったら onMasterSliderMove をコールバック
    slider.push(ui("slider", id("place1"), { move: onMasterSliderMove }));
  } else {
    // 後続のスライダーを作成し、インスタンスを保存
    slider.push(ui("slider"));
  }
}

function onMasterSliderMove(val) {
  // マスタースライダー以外の全スライダーに、val を適用
  msg.send(slider.slice(1), "setvalue", val); // 同期 + ブロードキャスト
}

いまどきの激速なブラウザではなく、IE6 などのレガシーなブラウザで試してみると、違いが良くわかると思います。

# IE6 は Safari4 や Google Chrome4 に比べて 100倍以上遅いのです(ざっくり)。
# 自作した UI 部品は ASPIRE ONE 上の IE6 でサクサク動くように組んであります。

今日紹介した UI 部品は DOM + CSS で作ってます。画像を使わず HTML5::Canvas で実装したバージョンものちほど。