부트 스트랩 양식에 jSignature 추가

Question

jSignature 위젯을 표준 부트 스트랩 양식에 추가하려하지만 지금까지 양식에 아무 것도 나타나지 않습니다 (다른 양식 필드는 잘 보임).

<script src="assets/js/jquery.min.js"></script> 
 
<script src="assets/js/jSignature.min.js"></script> 
 

 
<!--[if lt IE 9]> 
 
\t <script type="text/javascript" src="assets/js/flashcanvas.js"></script> 
 
\t <![endif]--> 
 

 
<script> 
 
    $(document).ready(function() { 
 
    $("#signature").jSignature() 
 
    }) 
 
</script>

: 나는 올바른 순서로 페이지 하단에있는 모든 파일을 포함하고있어

<form id="saveEvent" action="index.php" method="post"> 
 
    <div class="form-group"> 
 
    <label for="yourName">Your Name</label> 
 
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="yourSignature">Your Signature</label> 
 
    <div id="signature"></div> 
 
    </div> 
 
    <hr /> 
 
    <button type="reset" class="btn btn-default">Reset</button> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

: 여기

내 양식의

하지만 서명 캔버스가 표시되지 않습니다. 여기에 도움이된다면 제가 보는 것의 스크린 샷입니다 :

내가 그렇게 꽤 순간 난처한 상황에 빠진 모든 서버 오류 또는 콘솔 오류를받지 못했습니다 -이 jSignature를 사용에서 처음으로 이동합니다.

Answer 1

안녕하세요 지금이 코드를 확인하십시오 작동하고 제대로 코드 내가 높이 것으로 나타났습니다 dev에 도구를 추가 검사시

Ref this code

$('#signature').signature();

#signature{ 
 
width:300px; 
 
    height:200px; 
 
    border:solid 1px red; 
 
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.css" rel="stylesheet"> 
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> 
 

 
<link type="text/css" href="http://keith-wood.name/css/jquery.signature.css" rel="stylesheet"> 
 
<script type="text/javascript" src="http://keith-wood.name/js/jquery.signature.js"></script> 
 

 

 

 
<form id="saveEvent" action="index.php" method="post"> 
 
    <div class="form-group"> 
 
    <label for="yourName">Your Name</label> 
 
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label for="yourSignature">Your Signature</label> 
 
    <div id="signature"></div> 
 
    </div> 
 
    <hr /> 
 
    <button type="reset" class="btn btn-default">Reset</button> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
</form>

Answer 2

정확합니다 서명 div의 값은 0px입니다. 나는 스크립트에이 추가 결국 :

$(document).ready(function() { 
 
    $("#signature").jSignature({ 
 
    height: 200 
 
    }); 
 
    $("#signature").resize(); 
 
})

을이 적어도 지금 서명 캡처를 보이고있다.