移动web应用程序的HTML和CSS锁定屏幕

2018-06-19 07:32:00

我正在构建一个单独的页面，使用jquery mobile，backbone，underscore和tbd模板引擎的离线html5 web应用程序。

我想创建一个类似于本机iPhone锁屏的锁屏。在我重新发明之前，有没有人看过类似的东西？我一直无法找到一个这样的例子。

谢谢！

编辑：哦，不，这是一个古老的问题！

将一个固定位置的隐藏div到您的页面。当您需要激活锁定屏幕时，请使用jQuery以编程方式显示它：

CSS

div#lockscreen {
    width: 0;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

jQuery的

$(document).ready(function() {
    //hypothetical activation control
    $("#lock").click(function() {
        $("#lockscreen").css("width", "100%");
        $("#lockscreen").css("height", "100%");
        $("#lockscreen").css("z-index", "1000");
        //or dynamically generate z-index value
        $("#lockscreen").fadeIn();
    });
});

那么它现在已经被挖掘出来了，所以我可以补充一点。在文本字段上使用<input type="text" pattern="[0-9]*" />来获取数字输入。不完全相同，但比使用全键盘更容易，比自己编码整个键盘更容易。

链接地址: http://www.djcxy.com/p/54391.html

上一篇: HTML and CSS lock screen for mobile web application

下一篇: How can I set a timeout on a Hibernate save() call with a MySQL backend?