Jquery,在用一些变量附加div之后如何将变量转换为可编辑的内容?

时间:2017-03-03 00:08:18

标签: jquery fabricjs

我正在使用fabric.js,在画布中绘制一条线后,一个模态打开并在jquery中获取一些值。这些值是.adpend在div id =“#anotacao”中。如何使这些值可编辑?谢谢!

 var creatingModal = false;

  canvas.on('mouse:up', function (){
      creatingModal = true;
      jQuery('#modal').modal('show').trigger('shown');
      //get values from obs form
      jQuery(document).on("click", "#submitObservacao", function(e){
        e.preventDefault();

        var denteNumero   = jQuery("#dente").val();
        var procedimentos = jQuery("#procedimentos").val();
        var observacao    = jQuery("#observacoes").val();


        jQuery("#anotacoes").append(
          '<div class="thumbnail" id="itemObs"><b>Dente</b>:'+ denteNumero +' <i class="fa fa-trash f-right" id="removerNow" aria-hidden="true"></i> <br> <b>Procedimentos:</b> '+ procedimentos +'<br> <b>Observações:</b>'+ observacao +'<br> </div>'
        );

        //refreshing values
        jQuery(denteNumero).val('');
        jQuery("#dente").val('');
        jQuery(procedimentos).val('');
        jQuery(observacao).val('');
        jQuery("#observacoes").val('');
        jQuery('#modal').modal('hide').unique();
      });

      jQuery(document).on("click", "#itemObs", function(){
        console.log('#itemObs');
      });

      jQuery(document).on("click", "#removerNow", function(e){
        e.preventDefault();

        jQuery(this).parent().remove();

        var canvas_objects = canvas._objects;
        console.log(canvas_objects);
          if(canvas_objects.length !== 0){
            var last = canvas_objects[canvas_objects.length -1]; //Get last object
            canvas.remove(last);
            canvase.renderAll();
           }
      });
  });

HTML:

      

    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 ">
      <canvas id="c"  width="840" height="590" style="border:1px solid #aaa"></canvas>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-3 col-xs-12 ">
      <div style="display: inline-block; margin-left: 10px">
        <button style="visibility: hidden;" id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
        <button style="visibility: hidden;" id="clear-canvas" class="btn btn-info">Clear</button><br>

          <div id="drawing-mode-options">
           <label style="visibility: hidden;" for="drawing-mode-selector">Mode:</label>
           <select style="visibility: hidden;" id="drawing-mode-selector">
             <option>Pencil</option>
             <option>Circle</option>
             <option>Spray</option>
             <option>Pattern</option>

             <option>hline</option>
             <option>vline</option>
             <option>square</option>
             <option>diamond</option>
             <option>texture</option>
           </select><br>

            <div class="thumbnail od-thumb">
              <label for="drawing-line-width">Expessura da Linha:</label>
              <span class="info">2</span><input type="range" value="2" min="0" max="150" id="drawing-line-width"><br>

              <label for="drawing-color">Cor da Linha:</label>
              <input type="color" value="#005E7A" id="drawing-color"><br>
           </div>
             <label style="visibility: hidden;" for="drawing-shadow-color">Shadow color:</label>
             <input style="visibility: hidden;" type="color" value="#005E7A" id="drawing-shadow-color">

             <label style="visibility: hidden;" for="drawing-shadow-width">Shadow width:</label>
             <span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-width">

             <label style="visibility: hidden;" for="drawing-shadow-offset">Shadow offset:</label>
             <span style="visibility: hidden;" class="info">0</span><input style="visibility: hidden;" type="range" value="0" min="0" max="50" id="drawing-shadow-offset">
         </div>
      </div>
    <!-- close col-panel first-->
    </div>
    <!-- fecha row -->
   </div>
   <!-- jumbotron -->
   <div class="row">
     <div class="">

     </div>
     <div class="col-lg-12">
       <div class="tron" id="anotacoes">

       </div>
     </div>
   </div>

1 个答案:

答案 0 :(得分:0)

也许您可以使用<input type="text" value="">并将可修改的内容作为值。 因此,您可以使用一些ID隐藏在HTML代码中。在您的jquery中,您使用:$("#idoftheinput").val(JQUERY-var) 因此,您有表单字段,因此它们是可编辑的,您可以添加侦听器,以便在用户更改值时执行某些操作。