jQuery UI

jQuery UIによる画面コンポーネント（１）
●スライダで表示領域の大きさを変える

jQuery UI設定

var zoom=70;
var elem=$('#example');
var width=elem.width();
var height=elem.height();

function zoomDiv(elem,zoom) {
   var w=width *zoom/100;
   var h=height *zoom/100;
   $(elem).css({width:w+'px',height:'px'})
          .text([w,h].join());
   $('#lavel-ex1').text(zoom);
}
zoomDiv(elem,zoom);

$('div#ex1').slider( {
   startValue:zoom,
   slide:function(ev,ui) {
     zoomDiv(elem,ui.value);
   }
} );

CSS設定

div#example{width:200px; height:150px; background-color:#fc9;}

<p>
  <div id="ex1" class="ui-slider-1">
   <div class="ui-slider-handle"></div>
  </div>
  <span id="laber-ex1">0</span>%
  <div id="example"></div>
</p>