ariyasacca

▼ [雑記][Web]Ext JSのSliderサンプル

Ext JSというJavaScriptフレームワークがあって、これのバージョン2.1から加わったスライダーバーコンポーネントが、サンプルを見た時から「Googleマップの縮尺みたいに直感的で良いなー」と思ってて使ってみたかったんだけど、いざ使おうとしたら良く分からなかった。

ので、サンプルを作った。IEだと動かないかも。

• Slider Sample

スライダーバーをマウスドラッグしたイベントを拾って、アクションを起こす。ただそれだけやりたかったのだけど、

• 'change'に対してイベントハンドラを設定したら、バーを1ミリでも動かすだけで呼ばれてしまったのでイベントの回数が大変なことになった。
  • これは'dragend'に設定すると良いみたい。
• ドラッグ以外にも、スライダーバー上で任意の箇所をクリックしただけで一気に移動してしまって困った。
  • これはclickToChangeにfalseを設定したら抑制できた。
• 縦方向のスライダーバーにして、valueで初期値を設定すると、何かヘン。レイアウトが初期値の分だけ上に崩れる。

いろいろつまづいてしまった。

スライダーバーだけ使う時は、Ext JSをダウロードした時に入ってるresources/の下のファイルは、css/もimage/も、slider関連のものだけ使えば良いみたい。

ExtはGrid系のやつも凄いけれど、シンプルで軽量で、ユーザに直感的な体験を与えられる部品がもっと増えると良いですね！