Formulario de login que se visualiza al desplegar un panel en la parte superior de la página.

Si necesitas un método simple y práctico, de colocar un panel con un formulario para que los usuarios de tu sitio web puedan iniciar sesión, es decir hacer login mediante su usuario y contraseña, este script es una buena opción.

El ejemplo es muy simple de utilizar e instalarlo y con conocimientos mínimos sobre diseño web lo podrás poner en funcionamiento.

A continuación se describen las características principales del script como implementar el panel en las páginas de tu sitio, blog, foro etc ..

Indice - Contenido.

1. Vista previa del formulario con el panel de login.
2. Cómo añadir el panel de login en la página web.
3. Parámetros y opciones para configurar el script.
4. Utilizar un teclado virtual para ingreso de contraseña.

1 - Vista previa del formulario con el panel de login.

El panel, aunque se puede modificar, por defecto se encuentra ubicado en la parte superior de la página. Este muestra el texto Login, o puede cambiarse por el que se desee, por ejemplo Entrar, Iniciar sesión etc ...

Captura de pantalla:

Al hacer clic en el área del panel, este se desplegará mediante un efecto de fade, para mostrar el formulario, con los clásicos campos: Nombre o usuario y la contraseña.

Captura de pantalla:

2 - Cómo añadir el panel de login en la página web.

Es muy sencillo. En primer lugar es necesario insertar en la sección HEAD de la página, la referencia a los siguientes archivos: jquery.logify.js y jquery.logify.css ( El archivo de script y la hoja de estilo CSS)

El código HTML necesario para visualizar el formulario mas el panel es el siguiente: <div id="login"></div>

Dentro de este DIv se encuentra el formulario, obviamente también es posible colocar cualquier otro contenido que necesitemos, por ejemplo alguna imagen, texto etc ..

3 - Parámetros y opciones para configurar el script.

La siguiente lista describe las opciones y parámetros que se pueden utilizar para configurar el script a nuestras necesidades:

• URL: Este parámet5ro contiene la dirección URL que se deberá llamar cuando el usuario presione el botón de Iniciar sesión.
• HeaderText: Texto que se mostrará en la cabecera.
• UsernameText: Texto del nombre de usuario.
• PasswordText: texto de contraseña.
• ShowPassText: Casilla de verificación que permite mostrar y ocultar el texto de la contraseña
• unameemptyerrmsg: Mensaje de error cuando el nombre de usuario esté vacío.
• passworderrmsg: Mensaje de error cuando la contraseña está vacía.
• panellockederrmsg: Mensaje de error cuando el Panel está bloqueado y tratamos de cerrar.
• punto de vista: si el panel está abierto, cerrado o bloqueado.

Nota: Los valores de cada una de las variables y parámetros son los siguientes:

• url : "/"
• onSuccess : function(){alert("hi")},
• headertext : "Login",
• usernametext : "User Name",
• passwordtext : "Password",
• showpasstext : "Show Password",
• remembermetext : "Remember Me",
• logmebuttontext : "Log me in.",
• unameerrmsg : "User Name field is Empty.",
• pwderrmsg : "Password field is Empty.",
• pnllckerrmsg: "Panel is Locked.",
• view : "closed"

4 - Utilizar un teclado virtual para ingreso de contraseña.

Este es otro ejemplo muy útil para complementar con el script anterior. Haciendo clic aquí puedes descargar el proyecto.

Este muestra, como al ingresar a un campo de ingreso de contraseña, este automáticamente mostrará un teclado virtual para que el usuario pueda ingresar su password.

Nota: puedes modificar el tamaño de las teclas y otras propiedades, editando el archivo de hoja de estilo llamado: jquery.virtualkey.css

Vista previa del teclado.

Requerimientos : jQuery