jQuery-UI resizable


拡大/縮小可能

<script type="text/javascript">
 jQuery(function(){
  jQuery(‘#mybox’).resizable({
   minHeight: 100,
   maxHeight: 100, min=maxで横方向のみ拡大/縮小可能に
   minWidth: 100,
   grid: 100, グリッド単位で拡大/縮小
   containment: '#parent', 拡大/縮小範囲を指定
  });
 });
</script>

<div id="parent" >
 <div id="mybox" >拡大/縮小可能</div>
</div>

<style>
 #mybox {
  width: 200px;
  height: 100px;
  max-height: 100px;
 }
 #parent {
  width: 100%;
  height: 120px;
  padding: 10px;
 }
</style>

jQuery-UI ツールチップ

※↓画像
tooltip

※↓プログラム

通常文

ツールチップ対象文
通常文
通常文
通常文

(1)ツールチップ用のテキストを準備
<div id=”tip1″>
  通常文<
>
  <a href=”#” title=”ツールチップ説明文”>ツールチップ対象文</a><
>
  通常文<
>
  通常文<
>
  通常文<
>
</div>
<script type=”text/javascript”>
  $(function() {
    (2)ツールチップ機能を適用
    $(‘#tip1’).tooltip();
  });
</script>

jQuery-UI プログレスバー

jQuery-UI プログレスバー

基本


(1)プログレスバーの表示領域

<div id="progress1"> </div>
<script type="text/javascript">
$(function() {
  // (2)プログレスバーを生成
  $('#progress1').progressbar({
    value: 37,
    max: 150
  });
});
</script>

進捗を文字表示

(1)プログレスバーの表示領域
<div id="progress2">
  <div id="loading2"> </div>
</div>
(2)値の表示位置を調整
<style type="text/css">
  #loading2 {
    /*表示位置の絶対位置指定*/
    position: absolute;
    left: 50%;
  }
</style>
絶対表示については「CSS position」参照
<script type="text/javascript">
  $(function() {
    // (2)プログレスバーを生成
    $('#progress2').progressbar({
      value: 37,
      max: 150
    });
    // (3)現在の値(割合)を表示
    var per = $('#progress2').progressbar('value') / $('#progress2').progressbar('option', 'max');
    $('#loading2').text(Math.ceil(per * 100) + '%');
  });
</script>

動作デモ

(1)プログレスバーの表示領域
<div id="progress3">
  <div id="loading3"> </div>
</div>

(2)値の表示位置を調整
<style type="text/css">
  #loading3 {
    position: absolute;
    left: 50%;
  }
</style>

<script type="text/javascript">
  $(function(){
    var objP = $('#progress3');
    var objText = $('#loading3');
    
    objP.progressbar({
      value: 0,
      change: function(){
        objText.text(objP.progressbar('value') + '%');
      }
    });
    
    //0.1秒に1回、function(){~}を実行する
    var timer = setInterval(function(){
      var nowValue = objP.progressbar('value');
      //nowValue += 1 した値をプログレスバーに設定
      objP.progressbar('value', ++nowValue);
      if (nowValue >= 100){
        //本当は100になった時に時計を止める
        //clearInterval(timer);
        
        //デモ用。100になった時に値を0に。
        objP.progressbar('value', -100);
      }
    },100);
  });
</script>

jQuery-UI スライダー

(1)スライダーを表示する領域
<div id=”slider1″ style=”width:300px;”> </div>
<script type=”text/javascript”>
  $(function(){
    // (2)スライダーを適用
    $(‘#slider1’).slider({
      min: 0,
      max: 100,
      step: 2,
      value: 50,
    });
  });
</script>


<input id=”num” type=”text” size=”3″ readonly />
(1)スライダーを表示する領域
<div id=”slider2″ style=”width:300px;”> </div>
<script type=”text/javascript”>
  $(function(){
    // (2)スライダーを適用
    $(‘#slider2’).slider({
      min: 0,
      max: 100,
      step: 2,
      value: 50,
      // (3)スライダーの変化時にテキストボックスの値表示を更新
      change: function(e, ui) {
        $(‘#num’).val(ui.value);
      },
      //(4)スライダーの初期化時に、その値をテキストボックスにも反映
      create: function(e, ui){
        $(‘#num’).val($(this).slider(‘option’, ’value’));
      }
    });
  });
</script>

jQuery-UI 日付選択ボックス(DatePicker)

※画像
datepicker

(1)国際化対応のライブラリをインポート

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js”></script>

 ←クリックすると日付選択画面が表示される


<input type=”text” id=”date1″ size=”10″ />
<script type=”text/javascript”>
  $(function() {
    // (2)日本語を有効化
    $.datepicker.setDefaults($.datepicker.regional[‘ja’]);
    // (3)日付選択ボックスを生成
    $(‘#date1’).datepicker({ dateFormat: ‘yy/mm/dd’ });
  });
</script>

<input type=”text” id=”date2″ size=”10″ />
<script type=”text/javascript”>
  $(‘#date2’).datepicker({
    dateFormat: ‘yy/mm/dd’,
    showOn: ‘button’,  //both, focus, button
    buttonImage: ‘http://office-yone.com/wp-content/uploads/2014/06/calender.gif’,
    minDate: 0,
    maxDate: +40,
    changeYear: true,  //表示年を変更するための選択ボックスを表示するか
    changeMonth: true,  //表示月を変更するための選択ボックスを表示するか
    showOtherMonths: true,  //前後の月に属する日も表示するか
    showButtonPanel: true,  //[今日][閉じる]ボタンを表示するか
    showAnim: ‘show’,  //カレンダー表示時に使用するエフェクト
    numberOfMonths: 2,  //一度に表示する月の数
  });
</script>