Question

你好，我有一个旋转java脚本，之前它完美地工作，但现在看来它只显示输入形式，我猜错误是在jquery.knob.min.js。

看起来像这样

但现在它显示了这个

这是显示模态

的HTML

<!-- jQuery Knob -->
<script src="{SITE_CMS_ROOT}vendors/jquery-knob/dist/jquery.knob.min.js"></script>

<script>
$(document).ready(function() {      
    ModalCustom = function(options) {
        var html = "<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-hidden='true'> 
                        <div class='modal-dialog modal-lg'> 
                            <div class='modal-content'> 
                                <div class='modal-header'> 
                                    <button type='button' class='close' data-dismiss='modal'>
                                        <span aria-hidden='true'>x</span> 
                                    </button> 
                                    <h4 class='modal-title' id='myModalLabel'><b> Edit {SITE_DESCRIPTION} </b>: " + options.Name + "</h4> 
                                </div>
                                <div class='modal-body'> <h4></h4> 
                                    <form action='{SITE_CMS_ROOT}?factions&submit' method='post' class='form-horizontal form-label-left'>
                                        <div class='form-group'>
                                            <div class='col-md-2'>
                                                <p>Display value</p>
                                                <input class='knob' data-width='100' data-height='120' data-min='-100' data-displayPrevious=true data-fgColor='#26B99A' value='44'>
                                            </div>
                                            <div class='col-md-2'>
                                                <p>&#215; 'cursor' mode</p>
                                                <input class='knob' data-width='100' data-height='120' data-cursor=true data-fgColor='#34495E' value='29'>
                                            </div>
                                            <div class='col-md-2'>
                                                <p>Step 0.1</p>
                                                <input class='knob' data-width='100' data-height='120' data-min='-10000' data-displayPrevious=true data-fgColor='#26B99A' data-max='10000' data-step='.1' value='0'>
                                            </div>
                                            <div class='col-md-2'>
                                                <p>Angle arc</p>
                                                <input class='knob' data-width='100' data-height='120' data-angleOffset=-125 data-angleArc=250 data-fgColor='#34495E' data-rotation='anticlockwise' value='35'>
                                            </div>
                                            <div class='col-md-2'>
                                                <p>Alternate design</p>
                                                <input class='knob' data-width='110' data-height='120' data-displayPrevious=true data-fgColor='#26B99A' data-skin='tron' data-thickness='.2' value='75'>
                                            </div>
                                            <div class='col-md-2'>
                                                <p>Angle offset</p>
                                                <input class='knob' data-width='100' data-height='120' data-angleOffset=90 data-linecap=round data-fgColor='#26B99A' value='35'>
                                            </div>
                                        </div>
                                        <div class='modal-footer'> 
                                            <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> 
                                            <button type='submit' class='btn btn-primary'>Save changes</button> 
                                        </div>
                                    </form>
                                </div>                                  
                            </div> 
                        </div> 
                    </div>";
        appendHtml(document.body, html);
    };

    function appendHtml(el, str) {
        var div = document.createElement('div');
            div.innerHTML = str;
            $el = el;
            $(el).find(".modal");
            if ($el.lenght){
                var cnt = $(div.children[0]);
                $(".modal").replaceWith(cnt);
            } else {
                el.appendChild(div.children[0]);
                console.log( $("#something").find(".modal").length );
                $el.lenght = 1;
            }
    }
});
</script>

<!-- jQuery Knob -->
<script>
  $(function($) {

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

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

          this.cursorExt = 0.3;

          var a = this.arc(this.cv) // Arc
            ,
            pa // Previous arc
            , r = 1;

          this.g.lineWidth = this.lineWidth;

          if (this.o.displayPrevious) {
            pa = this.arc(this.v);
            this.g.beginPath();
            this.g.strokeStyle = this.pColor;
            this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
            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, a.s, a.e, a.d);
          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;
        }
      }
    });

    // Example of infinite knob, iPod click wheel
    var v, up = 0,
      down = 0,
      i = 0,
      $idir = $("div.idir"),
      $ival = $("div.ival"),
      incr = function() {
        i++;
        $idir.show().html("+").fadeOut();
        $ival.html(i);
      },
      decr = function() {
        i--;
        $idir.show().html("-").fadeOut();
        $ival.html(i);
      };
    $("input.infinite").knob({
      min: 0,
      max: 20,
      stopper: false,
      change: function() {
        if (v > this.cv) {
          if (up) {
            decr();
            up = 0;
          } else {
            up = 1;
            down = 0;
          }
        } else {
          if (v < this.cv) {
            if (down) {
              incr();
              down = 0;
            } else {
              down = 1;
              up = 0;
            }
          }
        }
        v = this.cv;
      }
    });
  });
</script>
<!-- /jQuery Knob -->

以下是jQuery Knob的脚本

jquery.knob.min.js

旋钮CSS不起作用

0 个答案: