如何在Laravel中显示js旋钮?

时间:2019-08-01 19:35:41

标签: javascript laravel jquery-knob

我正在尝试在刀片中显示js旋钮。我以AdminLte为例,但是旋钮未显示。

我创建了一个html刀片,链接了保存在我的public / js文件夹中的jQuery旋钮。

我没有收到任何错误。我认为错误可能是我如何链接到Java脚本。非常感谢您的帮助。

<div style="display:inline;width:90px;height:90px;">
    <canvas width="180" height="180" style="width: 90px; height: 90px;"></canvas><input type="text" class="knob" value="30"></div>

<script type="text/javascript" src="{{ URL::asset('js/jquery.knob.js') }}"></script>

 <script>
    $(function () {

      $(".knob").knob({
                                          /*change : function (value) {
                                           //console.log("change : " + value);
                                           },
                                           release : function (value) {
                                           console.log("release : " + value);
                                           },
                                           cancel : function () {
                                           console.log("cancel : " + this.value);
                                           },*/
                                          draw: function () {

                                            // "tron" case
                                            if (this.$.data('skin') == 'tron') {

                                              var a = this.angle(this.cv)  // Angle
                                                  , sa = this.startAngle          // Previous start angle
                                                  , sat = this.startAngle         // Start angle
                                                  , ea                            // Previous end angle
                                                  , eat = sat + a                 // End angle
                                                  , r = true;

                                              this.g.lineWidth = this.lineWidth;

                                              this.o.cursor
                                              && (sat = eat - 0.3)
                                              && (eat = eat + 0.3);

                                              if (this.o.displayPrevious) {
                                                ea = this.startAngle + this.angle(this.value);
                                                this.o.cursor
                                                && (sa = ea - 0.3)
                                                && (ea = ea + 0.3);
                                                this.g.beginPath();
                                                this.g.strokeStyle = this.previousColor;
                                                this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
                                                this.g.stroke();
                                              }

                                              this.g.beginPath();
                                              this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
                                              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
                                              this.g.stroke();

                                              this.g.lineWidth = 2;
                                              this.g.beginPath();
                                              this.g.strokeStyle = this.o.fgColor;
                                              this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
                                              this.g.stroke();

                                              return false;
                                            }
                                          }
                                        });  
                                    </script>

0 个答案:

没有答案