Magia HTML Bordes cliente - Parte 4 Introducción Esta es la cuarta y la última parte de mi serie, bordes de clientes Magia HTML. En esta parte de la serie que te doy el código completo del proyecto. También concluimos por tener algunos comentarios útiles. Hacia el final de esta parte, te doy (un enlace a) el código completo del proyecto en formato zip. El Código y su operación que le dará el código, ya que se encuentra en el archivo zip de arriba a abajo. Una vez más voy a ser breve en la explicación ya que usted debe haber visto mucho de eso en bits.
Comenzamos con las variables globales que se utilizan en muchas secciones del código. Estas variables son: Borde var = ""; var paneBack = true; var leftPaneShown = false; var topPaneShown = false; Estas variables están relacionadas con algunos de los requisitos técnicos que vimos en la tercera parte de la serie. Cuando el panel (DIV interior) ha desplazado desde el borde izquierdo en la página, esta variable borde se le da el valor de "izquierda". Cuando el panel se ha desplazado desde la parte superior, abajo en la página, la variable se le da el valor "top".
Cuando el panel se encuentra todavía en el borde o se ha ido de nuevo en el borde, la variable, paneBack se utiliza para indicar así que con el valor de la verdadera. Ahora, al hacer clic en el elemento BODY el panel debe desplazarse de distancia (en el borde). Al hacer clic en el panel, ya que el panel está en frente del elemento de cuerpo, el cuerpo recibe indirectamente un clic. Usted no quiere que el panel para desplazarse hacia atrás cuando el cuerpo no se hace clic directamente. Los siguientes dos variables anteriores se utilizan para esto.
La primera de ellas (leftPaneShown) está en el panel desde el borde izquierdo. El segundo (topPaneShown) es para el panel desde el borde superior. Código de desplazamiento a la derecha e izquierda Aquí hablo de el código responsable de mostrar el DIV exterior y el desplazamiento de la DIV interior hacia la derecha y hacia la izquierda. También hablo sobre el segmento de código que elimina el panel de la página. Las variables utilizadas en esta sección son: var x; TR var; TL var; var processOnL = false; La variable x representa la coordenada x del píxel.
La variable, TR es el ID de regresar de la función setInterval () cuando se cambia el panel de la derecha. La variable, TL es el ID devuelto de la función setInterval () cuando se cambia el panel a la izquierda. En el proceso de cambiar el panel a la derecha oa la izquierda, la dirección no puede ser revertida hasta que el movimiento se ha completado. La variable, processOnL se utiliza para esto. Inicialmente se establece en false; su valor predeterminado es false. El doShiftRight () Función La función doShiftRight () prepara la página para cambiar el panel de la derecha.
Esta es la función: Función doShiftRight () {if ((processOnL == false) && (paneBack == true)) {processOnL = true; paneBack = false; . document.getElementById ('Calc') style.left = "-205px"; . x = document.getElementById ('Calc') style.left; x = parseInt (x); //superior del panel document.getElementById ('Cont') style.top = "25%".; //mostrar el exterior DIV document.getElementById ('Cont') style.display = "bloque".; TR = self.
setInterval ("shiftRight ()", 10); }} Las declaraciones dentro de la función doShiftRight () sólo se ejecutan cuando el panel (elemento DIV interior) no está en movimiento y cuando está en el interior del borde izquierdo (o se ha ido de nuevo en el borde). La prueba de la condición si se encarga de esto. La primera declaración en el bloque si establece la variable, processOnL true, lo que significa que el panel está en movimiento o es comenzar a moverse. La siguiente declaración establece la variable, paneBack false, que significa que el panel ya no está en el borde es.
Recuerda que en el proyecto, el atributo de estilo CSS tiene valores superior e izquierdo para el DIV exterior como 0px. Así que cuando la página web se acaba de abrir, la colocación del DIV exterior es en la página en el área de cliente superior izquierda. Su propiedad display en ese momento es "ninguno", por lo que no se ve, y no ocupa espacio; no tiene ningún efecto sobre los elementos que serían detrás de él. La siguiente declaración en la función da la DIV interior un valor izquierda de -205px. Esto desplaza el DIV interior en el borde mímica. Se cambió desde allí.
Esto es para mantener la coherencia para asegurarse de que el cambio se inicia desde la posición correcta. La siguiente sentencia pone la parte superior del elemento DIV exterior y todo su contenido 25% lejana por el área de cliente. El DIV interior se desplazará horizontalmente dentro del elemento DIV exterior en esa posición. Cualquier posición que le das a la DIV externo, el DIV interior lleva a su vez por el hecho de que se encuentra dentro del DIV exterior. El valor de la propiedad position del DIV interior es "relativo".
Con esto, cambiando los valores de las propiedades izquierdo y superior del DIV interior, lo mueve dentro del DIV exterior. La siguiente declaración muestra el DIV exterior. Siguiendo nuestro código, cuando se muestre el DIV exterior, también se muestra el DIV interior. La última declaración de la función es familiar (de las partes anteriores de la serie). El shiftRight () Función Esta es la función; es familiar. Sólo voy a explicar las declaraciones agregadas. función shiftRight () {document.getElementById ('Calc') style.left = x.
; //detener el desplazamiento derecha si (x>
La construcción de su primera C # Aplicación