第23回 JavaScriptによるUIの実装：スライダー | gihyo.jp
こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
javascript スライドバー (スライダ) コントロール
ライブラリを利用せずに手軽に汎用のスライドバー・コントロールを作成する javascript コードです。単体の関数として実装されており、すべての変数や操作関数は他の名前と衝突しない様にクロージャ内に隠蔽されています。 このページには外部依存のファイルはありません。利用されるすべてのスクリプトとスタイルシートはこのページ自身に含まれています。 動作確認済みブラウザ：FireFox 3.5, Safari 4, Opera 10, Chrome 4 （IE は IE6 まで対応する様に組んだつもりですが未確認） 基本的に CSS2 と HTML DOM に対応していて javascript が ECMA-262 に準拠しているブラウザなら大体動作すると思われます。 例 バーをクリックするとその位置にノブが移動して操作対象が変化します。 ノブでマウスボタンを押すとノブをドラッグ出来ます。マウス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
