Як обернути елемент в макет браузера або пристрою.

Відео: Як прибрати / видалити банер вірус вимагач андроїд (3 способи) без втрати даних

Всім привіт! У цій статті ми розглянемо jquery плагін для обертання будь-якого елементу в макет браузера або пристрою.

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

Давайте розглянемо, як це налаштовувати.

По-перше, підключіть всі бібліотеки

rel="Stylesheet"type="Text / css"href="Path / to / assets / css / jquery.devicemock.css"gt;

Ваша базова розмітка і jаvascript код повинні виглядати так:

class="Selector"gt; 
 
 
 
$ ( `. Selector`). DeviceMock ({ 
 type: `browser`, // браузер, телефон, планшет, станціонарні комп`ютер або ноутбук 
 size: `1x`, // null (1x), 2x, 3x, 4x, 5x 
 theme: `black`, // черий, білий (якщо телефон або планшет) 
 orientation: `portrait`, // горизонтальна, вертикальна (якщо телефон або планшет) 
 address: `https://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	Тільки коли тип - браузер Приклад: `https://example.com`
imgPath	string	./jquery.devicemock/img/	Шлях до зображень Приклад: `./assets/img/`
cssPrefix	string	df-	Простір імен css Будь ласка, зверніться до scss файлу, якщо хочете внести зміни -gt; $ Prefix: `.df -`-