javascript - sexualmente - como ser una maquina en la cama
Consejo de GUI HTML+JavaScript (4)
Sugiero revisar la biblioteca JQuery UI . Más específicamente, la funcionalidad de pestañas que proporciona, http://jqueryui.com/demos/tabs/ .
Regla simple para cargar datos en sus pestañas. Pequeño y simple , cárguelo por adelantado. Grande y complejo , cárguelo a pedido. En caso de duda , cárguelo a pedido.
Estoy trabajando en una aplicación de editor / secuenciador de música que se escribirá en JavaScript + HTML5 y utilizará el elemento canvas y la API de Web Audio de Chrome (ya tengo un prototipo simple funcionando ).
Una de las cosas de las que no estoy tan seguro es cómo implementar la GUI para esto. Necesitará tener muchas vistas diferentes, y me gustaría que cada vista se muestre en una "pestaña" diferente, con una pestaña en primer plano en un momento dado y todas las demás ocultas. Simplemente no estoy seguro de cómo implementar todas estas pestañas.
¿Sería mejor implementar cada pestaña como una capa HTML diferente y tener botones que controlen qué capa se muestra arriba? ¿Sería mejor en lugar de (re) generar HTML sobre la marcha cuando se presionan los botones de tabulación?
Su consejo es apreciado.
¿Sería mejor implementar cada pestaña como una capa HTML diferente y tener botones que controlen qué capa se muestra arriba? ¿Sería mejor en lugar de (re) generar HTML sobre la marcha cuando se presionan los botones de tabulación?
Me inclinaría por generar el contenido una vez y mostrarlo / esconderlo a pedido, especialmente si la mayoría del trabajo se realiza en el navegador y no se realizan solicitudes sincrónicas a un servidor cuando se interactúa con elementos en la página. Ver nota 1
Al mostrar el contenido de una pestaña ...
Suponiendo que el contenido de cada pestaña se genera rápidamente, puede hacer que su aplicación sea más eficiente al crear solo el contenido para la pestaña cuando se solicita por primera vez. De esta forma, si nunca se accede a la pestaña, no se utilizan recursos.
Al ocultar el contenido de una pestaña ...
Al trabajar con multimedia, es posible que deba realizar acciones adicionales cuando oculta contenido. Por ejemplo, un video no se detendrá solo porque lo ocultes. Para su aplicación de audio, puede que necesite detener la reproducción de la secuencia actual.
Hay muchos controles de pestañas disponibles, como las pestañas jQuery UI (gratuitas) y las pestañas deslizantes (con licencia pero de bajo costo).
Otros escenarios
Las pestañas deben usarse para cambiar entre los principales bloques de contenido como documentos (por ejemplo, pestañas del navegador) y / o la funcionalidad utilizada regularmente (por ejemplo, un formulario de personal que tiene una pestaña para información de contacto y otra para el historial de empleo). Otros escenarios pueden ser más adecuados para un diálogo (modal o no modal).
Usando el ejemplo de audio, si tuviera un botón con la etiqueta "tempo", esperaría que abriera una pequeña ventana de diálogo sobre mi vista actual en lugar de llevarme a una nueva pestaña. Los teclados de la estación de trabajo de Roland usan este paradigma. El contenido principal reemplaza la vista actual, pero las ventanas de configuración / configuración generalmente aparecen en la parte superior de la vista existente.
jQuery UI también tiene un complemento de diálogo para este propósito. Si tiene conocimientos de JavaScript y se dirige a navegadores más nuevos, no es tan difícil escribir su propio diálogo simple.
1 Generar contenido sobre la marcha aún puede ser perfectamente aceptable con una relación cliente-servidor interactiva, pero introduce consideraciones adicionales, como la sincronización de lo que está en el navegador con el modelo de datos en el servidor (si lo hay), la presentación de campos de formulario innecesarios (aumentando el tamaño de la solicitud), tamaño de página general, etc.
Si está trabajando en un lienzo, haga su GUI en su lienzo. Seriamente. Usar divs en frente de un lienzo es aburrido. Intenté ambas cosas, y prefiero usar lienzo.
La forma más fácil es crear una clase de "botón" que tomará una imagen y definirá una zona clicable en su lienzo para esta imagen (si desea detección de píxeles, hay una manera que usa lienzo fuera de pantalla y getpixel para verificar los colores debajo del mouse y cosas, demasiado largas para explicarlas aquí).
Luego, una vez que tenga su botón o la clase de GUI, puede ponerlos en su lienzo y no tendrá que administrar múltiples elementos html. Además, algunos elementos html en frente de un lienzo a menudo tienen comportamientos extraños. Es por eso que prefiero crear mi GUI directamente en el lienzo. Más duro al principio pero apropiado.
De y, por favor, haz posible colocar múltiples cuadrados sin tener que volver a recostarse (solo usa una variable de mouse Down)