Question

我正在使用jquery mobile，backbone，underscore和tbd模板引擎构建单页，离线html5 Web应用程序。

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

谢谢！

Answer 1

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

向页面添加固定位置，隐藏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();
    });
});

Answer 2

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

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

2 个答案: