Canvas的JQuery Mobile Popup

jquery-mobile

2014-09-10 84 views 0 likes

我期待在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

回答

相关问题