JavaScriptによるリッチUI化は、そろそろ進められるのか?
jQueryで作ってみる
 

トップに戻る

ドラッグで増減するスピンボックス
探しても意外と無かったので作ってしまいました。

水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。

ドラッグしながらマウスを右に移動すればする程、加速度が上昇します。(デフォルトは50ピクセルにつき5倍になります。)

Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。

特長
・汎用性がある:1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。
・コンパクトに設置できる:テキストボックスの右に20ピクセル程のスペースに収まります。
・利用環境に対応:ノートPC等でホイールが無くても大丈夫。基本的なマウス操作のみ。

設置方法
HowToSetupJapanese - jquery-dorag-spibox Google Code
googleコードに置いてみました。チェックしてみてください。

適用例:スタイルチェッカー
使用例を作ろうとして、プチのめり気取りに陥りました。

適用された使用例が必要かと思い、作っていたら、JavaScript,CSSのブラウザ別の特性を体で覚えられるものができました。各ブラウザ別で動作が違うのがよく分かります。
箱(DIV)が動きます。水色のスピナーを上下にドラッグして、自由に動かしてください。 HTMLスタイルの特性を知るには、動かしてみて体で覚えてみるのも良いのではないでしょうか。 いろいろなブラウザで動作させて、どの要素が基準となっているのかの違い等を感じ取ってみてください。

TOP:
上下位置
   WIDTH:
横幅
   BORDER:
枠の太さ
  
LEFT:
左右位置
   HEIGHT:
縦幅
   PADDING:
枠からテキストの間隔
  
FONT-SIZE:
文字の大きさ
   ALPHA:
透明度
   MARGIN:
隣の要素との間隔
  



クライアントに委ねろ
表現側はブラウザに任せた。




クロスブラウザの難しさ
主無き規格化→外れればバグ扱い

→すんません・・後で書きます。
 


Copyright by TACHY