10 полезных скриптов JavaScript

JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.

В данном уроке мы приводим 10 полезных скриптов, которые помогут вам сохранить время при решении общих задач. Большинство из приведенных скриптов можно просто скопировать в свой проект, но лучше проделать аналитическую работу, чтобы адаптировать код наилучшим образом.

 

1. Максимальная высота или ширина в наборе элементов

Очень полезный скрипт для выравнивания высоты или ширины колонок.

Вариант для высоты:

var getMaxHeight = function ($elms) {
  var maxHeight = 0;
  $elms.each(function () {
    // В некоторых случаях можно использовать outerHeight()
    var height = $(this).height();
    if (height > maxHeight) {
      maxHeight = height;
    }
  });
  return maxHeight;
};

Использование:

$(elements).height( getMaxHeight($(elements)) );

Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно.

Демонстрация использования кода

 

2. Эффективная проверка дат

Инструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами.

function isValidDate(value, userFormat) {
 
  // Используем формат по умолчанию, если ничего не указано
  userFormat = userFormat || 'mm/dd/yyyy';
 
  // Находим разделитель исключая символы месяца, дня и года (в английском варианте - m, d, y)
  var delimiter = /[^mdy]/.exec(userFormat)[0];
 
  // Создаем массив из месяца, дня и года,
  // то есть мы знаем порядок форматаы
  var theFormat = userFormat.split(delimiter);
 
  // Создаем массив из даты пользователя
  var theDate = value.split(delimiter);
 
  function isDate(date, format) {
    var m, d, y, i = 0, len = format.length, f;
    for (i; i < len; i++) {
      f = format[i];
      if (/m/.test(f)) m = date[i];
      if (/d/.test(f)) d = date[i];
      if (/y/.test(f)) y = date[i];
    }
    return (
      m > 0 && m < 13 &&
      y && y.length === 4 &&
      d > 0 &&
      // Проверяем правильность дня месяца
      d <= (new Date(y, m, 0)).getDate()
    );
  }
 
  return isDate(theDate, theFormat);
}

Использование:

Следующая строка вернет false, так как в ноябре 30 дней:

isValidDate('dd-mm-yyyy', '31/11/2012')


Демонстрация использования кода

 

3. Устанавливаем соответствие между шириной экрана и точками излома для адаптивного дизайна

Быстрый способ связать медиа запросы CSS и код JavaScript.

function isBreakPoint(bp) {
  // Tочки излома, которые установлены в коде CSS
  var bps = [320, 480, 768, 1024];
  var w = $(window).width();
  var min, max;
  for (var i = 0, l = bps.length; i < l; i++) {
    if (bps[i] === bp) {
      min = bps[i-1] || 0;
      max = bps[i];
      break;
    }
  }
  return w > min && w <= max;
}

Использование:

if ( isBreakPoint(320) ) { 
  // Ширина экрана меньше точки 320
}
if ( isBreakPoint(480) ) { 
  // Ширина экрана между точками излома 320 и 480
}
…

Демонстрация показывает взаимодействие с медиа запросами CSS. Если нажать на прямоугольник, то будет выведено сообщение о типе устройства с текущей шириной экрана. Медиа запросы изменяют цвет прямоугольника, а скрипт формирует правильное сообщение. Очень простой пример с огромным потенциалом.

Демонстрация использования кода

 

4. Выделение текста

Существует много плагинов jQuery для выделения текста, но можно легко реализовать решение такой задачи без использования библиотек. Скрипт возвращает оригинальный текст, в котором найденные термины помещены в тег, и поэтому их легко стилизовать с помощью CSS.

function highlight(text, words, tag) {
 
  // Устанавливаем тег по умолчанию, если ничего не указано
  tag = tag || 'span';
 
  var i, len = words.length, re;
  for (i = 0; i < len; i++) {
    // Глобальное регульрное выражение для подсвечивания всех терминов
    re = new RegExp(words[i], 'g');
    if (re.test(text)) {
      text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
    }
  }
 
  return text;
}

Также можно отменить выделение текста.

function unhighlight(text, tag) {
  // Устанавливаем тег по умолчанию, если ничего не указано
  tag = tag || 'span';
  var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
  return text.replace(re, '');
}

Использование:

$('p').html( highlight(
    $('p').html(), // Текст
    ['foo', 'bar', 'baz', 'hello world'], // Список терминов для выделения
    'strong' // Пользовательский тег
));

Демонстрация использования кода

 

5. Анимированные текстовые эффекты

Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы було легче использовать):

$.fn.animateText = function(delay, klass) {
  
  var text = this.text();
  var letters = text.split('');
  
  return this.each(function(){
    var $this = $(this);
    $this.html(text.replace(/./g, '<span class="letter">$&</span>'));
    $this.find('span.letter').each(function(i, el){
      setTimeout(function(){ $(el).addClass(klass); }, delay * i);
    });
  });
  
};

Использование:

Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:

$('p').animateText(15, 'foo');

Демонстрация использования кода

 

6. Проявление элементов одного за другим

Плагин jQuery для проявления элементов одного за другим.

$.fn.fadeAll = function (ops) {
  var o = $.extend({
    delay: 500, // задержка между появлением элементов
    speed: 500, // скорость анимации
    ease: 'swing' // функция перехода (другие требуют подключения специального плагина)
  }, ops);
  var $el = this;
  for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) {
    $el.eq(i).delay(d).fadeIn(o.speed, o.ease);
  }
  return $el;
}

Использование:

$(elements).fadeAll({ delay: 300, speed: 300 });

Демонстрация использования кода

 

7. Подсчет нажатий кнопки мыши

Иногда требуется подсчитать, сколько раз пользователь нажал на элемент. Обычно для решения задачи создают счетчик в виде глобальной переменной, но jQuery помогает избавиться от засорения глобального пространства имен с помощью использования data() для хранения значения.

$(element)
    .data('counter', 0) // Сбрасываем счетчик
    .click(function() {
        var counter = $(this).data('counter'); // Получаем значение
        $(this).data('counter', counter + 1); // Устанавливаем значение
        // Выполняем нужные действия
    });

Демонстрация использования кода

 

8. Встраивание видео Youtube из ссылки

Полезный скрипт для встраивания видео Youtube из ссылки с использованием параметров. Код работает почти на всех форматах ссылки Youtube, так как используется специальное регулярное выражение. Также скрипт фиксирует проблему "super z-index", которая проявляется при встраивании видео Youtube.

function embedYoutube(link, ops) {
 
  var o = $.extend({
    width: 480,
    height: 320,
    params: ''
  }, ops);
 
  var id = /\?v\=(\w+)/.exec(link)[1];
 
  return '<iframe style="display: block;"'+
    ' class="youtube-video" type="text/html"'+
    ' width="' + o.width + '" height="' + o.height +
    ' "src="http://www.youtube.com/embed/' + id + '?' + o.params +
    '&amp;wmode=transparent" frameborder="0" />';
}

Использование:

Значения для параметров описаны в документации Youtube API

embedYoutube(
  'https://www.youtube.com/watch?v=JaAWdljhD5o', 
  { params: 'theme=light&fs=0' }
);

Демонстрация использования кода

 

9. Уменьшаем размер текста

Данный скрипт похож на функцию excerpt в WordPress. Он обрезает текст по количеству слов и добавляет специальный элемент для указания сокращения текста. Работает с текстом, в котором имеются другие встроенные теги (например, такие как strong или em или ссылки).

function excerpt(str, nwords) {
  var words = str.split(' ');
  words.splice(nwords, words.length-1);
  return words.join(' ') + 
    (words.length !== str.split(' ').length ? '&hellip;' : '');
}

Демонстрация использования кода

 

10. Создаем динамическое меню

Создаем любое меню динамически. Простой скрипт с большим потенциалом.

function makeMenu(items, tags) {
 
  tags = tags || ['ul', 'li']; // Теги по умолчанию
  var parent = tags[0];
  var child = tags[1];
 
  var item, value = '';
  for (var i = 0, l = items.length; i < l; i++) {
    item = items[i];
    // Разделяем пункты и значения, если они имеются
    if (/:/.test(item)) {
      item = items[i].split(':')[0];
      value = items[i].split(':')[1];
    }
    // Оборачиваем  пункт в тег
    items[i] = '<'+ child +' '+ 
      (value && 'value="'+value+'"') +'>'+ // Добавляем значение, если оно есть
        item +'</'+ child +'>';
  }
 
  return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}

Использование:

// Выпадающий список месяцев
makeMenu(
  ['January:JAN', 'February:FEB', 'March:MAR'], // пункт:значение
  ['select', 'option']
);
 
// Список бакалеи
makeMenu(
  ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
  ['ol', 'li']
);

Демонстрация использования кода

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/-3dKxIvzgKA/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

10 полезных скриптов JavaScript | | 2012-10-09 18:13:05 | | Статьи Web-мастеру | | JavaScript развивается с огромной скоростью. Большая волна новых технологий накрывает камни громоздких задач, которые еще вчера казались неприступными и угрожающими.В данном уроке мы приводим 10 | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: