Écran de verrouillage HTML et CSS pour une application web mobile

Question

Je suis en train de construire une application web html5 d'une seule page, hors ligne, utilisant jquery mobile, backbone, underscore et le moteur de templating tbd.

J'aimerais créer un écran de verrouillage qui ressemble à l'écran de verrouillage natif de l'iPhone. Avant de réinventer la roue, est-ce que quelqu'un a déjà vu quelque chose comme ça ? Je n'ai pas trouvé d'exemple de ce genre.

Merci de votre attention !

Answer 1

Editer : Oh non, c'est une vieille question !

Ajouter une position fixe, cachée div à votre page. Lorsque vous devez activer l'écran de verrouillage, utilisez jQuery pour l'afficher par programmation :

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

Il a déjà été évoqué, alors je peux bien l'ajouter. Utiliser <input type="text" pattern="[0-9]*" /> sur un champ de texte pour obtenir une entrée numérique. Ce n'est pas tout à fait la même chose, mais c'est plus facile que d'utiliser un clavier complet, et plus facile que de coder tout le clavier soi-même.