Полезные javascript'ы

29.11.2009
@LEXXX_NF

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);   //  ''
#1
Александр
25.04.2010 09:24
Маловато скриптов, ищи/пиши новые ))
#2
Денис
20.06.2011 10:59
Спасибо, полезно)

Однако соглашусь с Александром, нужно расширять ассортимент
#3
@LEXXX_NF
20.06.2011 16:59
Я cюда выкладываю то, чем сам пользуюсь
...и что может быть полезно другим
...и что не просто стянуто с сети
... :)
#4
Евгений
28.02.2012 11:57
Зебра JQuery + CSS:
<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>
#5
@LEXXX_NF
28.02.2012 12:09
Надо еще версию без JavaScript'а написать, на голом CSS3: tr:nth-child(2n+1) и tr:nth-child(2n). Будет вообще круто! :)

Писáть здесь

А еще у меня есть: