読者です 読者をやめる 読者になる 読者になる

<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;'>&nbsp;</div>
<div id='slidervalue' style='float:left;'></div>
<div id='target'></div>

いけるね。