html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

10 полезных JS-сниппетов, которые помогут сэкономить время

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

10 Useful JavaScript Snippets

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

Этот скрипт является очень полезным, чтобы легко сделать равные по высоте столбцы или равные по ширине строки.

var getMaxHeight = function ($elms) {
  var maxHeight = 0;
  $elms.each(function () {
    // In some cases you may want to use outerHeight() instead
    var height = $(this).height();
    if (height > maxHeight) {
      maxHeight = height;
    }
  });
  return maxHeight;
};

Применение: 

$(elements).height( getMaxHeight($(elements)) );
Чтобы получить максимальную ширину, нужно проверить условия и заменить все height на Height или width на Width соответственно.

Демо: Equal height columns

 

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

Наличие библиотеки даты очень часто является достаточно простым и не достаточным для расширенного форматирования. Хотя существует множество библиотек JS, которые упрощают работу с датами, иногда простой код, позволяет проверять введенную дату. В этом случае можно использовать следующий сценарий. Он позволяет проверить любую введенную дату и и четырехзначный год.

function isValidDate(value, userFormat) {

  // Set default format if format is not provided
  userFormat = userFormat || 'mm/dd/yyyy';

  // Find custom delimiter by excluding
  // month, day and year characters
  var delimiter = /[^mdy]/.exec(userFormat)[0];

  // Create an array with month, day and year
  // so we know the format order by index
  var theFormat = userFormat.split(delimiter);

  // Create array from user date
  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 &&
      // Check if it's a valid day of the month
      d <= (new Date(y, m, 0)).getDate()
    );
  }
  return isDate(theDate, theFormat);
}
Применение: 
Введенные данные будут приняты как «ошибка», потому что в ноябре не может быть 31 день.

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

Демо: Validating a date input

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

Этот скрипт является простым вариантом для  установки breakpoints при работе с адаптивным дизайном. Это является быстрым способом объявить CSS медиа-запросы в коде JavaScript.

function isBreakPoint(bp) {
  // The breakpoints that you set in your 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) ) {
  // breakpoint at 320 or less
}
if ( isBreakPoint(480) ) {
  // breakpoint between 320 and 480
}

 

 

 

 

Следующий пример показывает в действии некоторые СSS медиа-запросы. При нажатии на бокс будет выдаваться информация о соответствующей ширине окна. При изменении размера окна CSS медиа-запросы будут изменять цвет боксов и  JS breakpoints  будут убеждаться о предупреждении изменения размеров. Это очень простой пример, но подумайте, какие могут быть возможности для него. 

Демо: Responsive breakpoints with media queries

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

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

unction highlight(text, words, tag) {

  // Default tag if no tag is provided
  tag = tag || 'span';

  var i, len = words.length, re;
  for (i = 0; i < len; i++) {
    // Global regex to highlight all matches
    re = new RegExp(words[i], 'g');
    if (re.test(text)) {
      text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
    }
  }
  return text;
}
Также можно убрать подсветку текста. 
function unhighlight(text, tag) {
  // Default tag if no tag is provided
  tag = tag || 'span';
  var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
  return text.replace(re, '');
}

Применение:

$('p').html( highlight(
    $('p').html(), // the text
    ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight
    'strong' // custom tag
));

ДемоHighlighting text in a paragraph

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

Простой скрипт для анимации свойств текста. Это дает некоторые результаты, которые можно обьединять с CSS переходами. Для удобства использования это фрагмент приводится в качестве плагина 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');

Демо: Typewriter and highlighter effects with CSS3 transitions

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

JQuery плагин, который заставляет по одному исчезать некий набор элементов. 

$.fn.fadeAll = function (ops) {
  var o = $.extend({
    delay: 500, // delay between elements
    speed: 500, // animation speed
    ease: 'swing' // other require easing plugin
  }, 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 });

Демо: Fading images one by one

7. Подсчет кликов

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

$(element)
    .data('counter', 0) // begin counter at zero
    .click(function() {
        var counter = $(this).data('counter'); // get
        $(this).data('counter', counter + 1); // set
        // do something else...
    });

Демо: Counting clicks on a button

8. Вложение Youtube-видео из ссылки

Полезный скрипт для создание встроенных YouTube видео по ссылкам с пользовательскими параметрами. Он работает в основном с любым форматом ссылок 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" />';
}
Использование:
Для дополнительно информации перейдите по ссылке: Embedded Youtube videos from links

 

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

Демо: Embedded Youtube videos from links

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. Создание динамических меню

Создание  динамичных выпадающих меню любого типа, включая  нумерованные списки ordered lists, ненумерованные списки unordered lists и select... Это очень простой скрипт с большим потенциалом.

function makeMenu(items, tags) {

  tags = tags || ['ul', 'li']; // default tags
  var parent = tags[0];
  var child = tags[1];

  var item, value = '';
  for (var i = 0, l = items.length; i < l; i++) {
    item = items[i];
    // Separate item and value if value is present
    if (/:/.test(item)) {
      item = items[i].split(':')[0];
      value = items[i].split(':')[1];
    }
    // Wrap the item in tag
    items[i] = '<'+ child +' '+
      (value && 'value="'+value+'"') +'>'+ // add value if present
        item +'</'+ child +'>';
  }
  return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';

Применение: 

// Dropdown select month
makeMenu(
  ['January:JAN', 'February:FEB', 'March:MAR'], // item:value
  ['select', 'option']
);
// List of groceries
makeMenu(
  ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
  ['ol', 'li']
);

Демонстрация: Creating many types of menus

Заключение 

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

Автор - Cedric Ruiz

Перевод — Дежурка

 

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

268
    +250 surfers

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции