2012/09/04

[jQuery UI]sliderを作成

ためしに、jQuery UIをスライダーマニュアルを参考に作成してみました。




chromeとIE8で正常動作しました。

ソースコードはめっちゃ単調。
<style>#slider_test001{width:200px;}</style>
<div id="slider_test001"></div>
<script>$(function() {$( "#slider_test001" ).slider();});</script>
オプションを使って、最大値(max)と最小値(min)を設定することもできます。

それぞれデフォルト値は、
最大値(max):100
最小値(min):0
となっています。

変更する場合は、
<style>#slider_test001{width:200px;}</style>
<div id="slider_test001"></div>
<script>
$(function() {
    $( "#slider_test001" ).slider({
        max:200,
        min:1
    });
});
</script>
とする必要があります。
またスライド自身のデフォルト値が0なので、変更したい場合は、
<style>#slider_test001{width:200px;}</style>
<div id="slider_test001"></div>
<script>
$(function() {
    $( "#slider_test001" ).slider({
        max:200,
        min:1,
        value:33
    });
});
</script>
とvalueキーに値を設定する必要があります。
ためしに、valueキーを設定した場合の実行結果を下に貼り付けます。



0 コメント:

コメントを投稿