<jQuery> スライダで少し遊ぶ
スライダーバーslider bar
で少し遊ぶ。
スライドさせて、その値をとって、
タグの縦横を変更して、そこにhtmlを出力してみる。
<script src='https://code.jquery.com/jquery-1.12.1.min.js'></script> <script src='https://code.jquery.com/ui/1.11.4/jquery-ui.min.js'></script> <link rel='stylesheet' href='//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'> <style type='text/css'>#slider{ width: 300px; }</style> <script> <!-- $(function(){{ $( '#slider' ).slider({ max: 100, min: 0, value: 50, step: 10, slide: function( event, ui ) { }, change: function( event, ui ) { $('#slidervalue').html(ui.value + 'px'); $('#target').width(ui.value + 'px').height(ui.value + 'px'); map(); }, create: function( event, ui ) { $('#slidervalue').html($(this).slider( 'value' ) + 'px'); } }); var map = $('#target').html("<div>hage</div>"); }}) --> </script> <div id='slider' style='float:left;'></div> <div id='blank' style='float:left;'> </div> <div id='slidervalue' style='float:left;'></div> <div id='target'></div>
いけるね。