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 + '&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 ? '…' : ''); }
Демонстрация использования кода
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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
На голодный желудок русский человек ничего делать и думать не хочет, а на сытый - не может Раневская Фаина Георгиевна - (1896-1984) - выдающаяся советская актриса театра и кино |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.