<MyRusakov.ru />

PHP и MySQL с Нуля до Гуру 2.0

PHP и MySQL с Нуля до Гуру 2.0

Данный курс научит Вас программировать на самом популярном Web-языке в мире - PHP. Курс состоит из 11 разделов, в которых с нуля рассказывается и показывается процесс написания различных скриптов на PHP.

В курсе Вы узнаете всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Почти к каждому уроку идут упражнения.

Просмотрев данный курс, Вы сможете создавать абсолютно любые PHP-сайты любой сложности.

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

Подписавшись по 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

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

Ответить

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