Полезные javascript'ы
UPD: немного обновил все функции. Теперь значения по умолчанию присваиваются более изящно.
Полосатые таблицы (aka Зебра)
Описание
Делает таблицам строки разного цвета. А, фактически, проставляет разные классы чётным и нечётным строкам.
Кодъ
function zebraze(tableClass, oddClass, evenClass){
tableClass = tableClass || 'zebra';
oddClass = oddClass || 'o';
evenClass = evenClass || 'e';
oddClass = ' ' + oddClass;
evenClass = ' ' + evenClass;
var els = document.getElementsByTagName('table');
for(var i = 0; i < els.length; i++)
if( (' '+els[i].className+' ').indexOf(' '+tableClass+' ') >= 0 )
for(var j = 0; j < els[i].rows.length; j++ )
els[i].rows[j].className += (j&1 ? oddClass : evenClass);
}
Здесь:
tableClass — класс таблиц, которые будем располосачивать;
oddClass — класс для нечётных строк;
evenClass — класс для чётных строк.
Как использовать
zebraze();
zebraze('polosochki');
zebraze('polosochki', 'nechet', 'chet');
Нюансы
Надо быть осторожным с тегом tfoot
. В некоторых браузерах из-за него нарушается порядок строк таблицы.
Классы строк не заменяются, а добавляются к существующим.
Массив параметров из URI (a la $_GET)
Описание
Возвращает ассоциативный массив get-параметров из URI.
Кодъ
function getQueryVariable() {
var query = window.location.search.substring(1);
var vars = query.split("&");
var arr = [];
for (var i=0; i < vars.length; i++) {
var pair = vars[i].split("=");
arr[pair[0]] = pair[1];
}
return arr;
}
Как использовать
var q = getQueryVariable()['q'];
UPD
Про то, как работать с многомерными массивами GET-параметров, я написал в заметке jQuery.query.
Разбить число на триады
Описание
Разбивает число на тройки, позволяет выбрать разделитель целой и десятичной части и число десятичных знаков. Полезно, чтобы красиво написать цену.
Кодъ
Number.prototype.triads = function(sep, dot, frac){
sep = sep || String.fromCharCode(160);
dot = dot || ',';
if(typeof frac == 'undefined') frac = 2;
var num = parseInt(this).toString();
var reg = /(-?\d+)(\d{3})/;
while(reg.test(num))
num = num.replace(reg, '$1' + sep + '$2');
if(!frac)
return num;
var a = this.toString();
if(a.indexOf('.') >= 0){
a = a.toString().substr(a.indexOf('.') + 1, frac);
a += Array(frac - a.length + 1).join('0');
}
else
a = Array(frac + 1).join('0');
return num + dot + a;
}
Здесь:
sep — разделитель триад, по-умолчанию неразрывный пробел;
dot — разделитель целой и десятичной части, по-умолчанию запятая;
frac — число десятичных знаков, по-умолчанию 2.
Как использовать
var a = 12345.6789;
var b = a.triads(); // 12 345,67
var c = a.triads(' '); // 12 345,67
var d = a.triads(' ', '.'); // 12 345.67
var e = a.triads(' ', '.', 3); // 12 345.678
Исчезающие подсказки в полях форм
Описание
Делает так, что при клике на инпут из него исчезает подсказка, а если в инпут ничего не написали, то подсказка появляется снова. Чаще всего убирается слово "поиск" из соответствующего поля. Работает с текстовыми инпутами и textarea
. Подсказка хранится в атрибуте инпута title
. Требует jQuery!
Кодъ
function inputNote(){
$('input[type="text"][title], textarea[title]').each(function(){
var that = $(this);
that.data('dflt', that.attr('title')).removeAttr('title').bind({
focus: function(){
var that1 = $(this);
if(that1.val() == that1.data('dflt'))
that1.val('');
},
blur: function(){
var that1 = $(this);
if($.trim(that1.val()) == '')
that1.val(that1.data('dflt'));
}
});
if($.trim(that.val()) == '')
that.val(that.data('dflt'));
});
};
Как использовать
$(inputNote); // обработает все поля при загрузке страницы
UPD
С повсеместным распространением HTML5, использование таких костылей становится неоправданным. Дело в том, что многие современные браузеры поддерживают нативный атрибут placeholder
, который как раз и отвечает за подсказку в поле ввода. Подробнее про этот атрибут и про проблемы, связанные с браузерами, не поддерживающими его, написано тут: http://www.xiper.net/collect/js-plugins/html5-and-css3/jquery-placeholder.html. Плагин, который добавляет поддержку этого атрибута в старые браузеры можно скачать из репозиторя по этой ссылке: https://github.com/danielstocks/jQuery-Placeholder/.
Склонение множественных чисел с числительным
Описание
Позволяет правильно написать множественную форму слова (месяц/месяца/месяцев) в зависимости от числа. А писать 5 месяц(ев) уже давно не модно.
Кодъ
function numberEnd(num, form) {
return form[ (num%100>4 && num%100<20)? 2 : [2, 0, 1, 1, 1, 2][Math.min(num%10, 5)] ];
}
Как использовать
mon + ' ' + numberEnd(mon, ['месяц', 'месяца', 'месяцев'])); // при mon = 1 выведет "1 месяц"
min + ' ' + numberEnd(min, ['минута', 'минуты', 'минут']); // при min = 3 выведет "3 минуты"
sec + ' ' + numberEnd(sec, ['секунда', 'секунды', 'секунд'])); // при sec = 47 выведет "47 секунд"
Переход на страницу POST-запросом
Описание
Иногда нужно перейти на целевую страницу не обычным GET-запросом, а POST'ом, попутно отправив туда некоторые данные. Это может быть нужно, например, чтобы сымитировать отправку формы или если целевая страница просто ожидает от пользователя POST-данных. В jQuery есть способ сделать такой запрос AJAX'ом, а вот чтобы произошел переход, придётся воспользоваться моей функцией.
Кодъ
function postData(data, url){
data = data || {};
url = url || '';
var form = document.createElement('form');
form.setAttribute('action', url);
form.setAttribute('method', 'post');
for(a in data){
var elem = document.createElement('input');
elem.setAttribute('type', 'hidden');
elem.setAttribute('name', a);
elem.setAttribute('value', data[a]);
form.appendChild(elem);
}
document.getElementsByTagName('body')[0].appendChild(form);
form.submit();
}
Как использовать
postData({login: 'lgn', password: 'pwd'}, '/auth/'); // отправить POST'ом данные на страницу /auth/
postData({action: 'buy', id: 11}); // отправить POST'ом данные на текущую страницу
Колонки одинаковой высоты
Описание
Скрипт выравнивает высоту переданных ему элементов. Высота всех элементов становится равной высоте самого высого элемента. Требует jQuery!
Кодъ
$.fn.makeHEqual = function(){
var maxHeight = 0;
this.each(function(){
var curHeight = $(this).height();
if(curHeight > maxHeight)
maxHeight = curHeight;
})
if(maxHeight)
this.height(maxHeight);
return this;
}
Как использовать
$('div.colHead').makeHEqual(); // сделать шапки колонок одинаковой высоты
$('div.colBody').makeHEqual(); // сделать основной контент колонок одинаковой высоты
Нюансы
Если ширина выравниваемых блоков не фиксированная, то имеет смысл повесить данную функцию на ресайз окна.
Размер padding
'ов, margin
'ов и border
'ов не учитывается. Будьте осторожны!
Повторение строки (aka str_repeat)
Описание
Эта функция принимает на вход строку и размножает её нужное количество раз. Аналог PHP'шной функции str_repeat.
Кодъ
function str_repeat(input, multiplier){
return multiplier ? input + new Array(multiplier).join(input) : '';
}
Здесь:
input — исходная строка;
multiplier — количество повторений.
Как использовать
str_repeat('A', 10); // 'AAAAAAAAAA'
str_repeat('A', 1); // 'A'
str_repeat('A', 0); // ''
Однако соглашусь с Александром, нужно расширять ассортимент
...и что может быть полезно другим
...и что не просто стянуто с сети
... :)
<script type="text/javascript">
$(document).ready(function() {
$('tr:odd').addClass('odd');
$('tr:even').addClass('even');
});
</script>
<style type="text/css">
.odd {background-color: green; /* зеленый цвет для нечетных ячеек */ }
.even {background-color: blue; /* синий цвет для четных ячеек */}
</style>