ダイヤルで回して値を調整できるプラグイン「jQuery Knob」

2021.07.20　Posted by Coding_team

Webプログラミング

tecmemo2107

こんにちは、ウェブラボクリエイターズメモです。

今回は、ダイヤルで回して値を調整できるプラグイン「jQuery Knob」を紹介したいと思います。

早速ですが、このプラグインで何ができるか見てもらうためにいくつかDEMOを用意しましたのでそちらをご確認ください。

→DEMO

このような綺麗なダイヤルの入力欄が作れます！

公式の解説など見れば説明は不要かもしれませんが、簡単にしていきます。

→jQuery Knob

■HTML

<input type="text" value="75" class="dial" data-fgColor="#ff0000"><!-- data-fgColorで色変更 -->
<input type="text" value="35" class="dial" data-fgColor="#00ff00" data-angleArc="270"><!-- data-angleArcで角度 -->
<input type="text" value="75" class="dial" data-fgColor="#0000ff" data-readOnly="true"><!-- data-readOnlyで値の変更不可 -->

後々script部分で指定するためクラスdialを付与し、オプションなどはdata属性で追加で記述します。

■HTML script部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/jquery.knob.js"></script>
<script>
    $(function() {
        $(".dial").knob();
    });
</script>