![]() | |
![]() |
JavaScriptによるリッチUI化は、そろそろ進められるのか? |
jQueryで作ってみる |
水色のスピン部分を上下にドラッグすると、テキストボックスの値が増減します。 上移動で増加、下移動で減少となります。
Webの方ではこういったコントロールはあまり見ないですが、Windows等のアプリケーションのコントロール等にはしばしばお目にかかります。 意外と汎用性が高いので、操作されている方にとっては、「欲しいな」って思われる方もいるでしょう。 特長 ・汎用性がある:1,2マスの細かな移動から、100,1000ピクセル単位のピクセル移動まで、何でも。 ・コンパクトに設置できる:テキストボックスの右に20ピクセル程のスペースに収まります。 ・利用環境に対応:ノートPC等でホイールが無くても大丈夫。基本的なマウス操作のみ。 設置方法 HowToSetupJapanese - jquery-dorag-spibox Google Code googleコードに置いてみました。チェックしてみてください。
適用された使用例が必要かと思い、作っていたら、JavaScript,CSSのブラウザ別の特性を体で覚えられるものができました。各ブラウザ別で動作が違うのがよく分かります。 箱(DIV)が動きます。水色のスピナーを上下にドラッグして、自由に動かしてください。
HTMLスタイルの特性を知るには、動かしてみて体で覚えてみるのも良いのではないでしょうか。
いろいろなブラウザで動作させて、どの要素が基準となっているのかの違い等を感じ取ってみてください。
→すんません・・後で書きます。 |
Copyright by TACHY