Navegación completa de la serie
Parte 1 - Planificación de la aplicación: Idea y diseño básicos
Parte 2 - Planificación de la aplicación: la arquitectura de base de datos y enfoque de desarrollo
Parte 3 - Diseño de la aplicación: Mapa de flujo de trabajo de diseño y Photoshop
Parte 4 - Diseño de la aplicación: HTML y CSS
Parte 5 - El desarrollo de la aplicación: Interacción de usuario
Parte 6 - El desarrollo de la aplicación: La interactividad Agregar AJAX
Parte 7 - Desarrollo de la aplicación: Interacción Lista
Parte 8 - Seguridad y futuro La
Y finalmente .... la aplicación! Listas de color
The Big Thing: Guardar la lista
AJAX permite que enviemos peticiones y obtener respuestas desde el servidor sin actualizar la página. En nuestra aplicación, que la funcionalidad va a ser utilizado principalmente para el ahorro. Vamos a pensar a través de cada una de esas veces que algo necesita ser salvado:
Cuando una lista de nuevos artículos, se añade, debe ser guardado en la lista.
Cuando un elemento de la lista es eliminado, debe suprimirse de la lista.
Cuando uno se cambia de color los elementos, el nuevo color se deben guardar.
Cuando un elemento de la lista se marca como hecho, que el estatuto debe ser salvado.
Cuando la lista se reordena, el nuevo orden debe ser salvado.
Cuando el texto de un elemento de la lista se modifica, el nuevo texto debe ser guardado.
Eso es un montón de salvar pasando. Nuestro desarrollador tiene su trabajo cortado para él, porque cada uno de esos pequeños acontecimientos necesita tener un archivo PHP que está lista para recibir esa petición y tratar con ella. Por suerte, tiene algunas cosas interesantes orientadas a objeto de gong y, ciertamente, ya se puede extender el proceso a tratar esta cuestión.
Interfaz de JavaScript
Junto a todos los que el ahorro de AJAX es todo lo que hace que la interfaz visual hacer lo que está diciendo que hará. Esa ficha arrastre poco lo que se dice que puede arrastrar elementos de la lista de arriba a abajo. Estamos diciendo que sucede después de que vamos a guardar la lista. Pero ¿cómo funciona eso en realidad? No te preocupes, vamos a llegar a ella. Por ahora vamos a pensar en todas las cosas interfaz JavaScript que necesitamos:
Haga clic y arrastre la ficha de arrastre, elementos de la lista se pueden arrastrar alrededor y reordenadas.
Haga clic en la pestaña de color, el color de la lista de artículos se alterna entre algunas opciones predefinidas.
Haga clic en la marca, el elemento de la lista y tacha y se desvanece hacia abajo.
Haga clic en la X, la confirmación se desliza hacia afuera. Haga clic de nuevo, elemento de la lista es llevado de repente.
Haga doble clic en elemento de la lista, el texto se convierte en un texto de entrada para su edición.
Tipo en el cuadro grande de abajo y haga clic en Agregar nuevo elemento de la lista se anexa al final de la lista.
Y de nuevo, vamos a llegar a todo eso. Sólo una configuración poco más que hacer!
Lo primero es lo primero: llamar a la archivos JavaScript
En realidad sólo hay una página en nuestro sitio, la página de la lista principal, que necesita tener Javascript en absoluto. Así que vamos a estar bajando los archivos de comandos a la derecha en el archivo index.php. Usted verá a menudo ligado archivo JavaScript en el encabezado de los sitios. Este no es el momento de una gran discusión al respecto, pero baste decir que no es necesaria, ya que generalmente se la considera una mejora de rendimiento para la lista al final de las páginas en su lugar. Eso es lo que vamos a hacer aquí. En nuestro archivo index.php, después de que hemos de salida de la lista, que llamaremos el código JavaScript que necesitamos.
Carga jQuery (De Google para mejorar la velocidad)
Cargue una medida jQuery UI biblioteca (por las cosas que pueden arrastrarse)
Cargue el plugin jEditable (Por clic para editar)
Carga nuestra secuencia de comandos personalizada
Llame a la función de inicialización (nuestra propia especie pedal de arranque, como de una declaración preparada DOM)
Limpiar el marcado con JavaScript
En nuestro lists.js archivo personalizado, que se creará una serie de funciones diferentes. La primera es la que obtiene la llamada directamente en el archivo index.php después de la salida de las listas han sido:
Lo primero que vamos a hacer allí es limpiar un poco el marcado mediante la inserción de elementos comunes con el lenguaje Java en lugar de tenerlos directamente en el marcado. Recuerda lo que el marcado de la lista parecía cuando lo burló para arriba?
Mucho de eso es redundante en todos los elementos de lista. Lo que queremos es más bien así:
Todos los divs y span ha sido eliminado. El nombre de clase en el elemento de la lista está muy bien, puesto que PHP se escupe hacia fuera para que nosotros cuando se lee la base de datos y productos de la lista.
¿Cómo agregar todo lo que HTML extra? Fácil con jQuery. Objetivo para los elementos de lista y envolver cada una de las entrañas del uso de la wrapInner () y anexar los divs extra con el append () función.
eventos se unen a la nueva funcionalidad de pestañas, de forma inteligente
Enlazar un evento a un elemento HTML es muy fácil en JavaScript. Es como esto:
No hay nada malo en ello, pero estamos en un poco de una situación única con nuestra lista de aplicación aquí. Al enlazar eventos como el que 1) crea un controlador de eventos único para cada elemento de la lista única en la página, cada uno ocupando la memoria del navegador y 2) sólo lo hace una vez, para el estado actual de la DOM. No te preocupes por todo lo que demasiado, el punto es vinculante eventos de esta manera no es lo ideal para nosotros porque estaremos introduciendo nuevos temas lista de forma dinámica.
Cuando un usuario inserta un elemento de la lista nueva, que llega enchufado a la derecha entonces y allí DOM. Esta partida nueva lista no será obligado como los otros son, es decir, todas esas pestañas poco de fantasía no funcionan bien. Boo Hoo. ¿Qué podemos hacer para resolver eso? Bien podemos crear una nueva función que se llamará cuando se carga la página, y cuando los nuevos temas se añaden lista que hace todo el trabajo que el enlace de eventos. Esto definitivamente hará el truco, pero ... jQuery es más inteligente que eso. jQuery proporciona una función llamada en vivo () que elimina completamente este problema.
Enlazar eventos con los vivos () es fantástico para nosotros porque: 1) sólo crea un controlador de eventos que es mucho más eficiente y 2) nuevos artículos anexa a la página se enlaza automáticamente por el mismo controlador. Killer.
Así que por nuestra pestañas muy poca funcionalidad, vamos a estar utilizando de esta manera:
La ficha arrastre no tiene caso, haga clic en, en realidad va a utilizar la funcionalidad de arrastrar jQuery UI que hacer es nada. Vamos a comprobar eso hacia fuera.
Hacer la lista de arrastrar y ordenable
gracias a Mega jQuery UI por hacer un útil conjunto de funciones. El módulo de arrastrarse es exactamente perfecto para hacer una lista como la nuestra pueden ordenar. Nos dirigimos a la "
- " padre, dicen que el "mango" deseamos utilizar (que parte de la lista de artículos que usted puede hacer clic y arrastrar para moverse). También utilizamos un parámetro para forcePlaceholderSize alguna información visual cuando los elementos de lista son arrastrados alrededor (un espacio en blanco aparece en bloque para indicar cuando el punto de la lista sería la "tierra" en caso de vertido)
Marcar artículos como "hecho"
Cuando el usuario hace clic en la ficha marca poco, ya hemos decidido hacer dos cosas. Dibuja una línea a través de la lista de elementos y luego se desvanecen a cabo toda esa lista el tema. Pero luego está la consideración de qué hacer si el tema ya está marcado como realizadas y que se hace clic en la ficha. Bueno, vamos a descruzar a cabo y se desvanecen una copia de seguridad. Así que cuando haga clic en el pase, nos aseguraremos de que para comprobar qué estado nos encontramos en primer lugar.
Color Ciclismo
Será mejor que en este conjunto "de color" parte de las listas de colores ¿eh? CSS se aplica el color real, así que lo vamos a hacer con el lenguaje Java es sólo el ciclismo los nombres de clase aplicados a los elementos de la lista en los clics.
Eso nextColor () no es una función incorporada en la función, será personalizado escrito por nosotros. Es una abstracción aquí para la claridad del código. La forma en que lo hemos utilizado aquí (como parte de la "cadena") es tal que tendremos que hacer un plugin de jQuery poco fuera de él. No hay problema.
Básicamente esta comprobación de qué color elemento de la lista ya está y se mueve al siguiente color. Observe cómo se están alterando un atributo en la lista de temas también. no es un atributo de color válido en XHMTL (que está bien en HTML5), pero bueno. No está en el marcado por lo que en realidad no importa. ¿Por qué estamos usando esto? Vamos, es porque estamos cerca del 50% de los que forma al hacer esto de forma inteligente realmente. Cuando nuestro desarrollador va a guardar la información de color de este elemento de la lista a la base de datos, que necesita algo para salvar. De vuelta en la parte 2 de esta serie, podemos ver que nuestros desarrolladores ya anticipamos esto y creó un campo para listItemColor color llamado, el que hizo una INT (entero). Pensó que sería la forma más inteligente de hacerlo ya que es ligero, fácil, y abstracto. Podemos decidir más tarde lo que es clave, por ejemplo, 1 = azul, 2 = rojo, etc Los propios datos no es necesario para saber que es de color rojo. Así, si tenemos un entero que representa el color correcto en el DOM para él, que lo hace realmente fácil de engancharse a cabo y pasar a lo largo de guardar en la base de datos.
¿Por qué es sólo el 50% inteligente? Bueno, porque es probable que la elegancia, debe hacerse extensivo a los nombres de las clases ellos mismos. Estamos utilizando colorYellow por ejemplo, cuando el color-1 podría tener más sentido, si la línea que decide eliminar de la alineación amarilla y sustituirla. O tal vez incluso permiten a los usuarios declaran sus propios colores.
Eliminar elementos de la lista
Nuestra pequeña "X" ficha es el encargado de permitir a los usuarios eliminar elementos de lista. Queremos tener un poco de seguro adicional contra accidentalmente grasa digitaciones sin embargo. Así que van a requerir dos clics para eliminar algo de verdad. Algunas aplicaciones de recurrir a una desagradable "Seguro" popup cuadro de diálogo modal, vamos a estar un poco más astuto que eso. Al hacer clic en la X, un anuncio poco saldrá a la derecha preguntando sobre seguridad. Si se vuelva a hacer clic a continuación, eliminar dichas.
Debido a que eran inteligentes anterior y nuestra ficha pequeño gráfico es una parte de un sprite gráfico, todo lo que necesitamos hacer es ampliar el ancho de esa ficha para mostrar el mensaje. Después de la primera posición, añadimos un poco de datos (jQuery de datos () de función) al elemento de la lista diciendo que "ir a por ello". Tras un segundo clic, dicha prueba será cierto y sabemos que podemos comenzar la supresión de ese elemento de la lista.
Ya que estamos usando jQuery UI, que arrojó en un estilo poco de diversión extra con el "explotar" la opción para ocultar elementos.
Click-to-editar elementos de lista
A fin de que nuestros elementos de la lista de clic para editar, vamos a estar en los hombros de los demás y usar un plugin de jQuery, jEditable. Todo lo que necesitamos hacer con este plugin es un elemento objetivo y utilizar el editable () la función se activa con algunos parámetros. El gran advertencia, sin embargo, no podemos usar los Live () con este plugin porque no es un evento jQuery estándar.
Volver antes de que tuviéramos en vivo, hicimos lo que habló brevemente antes. Llamamos a una función que no todos nuestros vinculante. De esa manera podríamos llamarlo el DOM listos, así como después de cualquier inserciones AJAX. Vamos a apoyarse en que la técnica de ahora.
Con esos parámetros, estamos dando a los desarrolladores lo que necesita para una ruta de archivo de devolución de llamada. También estamos diciendo que queremos mostrar los elementos para exigir un doble clic para editar, lo que la descripción será, y lo que el texto en el botón de ahorro va a decir. Muy bien personalizables!
¿Recuerdas esos tramos se inserta en todo el texto de elementos de la lista anterior. Ahora estamos aprovechando de eso. Cuando esta función se unen editable, vamos a obligar a éste a los tramos. Así que justo después de DOM listo llamaremos:
Vamos a necesitar esta función de nuevo cuando los elementos de lista añadiendo nuevos ...
Añadiendo nuevos elementos de la lista
Core para la funcionalidad de nuestra aplicación para permitir que la gente lista es para añadir nuevos elementos de lista. Ya tenemos el margen de beneficio en lugar de eso, así que vamos a ver el código JavaScript que los hace funcionar.
NOTA: Manténgase en sintonía para la parte final de la serie donde a repasar algunos de seguridad extra que tiene que ocurrir aquí. Cada vez que aceptan la entrada del usuario, tiene que ser borrado. Esta no es una excepción.
Una última cosa que hicimos lo que había que despejar el campo de entrada después de la presentación. Eso hace que añadir un montón de elementos de lista en secuencia muy fácil y natural. Además, tenga en cuenta que lo llamábamos bindAllTabs funcionar de nuevo después de que el elemento de la lista nueva se adjuntó. Es por eso que resumieron que la función de distancia para empezar, así que podríamos llamarlo cuando los nuevos temas lista se adjuntaron al estilo AJAX. Con ello se asegura el click-to-editar funcionalidad está trabajando en nuevos elementos de la lista anexa incluso antes de actualizar la página. El resto de las pestañas son automáticamente fresco, debido a la viven () vinculante.
"Moving On"
Hasta la próxima lo vamos a pasar de nuevo a los desarrolladores para rellenar esos huecos en cómo esas interacciones lista de trabajo de la aplicacion PHP / Base de datos secundarios. Entonces vamos a terminar hablando un poco de seguridad y de envasado de seguridad de los cabos sueltos.
Autor de las series
Jason Lengstorf es un desarrollador de software con sede en Missoula, MT. Él es el autor de PHP para principiantes absolutos y regular los blogs sobre la programación. Cuando no está pegado a su teclado, que está de pie probable en línea para el café, la cerveza su propia cerveza, o soñando con ser un mythbuster.Chris Coyier es un diseñador que actualmente vive en Chicago, IL. Es co-autor de Excavando en WordPress, Así como blogger y conferencista en todo el diseño de las cosas. Lejos de la computadora, es probable que se encuentre gritar a los entrenadores de fútbol en la tele o recoger un banjo.
0 comentarios:
Post a Comment