jQueryUIをはじめる方は必見、超簡単サンプル集～その3～

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>