要使用 JQuery UI 的 Spinner Widget,首先必須引用 JQuery、JQueryUI。
1 | <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> |
接著在畫面上放入一個 input element。
1 | <input id="spinner"> |
在 Javascript 中用 JQuery 找到該 input element,並叫用 spinner 方法即可將該 input element 設為 spinner。
1 | $(function() { |

若要做些細部設定,spinner 有提供些 options 可供我們使用,像是 min 可以設定 spinner 的最小值,max 可以設定 spinner 的最大值,step 可以設定 spinner 按一次要增加多少值。
1 | $(function() { |
若要主動觸發 spinner,也提供了些 methods 讓我們使用,像是 value。
1 | $(function() { |
最後這邊附上測試用的範例:
1 |
|