LinearGauge for ASP.NET Web Forms
手順 3:コントロールの動作のカスタマイズ
クイックスタート > 手順 3:コントロールの動作のカスタマイズ

この手順では、スライダコントロールを追加します。実行時にスライダのつまみボタンが移動すると、ゲージコントロールの値が変化します。次の手順では、「 手順 2:コントロールの外観のカスタマイズ 」トピックが完了していると想定しています。

  1. ソースビューで、次のマークアップを</cc1:C1LinearGauge> タグのすぐ下に追加して、テキストを追加します。

    ソースビュー
    コードのコピー
    <p>スライダのつまみボタンをドラッグ&ドロップして、ゲージの値を変更する:</p>
  2. ソースビューで、直前に追加した </p> タグのすぐ下に次のマークアップを追加して、スライダコントロールをページに追加します。
    ソースビュー
    コードのコピー
    <div id="slider" style="width: 400px"></div>
    これで、ページにスライダコントロールが含まれました。 
  3. ソースビューで、直前に追加した </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>

    これで、スライダの値が変化すると、ゲージの値も変化して新しい値を反映するようになりました。

  4. アプリケーションを実行し、次のように、加えた変更がコントロールに表示されることを確認します。


  5. スライダのつまみボタンをクリックして、ドラッグ&ドロップ操作を実行します。C1LinearGauge コントロールの値が変わって、スライダコントロールの値を反映することに注意してください。
この手順では、コントロールの動作をカスタマイズしました。おめでとうございます、これでクイックスタートは終了です。
関連トピック