Canvas的JQuery Mobile Popup

我期待在Jquery Mobile中創建一個彈出窗口，其中嵌入了一個畫布。Canvas的JQuery Mobile Popup

訣竅是我需要在橫向模式下彈出/腔體啓動..無論屏幕的當前方向如何？

有什麼建議嗎？

感謝

2014-09-10 user1763684

因此，如果用戶在縱向模式下握住設備，您希望整個彈出窗口旋轉90度，或者只是畫布的內容？ – ezanker 2014-09-10 16:26:28

是的。就是這樣。我正在製作一個簽名應用程序（使用html畫布）..我希望畫布以彈出式，全屏，縱向模式顯示。我有canvas/jquery爲簽名工作......我只是想弄清楚popup/landscape問題。謝謝。 – user1763684 2014-09-10 16:51:50

你可以使用在彈出的內容的CSS變換，當你檢測設備處於縱向模式旋轉90度。

創建（順時針方向爲-90逆時針，90）進行轉動一個CSS類：

.rotateCCW { 
    -ms-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -webkit-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
}

然後在彈出的popupbeforeposition事件，檢查方向，添加或刪除的CSS類：

$("#popupDialog").on("popupbeforeposition", function(event, ui) { 
    if (is_landscape()){ 
     $("#popupDialog").removeClass("rotateCCW"); 
    } else { 
     $("#popupDialog").addClass("rotateCCW");    
    }  
}); 

function is_landscape() { 
    return (window.orientation === 90 || window.orientation === -90); 
}

這裏是一個DEMO

來源

2014-09-10 18:35:01 ezanker

Canvas的JQuery Mobile Popup

回答

相關問題