jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-05 19:49:29 +03:00
parent 7b3f4550fd
commit d85be5f17b
12 changed files with 47 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

10
2-ui/2-events/1-introduction-browser-events/01-hide-other/source.view/index.html
View file

@ -7,13 +7,13 @@
<body>
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
<input type="button" id="hider" value="Click to hide the text" />
<div id="text">Текст</div>
<div id="text">Text</div>
<script>
/* ваш код */
/* your code */
</script>
</body>
</html>
</body>
</html>

15
2-ui/2-events/1-introduction-browser-events/06-hide-message/solution.md
View file

@ -1,10 +1,13 @@
1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей.
To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
Then for each pane the code can be like:
```js
pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
```
Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.
С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
2. Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.
Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
```js
pane.firstChild.onclick = () => pane.remove();
```

20
2-ui/2-events/1-introduction-browser-events/07-carousel/solution.view/index.html
View file

@ -11,16 +11,16 @@
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="https://js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"></li>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
</div>
<button class="arrow next">⇨</button>

24
2-ui/2-events/1-introduction-browser-events/07-carousel/source.view/index.html
View file

@ -7,28 +7,28 @@
<body>
<!-- ваша верстка виджета, ваши стили -->
<!-- create your markup and styles -->
<button class="arrow">⇦</button>
<button class="arrow">⇨</button>
<ul>
<li><img src="https://js.cx/carousel/1.png"></li>
<li><img src="https://js.cx/carousel/2.png"></li>
<li><img src="https://js.cx/carousel/3.png"></li>
<li><img src="https://js.cx/carousel/4.png"></li>
<li><img src="https://js.cx/carousel/5.png"></li>
<li><img src="https://js.cx/carousel/6.png"></li>
<li><img src="https://js.cx/carousel/7.png"></li>
<li><img src="https://js.cx/carousel/8.png"></li>
<li><img src="https://js.cx/carousel/9.png"></li>
<li><img src="https://js.cx/carousel/10.png"></li>
<li><img src="https://en.js.cx/carousel/1.png"></li>
<li><img src="https://en.js.cx/carousel/2.png"></li>
<li><img src="https://en.js.cx/carousel/3.png"></li>
<li><img src="https://en.js.cx/carousel/4.png"></li>
<li><img src="https://en.js.cx/carousel/5.png"></li>
<li><img src="https://en.js.cx/carousel/6.png"></li>
<li><img src="https://en.js.cx/carousel/7.png"></li>
<li><img src="https://en.js.cx/carousel/8.png"></li>
<li><img src="https://en.js.cx/carousel/9.png"></li>
<li><img src="https://en.js.cx/carousel/10.png"></li>
</ul>
<script>
// label the images, just for convenience, to visually track them
// label the images to visually track them, just for convenience,
// this code can be removed
let i = 1;
for(let li of carousel.querySelectorAll('li')) {

4
2-ui/2-events/1-introduction-browser-events/article.md
View file

@ -48,7 +48,7 @@ For instance, to assign a `click` handler for an `input`, we can use `onclick`,
On mouse click, the code inside `onclick` runs.
Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Клик!")"`, then it won't work right.
Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right.
An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
@ -340,7 +340,7 @@ Here's an example of getting mouse coordinates from the event object:
<script>
elem.onclick = function(*!*event*/!*) {
// show event type, element and coordinates of the click
alert(event.type + " на " + event.currentTarget);
alert(event.type + " at " + event.currentTarget);
alert(event.clientX + ":" + event.clientY);
};
</script>