<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Как обернуть элемент в макет браузера или устройства.

Как обернуть элемент в макет браузера или устройства.

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

Плагин называется DeviceMock.js, посмотреть демо вы можете на главной странице. Суть плагина заключается в том, что вы можете обернуть любой элемент в макет браузера или устройства.

Давайте рассмотрим, как это настраивать.

Во-первых, подключите все библиотеки

<link rel="stylesheet" type="text/css" href="path/to/assets/css/jquery.devicemock.css">
<script src="jquery.js"></script> <!-- v1.5.0〜 -->
<script src="path/to/assets/jquery.devicemock.js"></script>

Ваша базовая разметка и javascript код должны выглядеть так:

<div class="selector">
  <!-- какое-то содержание(блоки, картинки, фреймы...) -->
</div>

$('.selector').deviceMock({
  type : 'browser', // браузер, телефон, планшет, станционарный компьютер или ноутбук
  size : '1x', // null(1x) , 2x , 3x , 4x , 5x
  theme : 'black' , // черый , белый (если телефон или планшет)
  orientation : 'portrait' , // горизонтальная , вертикальная (если телефон или планшет)
  address : 'http://example123.com' // показывать в адресной строке
});

Вы можете изменять путь к изображениям и css префиксы. Значения по умолчанию следующие:

$('.selector').deviceMock({
  //・・・・
  imgPath : './jquery.devicemock/img/', // путь к директории изображений
  cssPrefix : 'df-' // пространство имен css
});

Доступные опции:

Параметр Тип Значение по умолчанию Описание
type string browser Может принимать значения:
browser, phone, tablet, desktop, or laptop
size string 3x Может принимать значения:
1x, 2x, 3x, 〜 9x
theme string black Только когда тип – телефон или браузер

Может принимать значения:
black или white
orientation string portrait Только когда тип – телефон или браузер

Может принимать значения:
black или white
address string none Только когда тип – браузер

Пример: 'http://example.com'
imgPath string ./jquery.devicemock/img/ Путь к изображениям

Пример: './assets/img/'
cssPrefix string df- Пространство имен css

Пожалуйста, обратитесь к scss файлу, если хотите внести изменения
-> $prefix: '.df-';

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

Итак, надеюсь, вы найдете применение данной библиотеке, а у меня на этом все.

Спасибо за внимание!

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

(Алекс) (Алекс) 28.02.2016 20:15:17

Прикольно, может пригодиться для лендингов или еще каких-то страниц. спасибо))

Ответить

HTMLord HTMLord 02.03.2016 20:30:17

Михаил, приветствую вас. У меня вопрос, ваше мнение сыграет ключевую роль. Стоит ли использовать для серьезного проекта (с огромным количеством посещений) Bootstrap? или же сделать на чистом css? смогу и на том, и другом. Но как лучше сделать? p.s я знаю что уйдет больше времени если на чистом css, но это не важно. хочется что бы проект был качественным, без лишнего кода.

Ответить

php_programmer php_programmer 02.03.2016 22:36:19

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

Ответить

HTMLord HTMLord 03.03.2016 03:19:46

Благодарю за ответ. Так и сделаю

Ответить

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