jQueryUIを使ったスライダーの使い方

  • このエントリーをはてなブックマークに追加
  • LINEで送る

jQueryのライブラリはWebアプリ作成に便利だ。jQueryには、jQueryUIという公式のユーザインターフェースがある。
ユーザインターフェースは、機械そのものの使い勝手を左右する要素にもなるので、大事だ。
ちなみにユーザインターフェースとは、使う人に対しての表示方法や入力方法などを指す
今回わたしはスライダーを使ったアプリを作ろうと考えてjQueryUIを使ってみた。

jQueryUIslider
【2016年2月1日jQueryUIのスライダー】

参考にしたサイトは本家のサイト

Slider | jQuery UI
http://jqueryui.com/slider/

英語表記ですが、割と分かりやすい方だと思います。

jQueryUIを使うには、headタグに以下の記述が必要です。(jqueryフォルダ内にjQueryのライブラリが置いてあると仮定して)

<link rel="stylesheet" href="jquery/jquery-ui.min.css">	<!-- jQueryUIのCSS -->
<script src="jquery/jquery-2.2.0.min.js"></script>		<!-- jQuery本体 -->
<script src="jquery/jquery-ui.min.js"></script>			<!-- jQueryUI本体 -->

jQueryUIのCSS->jQuery本体ー>jQueryUI本体の順に読み込みます。

0から100までの値を取得するスライダーを作ってみました。>こちら
サンプルダウンロードは>こちら

よく使いそうなスライダー設定にコメントを付けてみました。

$(function(){
	// スライダ設定
	$("#slider1").slider({
		range: "min",			// min: 左側から色がつく max: 右側から色がつく
		min: 0,				// 最小値
		max: 100,			// 最大値
		value: 50,			// 現在値
		step: 1,				// 増分
		// スライドしたときのイベント処理
		slide: function(event, ui) {
			$("#slider-caption").text(ui.value);	// 現在値をスライダキャプションに設定
		}
	});
	
	// スライダキャプションの設定(起動時の表示をスライダに合わせるため)
	$("#slider-caption").text( $("#slider1").slider( "value" ) );
});

全体はこんな感じです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Slider</title>
<link rel="stylesheet" href="jquery/jquery-ui.min.css">	<!-- jQueryUIのCSS -->
<script src="jquery/jquery-2.2.0.min.js"></script>		<!-- jQuery本体 -->
<script src="jquery/jquery-ui.min.js"></script>			<!-- jQueryUI本体 -->
<script>
	$(function(){
		// スライダ設定
		$("#slider1").slider({
			range: "min",			// min: 左側から色がつく max: 右側から色がつく
			min: 0,				// 最小値
			max: 100,			// 最大値
			value: 50,			// 現在値
			step: 1,				// 増分
			// スライドしたときのイベント処理
			slide: function(event, ui) {
				$("#slider-caption").text(ui.value);	// 現在値をスライダキャプションに設定
			}
		});
		
		// スライダキャプションの設定(起動時の表示をスライダに合わせるため)
		$("#slider-caption").text( $("#slider1").slider( "value" ) );
	});
</script>
<style>
	#slider1{
		width: 500px;
	}
	#slider1 .ui-slider-range { background: #729fcf; }	/* スライダの背景色 */
	#slider1 .ui-slider-handle { border-color: #729fcf; }	/* スライダをドラッグできる部分の枠色 */
	#slider-caption{
		color:#f6931f;
		font-weight:bold;
	}
</style>
</head>
<body>

<p><!-- スライダ値表示部分 -->
	<label for="slider-caption">Number:</label>
	<span id="slider-caption" style="color:#f6931f; font-weight:bold;"></span>
</p>
<div id="slider1"></div><!-- スライダ -->

</body>
</html>
  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

最近の投稿

コメントを残す

*