2012-04-25 6 views
0

У меня есть диалоговое окно JQuery-UI, который содержит полотно, и шахматная доска рисуется на холсте так:Изменение размера холста Внутри JQuery-UI диалоговое

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script> 
<script> 
$(function) { 
    $("#chessboard").dialog({ 
     autoOpen: true, 
     height: 500, 
     width: 500, 
     modal: false 
    } 

    function drawboard() { 
     ctxt = document.getElementByID("chessboard").getContext("2d"); 

     // draw the board into the context 
     ... 
    } 

    drawboard(); 
    </script> 
    </head> 
    <body> 
    <canvas id="chessboard" width="400" height="400" /> 
    </body> 
    </html> 

Совет заполняет весь диалог, но Я был приятно удивлен, когда обнаружил, что шахматная доска может быть изменена вместе с диалогом. Затем я попробовал следующее, чтобы организовать, например. игра нотация вместе с платой в диалоге:

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script> 
<script> 
$(function) { 
    $("#chessboard-container").dialog({ 
     autoOpen: true, 
     height: 500, 
     width: 500, 
     modal: false 
    } 

    function drawboard() { 
     ctxt = document.getElementByID("chessboard").getContext("2d"); 

     // draw the board into the context 
     ... 
    } 

    drawboard(); 
    </script> 
    </head> 
    <body> 
    <div id="chessboard-container"> 
     <canvas id="chessboard" width="400" height="400" /> 
     <div id="notation"></div> 
    </div> 
    </body> 
    </html> 

Теперь плата еще оказывается на холсте, но он не может быть изменен с помощью диалога.

Возможно ли изменить размер элемента шахматной доски вместе с каналами?

ответ

0

похоже, что вы хотите привязываться к событию «resize», а затем повторно рисовать свою шахматную доску во время этого события.

добавить

resize: function(event, ui) { drawChessBoard() } 

в код инициализации

Смежные вопросы