<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как добавлять метки к фотографиям.

Как добавлять метки к фотографиям.

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

Для этой задачи нам понадобится библиотека TAGGD

Скачайте ее и подключите нужные файлы

<script src="js/jquery.js"></script>
<script src="js/jquery.taggd.js"></script>
<link href="css/taggd.css">

Произведите конфигурацию и запустите скрипт

var options = {

  // Выравнивание текста в всплывающих окнах
  align: {
   x: 'center', // слева, по центру или справа
   y: 'center' // сверху, по центру или снизу
  },


  // Относительный сдвиг окон в пикселях
  offset: {
   left: 0, // горизонтальный сдвиг
   top: 12 // вертикальный сдвиг
  },


  // Обработчики событий тэгов
  handlers: {

   // любое событие в чистом javascript является рабочим
   click: function(e) {
    alert('You clicked a button');

    this; // DOM узел
    e; // событие
   },


   // к примеру, вы можете использовать строки, чтобы
   // показать, спрятать и переключать окна
   mouseenter: 'show',
   mouseleave: 'hide'
  }

};

// магия происходит здесь
$('.taggd').taggd( options, data );

Данные(data) - это теги. Taggd поддерживает разные форматы, обратите на это особое внимание

var data = [
  // x и y могут быть десятичными(0 - 1)
  {
   x: 0.512,
   y: 0.33,

   // (Необязательно) Установите текст для окна
   // Если текста нет, окно не будет показываться
   text: 'Huey',

   // (Необязательно) Установите атрибуты элементов
   attributes: {
    id: 'my-id',
    class: 'my-class'
   }
  },

  // x и y могут быть также в пикселях
  // Не переживайте, они будут прекрасно масштабироваться
  {
   x: 1052,
   y: 356,
   text: 'Duwey'
  }
];

Вот и все! Примеры и работу с API вы можете посмотреть на официальном сайте. Спасибо за внимание!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

benom benom 31.07.2015 20:40:38

Спасибо вам Огромное

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.