マークアップとスクリプティング

wijSlider ウィジェットの HTML マークアップは次のようになります。

マークアップ	コードのコピー
<div id="slider"></div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $("#slider").wijslider({ orientation: "vertical", min: 0, max: 100, step: 5, //Because the range option is false by default, we //use the value option to set the value for the //default positions of the thumb button. //If range were set to true, we would use //the values option to provide an array of values //for the two thumbs. value: 25 }); }); </script>

スクリプト

コードのコピー

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#slider").wijslider({
            orientation: "vertical",
            min: 0, 
            max: 100, 
            step: 5, 
            //Because the range option is false by default, we 
            //use the value option to set the value for the
            //default positions of the thumb button.
            //If range were set to true, we would use 
            //the values option to provide an array of values
            //for the two thumbs.
            value: 25
        });
    });  
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。サムボタンをクリックしてドラッグするか、インクリメントボタンとデクリメントボタンをクリックします。

関連トピック

参照