Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

jQuery UI Slider

今回は、jQuery UIのSliderについて書きます。


Sliderは、スライダーのことです(笑)
こういうものです↓
f:id:gupuru:20140221230145p:plain
マウスで左右にいろいろ動かせられるやつです。


このように使います。

<!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>

実行結果
f:id:gupuru:20140221230145p:plain
「 style="width:250px"」としているのは、横幅を調節するためです。デフォルトのままだと、画面いっぱいに広がるので・・・


「.slider();」とつけると Sliderを実装できます。

$(function(){

	$('#slider').slider();

});


Sliderには、他にも機能があります。


「ui.value」で値を取得できます。

$('#slider').slider({
		slide: function(event,ui){
			console.log(ui.value);
		}
	});

f:id:gupuru:20140221231637p:plain


「animate: "fast"」で、アニメーションができるっぽいです。

$('#slider').slider({
		slide: function(event,ui){
			console.log(ui.value);
		},
		animate: "fast"
	});


参考サイト
https://api.jqueryui.com/slider/