JavaScript Examples
homeBack    homeHome



| ←Home |
Sample スライダーバーを作ってみる











    <script language='JavaScript'> <!-- //--イベント処理部 document.onmousemove = mmv //--マウスを動かすとmmv()を実行 document.onmousedown = mdw //--マウスを押下で mdw()を実行 document.onmouseup = mup //--マウスを上げるとmup()を実行 if(document.layers) //-N4用イベントキャプチャ開始処理 document.captureEvents(Event.MOUSEMOVE|Event.MOUSEDOWN|Event.MOUSEUP) mvswt=false //マウス押下げフラグ function mdw(e){ mvswt = true //マウス押下げでtrue return false } function mup(e){ mvswt = false //マウス押下げでfalse return false } var barX = 80 //スライダーのX位置 function mmv(e){ if( getMouseX(e)>=85 && getMouseX(e)<=285 && mvswt ){ barX = getMouseX(e)-5 moveLAYER('pen',barX,130)//スライダーを動かす } var data = "目盛りは [ " + parseInt((barX -80),10) data += " ] マウスのX座標は " + getMouseX(e) + " : Y座標は " + getMouseY(e) status = data //ステータス行へデータ表示 } //--レイヤー移動用関数 function moveLAYER(layName,x,y){ if(document.getElementById){ //Moz,N6,IE5,IE6,OP用 document.getElementById(layName).style.left=x document.getElementById(layName).style.top=y } else if(document.all){ document.all(layName).style.pixelLeft=x //IE4用 document.all(layName).style.pixelTop=y } else if(document.layers)document.layers[layName].moveTo(x,y) //N4用 } //--マウスカーソル位置取得 function getMouseX(e){ if(window.opera) //OP6用 return e.clientX else if(document.all) //IE4,IE5,IE6用 return document.body.scrollLeft+event.clientX else if(document.layers||document.getElementById) //N4,N6,Moz用 return e.pageX } function getMouseY(e){ if(window.opera) //OP6用 return e.clientY else if(document.all) //IE4,IE5,IE6用 return document.body.scrollTop+event.clientY else if(document.layers||document.getElementById) //N4,N6,Moz用 return e.pageY } //--> </script> <style> #sliderbar{ position : absolute ; top : 120px ; left : 80px ; padding : 0px ; margin : 0px ; } #pen { position : absolute ; top : 130px ; left : 80px ; padding : 0px ; margin : 0px ; } </style> <!--スライダー--> <div id="sliderbar"><img src="sc.gif" border=0 ondragstart="return false"></div> <div id="pen"><img src="minbar.gif" border=0 ondragstart="return false"></div>



 このスクリプトは、スライダーバーをJavaScr iptで作ってしまおうというものだ。

 まず、用意するのは、スライダーの目盛り用 レイヤー「sliderbar」と動かす駒レイヤー 「pen」だ。この二つの画像は自分の好きなもの に取り替えればオリジナルスライダーのできあ がりだ。位置関係や画像のサイズはソースのCSS を見てほしい。

 このスクリプトでは、スライダーを動かした データは単にステータス行へ表示させているだ けだが、ここで生成されるデータを使ってボリ ュームコントロールや画像コントロールなどい ろいろな用途に使いまわすことも可能だ。 動作を斜めにしたり丸くしたり三角にしたり、 見たこともないスライダー作りに挑戦するのも 楽しいかもしれない。

 もちろん、スライダーというインターフェイス 自体は、いろいろな方法で作ることができるが、 このスライダーの最大のメリットはやはり、クロ スブラウザでクロスOSなウィジェットを自分の好 きなデザインで用意できるということだろう。






| ←Home |


Toshirou Takahashi tato@fureai.or.jp