Как обернуть элемент в макет браузера или устройства.
Всем привет! В этой статье мы рассмотрим 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-'; |
Плагин очень пригодится тем, кто предоставляет какие-то услуги или делится знаниями в какой-нибудь области, например, в программировании.
Итак, надеюсь, вы найдете применение данной библиотеке, а у меня на этом все.
Спасибо за внимание!
-
Создано 26.02.2016 20:20:20
-
Михаил Русаков
Комментарии (7):
Прикольно, может пригодиться для лендингов или еще каких-то страниц. спасибо))
Ответить
Михаил, приветствую вас. У меня вопрос, ваше мнение сыграет ключевую роль. Стоит ли использовать для серьезного проекта (с огромным количеством посещений) Bootstrap? или же сделать на чистом css? смогу и на том, и другом. Но как лучше сделать? p.s я знаю что уйдет больше времени если на чистом css, но это не важно. хочется что бы проект был качественным, без лишнего кода.
Ответить
Чтобы выдерживать большую посещаемость, нужны мощные сервера и грамотная настройка, а какие у Вас будут стили на сайте – неважно. Решайте сами, но, если Вы хотите, чтобы проект был уникальным, то и дизайн нужен, как мне кажется, уникальный. Вы можете, например, взять сетку bootstrap'а, а остальные стили писать сами.
Ответить
Благодарю за ответ. Так и сделаю
Ответить
я с ремонтом не эксперементирую, доверяю вот этим ребятам http://bosch-ukraine.kiev.ua/%D1%80%D0%B5%D0%BC%D0%BE%D0%BD%D1%82-%D0%BF%D0%BB%D0%B0%D0%BD%D1%88%D0%B5%D1%82%D0%BE%D0%B2/делают быстро и качественно
Ответить
Я рад за тебя
Ответить
Неплохо)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.