jQuery UI Slider
今回は、jQuery UIのSliderについて書きます。
Sliderは、スライダーのことです(笑)
こういうものです↓
マウスで左右にいろいろ動かせられるやつです。
このように使います。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery ui</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="slider" style="width:250px"></div> <script> $(function(){ $('#slider').slider(); }); </script> </body> </html>
実行結果
「 style="width:250px"」としているのは、横幅を調節するためです。デフォルトのままだと、画面いっぱいに広がるので・・・
「.slider();」とつけると Sliderを実装できます。
$(function(){ $('#slider').slider(); });
Sliderには、他にも機能があります。
①
「ui.value」で値を取得できます。
$('#slider').slider({ slide: function(event,ui){ console.log(ui.value); } });
②
「animate: "fast"」で、アニメーションができるっぽいです。
$('#slider').slider({ slide: function(event,ui){ console.log(ui.value); }, animate: "fast" });