Skip to content

Instantly share code, notes, and snippets.

@Dosant
Dosant / short.js
Created March 12, 2017 07:24
Handle Pagination
var pagination = (function () {
var TOTAL; // всего статей
var PER_PAGE = 3; // статей на 1-ой странице
var CURRENT_PAGE = 1; // текущая страница
var SHOW_MORE_BUTTON;
var SHOW_MORE_CALLBACK; // функция, которую вызывать, когда произошел клик по кнопке
/*
Total: Всего статей в ArticleModel. (Надо будет еще учесть, что total меняется при применении фильтров)
showMoreCb: функция, которую надо вызвать при клике на кнопку "Показать Еще"
<table>
<tr>
<td>
<label for="agree">Согласен с правилами</label>
</td>
<td>
<input id="agree" type="checkbox">
</td>
</tr>
<tr>
<label>Кликни меня <input type="checkbox"></label>
@Dosant
Dosant / index.js
Created March 12, 2017 10:10
Handle Click
/* Получили кнопки как HTML-Element*/
var button = document.getElementById('my-button');
/* Функция, которую назначим обработчиком */
function handleClick() {
console.log('Хендлю клик');
}
/* Прикрепляем обработчика на событие 'click' */
button.addEventListener('click', handleClick);
<input id="my-input" type="text" value="Text">
<button id="clear-button">Clear</button>
<p id="my-p">Text</p>
<form>FORM
<div>DIV
<p>P</p>
</div>
</form>
function handleEvent(event) {
alert(event.currentTarget);
event.stopPropagation(); /* Прекратить всплытие */
}
var form = document.querySelector('form');
var div = document.querySelector('div');
var p = document.querySelector('p');
form.addEventListener('click', handleEvent);
<div class="article-list">
<article>Статья №1 <button>x</button></article>
<article>Статья №2 <button>x</button></article>
<article>Статья №3 <button>x</button></article>
<article>Статья №4 <button>x</button></article>
<article>Статья №5 <button>x</button></article>
</div>
/* Пример c делегированием */
var articleListNode = document.querySelector('.article-list');
articleListNode.addEventListener('click', handleDeleteBtnClick);
function handleDeleteBtnClick(event) {
/*
event.target это что угодно внутри .article-list,
надо проверить, что event.target это именно наша кнопка
*/
if (event.target.tagName !== 'BUTTON') {
@Dosant
Dosant / index.html
Created March 12, 2017 10:20
Input и checkbox
<input id="my-input" type="text" value="Text">
<button id="clear-button">Clear</button>
<p id="my-p">Text</p>
<input id="my-checkbox" type="checkbox">
<p id="checkbox-text"></p>