Всем привет! В этом материале рассмотрим jquery плагин для оборачивания любого элемента в макет браузера или устройства .
Всем привет! В этом материале рассмотрим 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-'; |
Плагин очень пригодится тем, кто предоставляет какие-то услуги или делится знаниями в какой-нибудь области, например, в программировании.
Итак, надеюсь, вы найдете применение данной библиотеке, а у меня на этом все.
Спасибо за внимание!
