この手順では、スライダコントロールを追加します。実行時にスライダのつまみボタンが移動すると、ゲージコントロールの値が変化します。次の手順では、「 手順 2:コントロールの外観のカスタマイズ 」トピックが完了していると想定しています。
ソースビューで、次のマークアップを</cc1:C1LinearGauge>
タグのすぐ下に追加して、テキストを追加します。
ソースビュー |
コードのコピー
|
---|---|
<p>スライダのつまみボタンをドラッグ&ドロップして、ゲージの値を変更する:</p> |
</p>
タグのすぐ下に次のマークアップを追加して、スライダコントロールをページに追加します。ソースビュー |
コードのコピー
|
---|---|
<div id="slider" style="width: 400px"></div> |
</div>
タグのすぐ下に次のマークアップを追加して、スライダコントロールを有効にします。ソースビュー |
コードのコピー
|
---|---|
<script type="text/javascript"> $(document).ready(function () { $("#<%= C1Slider1.ClientID %>").c1slider({ value: $("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value"), change: function (event, ui) { $("#<%= C1LinearGauge1.ClientID %>").c1lineargauge("option", "value", ui.value); } }); }); </script> |
これで、スライダの値が変化すると、ゲージの値も変化して新しい値を反映するようになりました。