Экран блокировки HTML и CSS для мобильного веб-приложения - PullRequest
Новая
       25

Экран блокировки HTML и CSS для мобильного веб-приложения

7 голосов
/ 15 августа 2011

Я создаю одностраничное автономное html5-приложение с использованием jquery mobile, backbone, underscore и tbd.

Я бы хотел создать экран блокировки, похожий на собственный экран блокировки iPhone.Прежде чем я изобрету колесо, кто-нибудь видел что-то подобное раньше?Я не смог найти пример этого.

Спасибо!

Ответы [ 2 ]

4 голосов
/ 25 мая 2012

Редактировать: О нет, это старый вопрос!

Добавить фиксированную позицию, скрытую 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();
    });
});
0 голосов
/ 25 мая 2012

Что ж, теперь это было углублено, так что я мог бы также добавить это.Используйте <input type="text" pattern="[0-9]*" /> в текстовом поле, чтобы получить числовой ввод.Не совсем то же самое, но проще, чем использовать полноценную клавиатуру, и проще, чем программировать всю клавиатуру самостоятельно.

...