阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Knob 中文API文档

      插件 jQuery.Knob 中文API文档

      不错,向下兼容,可触摸,jQuery拨号

      jQuery旋钮

      • 画布; 没有png或jpg精灵。
      • 触摸,鼠标和鼠标滚轮,实现键盘事件。
      • 向下兼容; 重载输入元素。

      <input type="text" value="75" class="dial">
      
      <script>
          $(function() {
              $(".dial").knob();
          });
      </script>
      

      选项

      选项作为属性’data-option’提供:

      …或者在“knob()”调用中:

      $(".dial").knob({ ‘min’:-50, ‘max’:50 });

      支持以下选项:

      行为

      • min:最小值| 默认= 0。
      • max:最大值| 默认= 100。
      • 步骤:步长| 默认= 1。
      • angleOffset:以度为单位的起始角度 默认= 0。
      • angleArc:弧度以度为单位| 默认= 360。
      • 塞子:在keydown / mousewheel上以最小值和最大值停止| 默认为真。
      • readOnly:禁用输入和事件| 默认值=假。
      • 旋转:进展方向| 默认为顺时针。

      UI

      • cursor:显示模式“cursor”,游标大小可以通过数值传递给选项,传递布尔值时使用默认宽度“true”| 默认=计。
      • 厚度:厚度。
      • lineCap:测量行程结束。| default = butt,round =圆形行结尾
      • 宽度:拨号宽度。
      • 高度:表盘高度。
      • displayInput:default = true | false =隐藏输入。
      • displayPrevious:default = false | true =显示具有透明度的上一个值。
      • fgColor:前景色。
      • inputColor:输入值(数字)颜色。
      • 字体:字体系列。
      • fontWeight:字体粗细。
      • bgColor:背景颜色。

      Hooks

      <script>
          $(".dial").knob({
              'release' : function (v) { /*make something*/ }
          });
      </script>
      
      • ‘release’:在发布时执行
        • 参数:value:int,当前值
      • ‘change’:在每次更改值时执行
        • 参数:value:int,当前值
      • ‘draw’:绘制画布时
        • 背景:
          • this.g:canvas context 2D(参见Canvas文档)
          • 这个。$:jQuery包装元素
          • this.o:选项
          • this.i:输入
          • … console.log(this);
      • ‘cancel’:在[ esc] keydown上触发
      • ‘format’:允许格式化输出(添加单位%,ms …)

      每个钩子函数的范围(this)是当前的Knob实例(参见演示代码)。

      <input type="text" value="75" class="dial">
      
      <script>
          $(".dial").knob({
              'change' : function (v) { console.log(v); }
          });
      </script>
      

      动态配置

      <script>
          $('.dial').trigger(
              'configure',
              {
                  "min":10,
                  "max":40,
                  "fgColor":"#FF0000",
                  "skin":"tron",
                  "cursor":true
              }
          );
      </script>
      

      设置值

      <script>
          $('.dial')
              .val(27)
              .trigger('change');
      </script>
      

      支持的浏览器

      测试Chrome,Safari,Firefox,IE> = 8.0(带有excanvas的IE8.0)。

      目录
      目录