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-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Великие умы обсуждают идеи, средние - обсуждают поступки, а малые - людей Индийская пословица |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.