Skip to content

Commit 2d9297b

Browse files
authored
Merge pull request #431 from kenliten/kenliten
Form properties and methods
2 parents 5944323 + 7ed125f commit 2d9297b

File tree

7 files changed

+116
-116
lines changed

7 files changed

+116
-116
lines changed
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
As we can see from HTML/CSS, the slider is a `<div>` with a colored background, that contains a runner -- another `<div>` with `position:relative`.
1+
Como podemos ver en el HTML/CSS, la barra de desplazamiento es un `<div>` con un fondo de color, que contiene un pasador: otro `<div>` con `position:relative`.
22

3-
To position the runner we use `position:relative`, to provide the coordinates relative to its parent, here it's more convenient here than `position:absolute`.
3+
Para posicionar el pasador usamos `position:relative`, para proveer las coordenadas relativas a su padre, aquí es más conveniente que `position:absolute`.
44

5-
Then we implement horizontal-only Drag'n'Drop with limitation by width.
5+
En este caso implementamos un Arrastrar y Soltar horizontal limitado por el ancho.

2-ui/3-event-details/4-mouse-drag-and-drop/1-slider/task.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ importance: 5
22

33
---
44

5-
# Slider
5+
# Control deslizante
66

7-
Create a slider:
7+
Crea un control deslizante:
88

99
[iframe src="solution" height=60 border=1]
1010

11-
Drag the blue thumb with the mouse and move it.
11+
Arrastra el pasador azul con el ratón y muévelo.
1212

13-
Important details:
13+
Detalles importantes:
1414

15-
- When the mouse button is pressed, during the dragging the mouse may go over or below the slider. The slider will still work (convenient for the user).
16-
- If the mouse moves very fast to the left or to the right, the thumb should stop exactly at the edge.
15+
- Cuando el botón del ratón es presionado, durante el arrastrado del ratón puedes ir por arriba o debajo de la barra deslizante. Ésta seguirá funcionando (es lo conveniente para el usuario).
16+
- Si el ratón se mueve muy rápido hacia la izquierda o la derecha, el pasador se detiene exactamente en el borde.
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
To drag the element we can use `position:fixed`, it makes coordinates easier to manage. At the end we should switch it back to `position:absolute` to lay the element into the document.
1+
Para arrastrar el elemento podemos usar `position:fixed`, esto hace las coordenadas más fáciles de manejar. Al final deberíamos devolverla a `position:absolute` para fijar el elemento en el documento.
22

3-
When coordinates are at window top/bottom, we use `window.scrollTo` to scroll it.
3+
Cuando las coordinadas están en el tope/fondo de la ventana, usamos `window.scrollTo` para desplazarla.
44

5-
More details in the code, in comments.
5+
Más detalles en el código, en los comentarios.

2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@ importance: 5
22

33
---
44

5-
# Drag superheroes around the field
5+
# Arrastrar super héroes por el campo
66

7-
This task can help you to check understanding of several aspects of Drag'n'Drop and DOM.
7+
Esta tarea te puede ayudar a comprobar tu entendimiento de varios aspectos de Arrastrar y Soltar, y del DOM.
88

9-
Make all elements with class `draggable` -- draggable. Like a ball in the chapter.
9+
Hacer que todos los elementos con clase `draggable` sean arrastrables. Como la pelota de este capítulo.
1010

11-
Requirements:
11+
Requerimientos:
1212

13-
- Use event delegation to track drag start: a single event handler on `document` for `mousedown`.
14-
- If elements are dragged to top/bottom window edges -- the page scrolls up/down to allow further dragging.
15-
- There is no horizontal scroll (this makes the task a bit simpler, adding it is easy).
16-
- Draggable elements or their parts should never leave the window, even after swift mouse moves.
13+
- Usa delegación de eventos para detectar el inicio del arrastrado: un solo manejador de eventos en el `document` para `mousedown`.
14+
- Si los elementos son arrastrados a los bordes superior/inferior de la ventana: la página se desliza hacia arriba/abajo para permitir dicho arrastre.
15+
- Sin desplazamiento horizontal (esto hace la tarea un poco más simple, añadirlo es fácil).
16+
- Los elementos arrastrables o sus partes nunca deben dejar la ventana, incluso después de movimientos rápidos del ratón.
1717

18-
The demo is too big to fit it here, so here's the link.
18+
La demostración es demasiado grande para caber aquí, así que aquí está el enlace.
1919

2020
[demo src="solution"]

2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The solution, step by step:
1+
La solución, paso a paso:
22

33
```html run
44
<select id="genres">

2-ui/4-forms-controls/1-form-elements/1-add-select-option/task.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ importance: 5
22

33
---
44

5-
# Add an option to select
5+
# Añade una opción al select
66

7-
There's a `<select>`:
7+
Tenemos un `<select>`:
88

99
```html
1010
<select id="genres">
@@ -13,10 +13,10 @@ There's a `<select>`:
1313
</select>
1414
```
1515

16-
Use JavaScript to:
16+
Utiliza JavaScript para:
1717

18-
1. Show the value and the text of the selected option.
19-
2. Add an option: `<option value="classic">Classic</option>`.
20-
3. Make it selected.
18+
1. Mosrar el valor y el texto del option seleccionado.
19+
2. Añadir un option: `<option value="classic">Classic</option>`.
20+
3. Seleccionarlo.
2121

22-
Note, if you've done everything right, your alert should show `blues`.
22+
Nota, si haz hecho todo bien, tu alert debería mostrar `blues`.

0 commit comments

Comments
 (0)