Маленькая (3.2KB gcc+gzip) библиотека, созданная для применения в простых проектах. Там где применение полноценного фреймворка может оказаться слишком избыточным решением. С помощью библиотеки можно удобно работать с событиями, cookies, создавать анимационные эффекты и Drag & Drop интерфейсы.
Документация (устарела, актуальная внутри несжатой версии)
extend(obj, props)
Копирует свойства из props в obj. Возвращает obj.
var obj = {a: 1, b: 5};
_.extend(obj, {b: 10, c: 20});// {a: 1, b: 10, c: 20}
removeFromArray(arr, item)
Удаляет все вхождения item в arr. Возвращает arr.
var arr = ['Dog', 'Cat', 'Cow', 'Dog'];
_.removeFromArray(arr, 'Dog');// ['Cat', 'Cow']
arrayFromList(list)
Преобразует HTMLCollection, NodeList или arguments в нормальный массив.
_.arrayFromList(document.getElementsByTagName('*')).forEach(function(el) { /* ..... */ });
escapeRegExp(str)
Экранирует спецсимволы регулярного выражения.
_.escapeRegExp('{809050d2-9c07-c960-4c97-aaff5273e9e5}');// '\{809050d2\-9c07\-c960\-4c97\-aaff5273e9e5\}'
parseColor(strColor)
Преобразует строковое представление цвета в объект с ключами r, g, b. Понимает следующие форматы: #fff, #ffffff, fff, ffffff, rgb(255,255,255) и 16 именованных цветов.
_.parseColor('#ffff00');// {r: 255, g: 255, b: 0}
fixDomEvent(evt)
Восстанавливает свойства target, pageX, pageY, preventDefault и stopPropagation на объекте события evt. Возвращает evt.
document.onclick = function(evt) {
alert(
_.fixDomEvent(evt || event).target.tagName
);
};
observeDomEvent(el, type, handler)
Добавляет обработчик события к элементу. Подробнее здесь: http://javascript.ru/tutorial/events/crossbrowser.
_.observeDomEvent(document, 'click', function(evt) {
alert(
evt.target.tagName
);
});
stopDomEventObserving(el, type, handler)
Удаляет обработчик события.
getCssProp(el, prop)
Вычисляет действующее значение css-свойства у элемента.
<style type="text/css">
#div1 { width: 200px; }
</style>
<div id="div1"></div>
<script type="text/javascript">
_.getCssProp(document.getElementById('div1'), 'width');// '200px'
</script>
getPosition(el)
Вычисляет положение элемента относительно документа.
_.getPosition(document.getElementById('div1'));// {x: 50, y: 1009}
Animation(from, to, set[, options])
Создает экземпляр анимации.
var anim = new _.Animation(50, 100, function(value) { console.log(value); }, {speed: 10});
anim.start();
// 60
// 70
// 80
// 90
// 100
Методы: start - запускает анимацию, pause - останавливает, cancel - останавливает и возвращает в исходное состояние.
В options указываются: скорость анимации - speed, обработчик завершения анимации - oncomplete, уравнение перехода - transition. Можно указать скорость в процентах (скорость будет зависеть от разницы между from и to), для этого в качестве значения скорости используется строка представляющая число с добавленным в конце символом '%'. Если нужно определить только скорость можно указывать ее значение на месте options:
new _.Animation(50, 100, function(value) { console.log(value); }, '10%').start();
// 55
// 60
// 65
// 70
// 75
// 80
// 85
// 90
// 95
// 100
animate(el[, props[, options]])
Обертка над Animation. Запускает анимацию указанного набора (css-)свойств (props) элемента el. Возвращает el. В качестве значений в props указываются конечные значения анимации. Начальные значения вычисляются с помощью getCssProp. Значения цвета парсятся с помощью parseColor. Опции (options) определяются как для Animation, при этом oncomplete срабатывает только один раз после завершения анимации всех свойств.
<div id="div1" style="width: 100px; height: 100px; background: #f99; position: absolute; left: 100px; top: 100px;"></div>
<script type="text/javascript">
_.animate(document.getElementById('div1'), {left: 500, height: 400, backgroundColor: '#66f'}, '2%');
</script>
Можно переопределять способ получения и установки свойства. Например, при попытке анимировать скролл элемента указав в props объект {scrollTop: 500} функция попытается изменять el.style.scrollTop вместо атрибута el.scrollTop. Что бы "объяснить" функции как правильно анимировать это свойство, нужно определить функции _.getScrollTop и _.setScrollTop (первая буква свойства в верхнем регистре и добавляем 'get' и 'set') (используются только если определены обе функции):
<div id="div1" style="width: 100px; height: 100px; background: #f99; overflow: auto;">
text<br />text<br />text<br />text<br />
text<br />text<br />text<br />text<br />
text<br />text<br />text<br />text<br />
text<br />text<br />text<br />text<br />
</div>
<script type="text/javascript">
_.getScrollTop = function(el) {
return el.scrollTop;
};
_.setScrollTop = function(el, value) {
el.scrollTop = value;
};
var el = document.getElementById('div1');
_.animate(el, {scrollTop: el.scrollHeight}, '1%');
</script>
Таким же способом можно "объяснить" функции как анимировать прозрачность устанавливая style.filter вместо style.opacity в старых IE.
Если animate вызывается во время выполнения анимации, последняя прерывается, начинается новая.
Остановленную с помощью stopAnimation анимацию можно возобновить вызвав animate с указанием только первого аргумента.
stopAnimation(el)
Останавливает анимацию свойств элемента el. Возвращает el.
_.stopAnimation(document.getElementById('div1'));
Drag(el[, options])
Создает экземпляр контролирующий перетаскивание элемента мышью.
var drag = new Drag(document.getElementById('div1'));
Методы: destroy - отменяет перемещаемость элемента.
В options указываются: элемент при захвате которого начнется перетаскивание - startsFrom (если не определен, то им станет сам перемещаемый элемент - el), имена свойств изменяемых при перемещении - propX и propY (по умолчанию - 'left' и 'top', если определен как false, никаких изменений производиться не будет), обработчики событий - onstart, ondrag и onend.
В ondrag можно контролировать устанавливаемое значение, например, ограничить область перемещения:
_.limit = function(num, min, max) {
return Math.min(max, Math.max(min, num));
};
new _.Drag(document.getElementById('div1'), {
ondrag: function(evt) {
this.valueX = _.limit(this.valueX, 100, 500);
this.valueY = _.limit(this.valueY, 100, 500);
}
});
getCookie(name)
Получает значение печеньки.
_.setCookie('cookie', 'test');
_.getCookie('cookie');// 'test'
setCookie(name, value[, attrs])
Устанавливает значение печеньки.
Если value равен null/undefined, будет установлена пустая строка. Если при этом не указан attrs.expires, он будет установлен в new Date(0). То есть полностью удалить печеньку можно так:
_.setCookie('cookie', null);