jQueryUIをはじめる方は必見、超簡単サンプル集～その３～
jQueryUIのサンプルスクリプトを作成していきます。
前回に引き続き、今回はウィジェット編の後半戦です。
・jQuery及びjQueryUIのバージョンは次の通りです。
jQuery ：1.9.1
jQueryUI：1.10.3
・そして、今回作成するのは次の5個。
Progressbar,Slider,Spinner,Tabs,Tooltip
早速一つずつサンプルを見ていきましょう。
まずは、Progressbarのサンプルです。
1.Progressbarのサンプルスクリプト
進捗度合がバー表示されるスクリプト。ユーザに進行レベルを示す重要な要素ですね。
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
.ui-progressbar{
width:200px;
height:10px;
}
</style>
<script>
$(function(){
var progressbar = $( "#progressbar" ), progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function(){
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if(val<99){
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"></div><div class="progress-label">Loading...</div>
</body>
</html>
→実際のローディング時間と同期して表示されるとよいのですが、Progressbar単体では無理なようです。
次はSliderを実装してみましょう。
2.Sliderのサンプルスクリプト
スライダーをドラッグすることでライン上の値をセットできます。
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#slider{
width:200px;
}
</style>
<script>
$(function() {
$( "#slider" ).slider({
min:0,
max:100,
slide: function(event,ui){
$("#val").val(ui.value);
}
});
$("#val").val(0);
});
</script>
</head>
<body>
<label for="val">Value:</label>
<input type="text" id="val" style="border: 0;" />
<div id="slider"></div>
</body>
</html>
→色々な場面での利用が考えられそうですね。レンジ指定や垂直表示なども可能です。
