Демо бары обеспечивают удобный доступ к различным версиям шаблонов, позволяя заинтересованным лицам оценить как общий вид, так и отдельные компоненты дизайна. Это особенно полезно при тестировании адаптивности дизайна, когда необходимо проверить отображение на различных устройствах и разрешениях экрана.
Кроме того, демо бары часто включают в себя инструменты для изменения стилей и параметров шаблона в реальном времени, что позволяет потенциальным клиентам или пользователям настроить дизайн под свои специфические нужды до принятия решения о покупке или использовании.
Использование демо баров также способствует повышению эффективности рабочего процесса, поскольку предоставляет возможность быстрого и легкого доступа к разнообразным шаблонам без необходимости установки каждого из них на локальный сервер или компьютер.
Создание демо бара
К сожалению готовых решений я не нашёл. Есть решение в виде плагина для wordpress: Demo Bar- Best Tool To Showcase Website Demos and Product Features With Styles. И то как по мне плагин не удобный, да и сайты я делаю не только на WP, поэтому пришлось сделать свое решение на чистом HTML, CSS и JS.
Верстка
Верстать все с нуля не слал, просто забрал готовую верстку с одного из сайта который продает HTML шаблоны и немного переделал под себя, вот ее html код:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="robots" content="noindex, nofollow">
<link rel="stylesheet" href="assets/css/demo-bar.css">
</head>
<body>
<header id="header">
<div class="logo">
<a href="/" rel="home" title="Перейти на главную"><img alt="..." src="https://web-revenue.ru/wp-content/uploads/2019/06/logo-new.png"></a>
</div>
<div class="preview-devices">
<ul>
<li class="preview-test preview-devices-active" id="preview-test-desktop" title="Предварительный просмотр в ПК версии"><a href=""><svg class="icon icon-preview" fill="currentColor"><use xlink:href="assets/img/icons.svg#preview"/></svg></a></li>
<li class="preview-test" id="preview-test-tablet" title="Предварительный просмотр в версии для Планшетов"><a href=""><svg class="icon icon-tablet" fill="currentColor"><use xlink:href="assets/img/icons.svg#tablet"/></svg></a></li>
<li class="preview-test" id="preview-test-mobile" title="Предварительный просмотр в Мобильной версии"><a href=""><svg class="icon icon-smartphone" fill="currentColor"><use xlink:href="assets/img/icons.svg#smartphone"/></svg></a></li>
</ul>
</div>
<div class="current-template">
<p class="template-home">yr</p>
</div>
<div class="navigate">
<a class="hide-navigate" href="" target="_top" title="Скрыть demo бар"><svg class="icon icon-external-link" fill="currentColor"><use xlink:href="assets/img/icons.svg#external-link"/></svg></a>
<a class="download" href="" title="Скачать demo" download><svg class="icon icon-download" fill="currentColor"><use xlink:href="assets/img/icons.svg#download"/></svg> <span>Скачать</span></a>
</div>
</header>
<div id="preview">
<iframe id="preview-frame" class="preview-desktop" src="" frameborder="0"></iframe>
</div>
<script src="assets/js/demo-bar.js"></script>
</body>
</html>Здесь demo.css имеет следующие стили:
*,::after,::before{box-sizing:border-box}
body,html{height:100%}
body{margin:0;overflow:hidden;position:relative;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"}
#header{position:absolute;left:0;right:0;top:0;height:32px;background:#023b6d;display:flex;align-items:center}
.logo{padding-left:10px}
.logo img{height:25px}
.logo a{display:flex}
.logo strong{margin-left:6px;text-transform:uppercase}
.logo strong span{color:#00a6eb}
@media (max-width:768px) {
.logo{display:none}
}
.preview-devices{margin-top:2px}
.preview-devices ul{margin:0 0 0 20px;padding:0;list-style:none;list-style-type:none;display:flex;align-items:center}
.preview-devices a{transition:.3s;color:rgba(255,255,255,.5);display:inline-block;padding:5px}
.preview-devices a .icon{width:22px;height:22px}
.preview-devices a:hover{color:#fff}
.preview-devices .preview-devices-active a{color:#fff}
@media (max-width:1024px) {
.preview-devices{display:none}
}
.navigate{display:flex;margin-left:auto;align-items:center}
.navigate .icon{width:22px;height:22px}
.navigate a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.navigate a:hover{color:#fff}
.navigate .download{background:#00a6eb;color:#fff;font-size:13px;padding:0 16px;height:32px;font-weight:700;text-transform:uppercase;margin-left:15px;white-space:nowrap}
.navigate .download .icon{width:20px;height:20px}
.navigate .download span{padding-left:6px}
.navigate .download:hover{background:#00b4ff}
@media (max-width:768px) {
.navigate .download{padding:0 10px;font-size:12px;margin-left:10px}
.navigate .download .icon{display:none}
}
.current-template{margin-top:-2px;display:flex;align-items:center;justify-content:center;padding-left:10px}
@media (min-width:768px) {
.current-template{padding-left:0;margin-left:auto}
}
.current-template .icon{width:24px;height:24px}
.current-template a{transition:.3s;color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;text-decoration:none}
.current-template a:hover{color:#fff}
.current-template .template-home{font-size:16px;padding:0;font-weight:700;color:#fff;margin:-2px 10px 0;line-height:0;text-decoration:none}
#preview{position:absolute;left:0;right:0;top:32px;bottom:0;transition:all .2s}
#preview-frame{border:0;position:absolute}
.preview-desktop{left:0;width:100%;height:100%}
.preview-tablet{width:768px;height:100%;left:calc(50% - 384px)}
.preview-mobile{width:380px;height:680px;left:calc(50% - 190px);top:0;margin-top:20px}И demo.js содержит следующий код:
(()=>{function n(t){for(var e=t+"=",s=document.cookie.split(";"),r=0;r<s.length;r++){for(var i=s[r];i.charAt(0)===" ";)i=i.substring(1);if(i.indexOf(e)===0)return i.substring(e.length,i.length)}return""}function o(t,e,s){var r=new Date;r.setTime(r.getTime()+s*24*60*60*1e3);var i="expires="+r.toUTCString();document.cookie=t+"="+e+";"+i+";path=/"}if(!n("sitevisitor")){let t=new Object,e=new Date(Date().toLocaleString("de-DE",{timeZone:"Europe/Sofia"}));t.referer=document.referrer,t.request=location.pathname.substring(1),t.time=e.getFullYear()+"-"+("0"+(e.getMonth()+1)).slice(-2)+"-"+e.getDate()+" "+e.getHours()+":"+e.getMinutes()+":"+("0"+e.getSeconds()).slice(-2),o("sitevisitor",btoa(JSON.stringify(t)),365)}document.addEventListener("DOMContentLoaded",()=>{"use strict";document.querySelectorAll(".preview-test").forEach(e=>{e.addEventListener("click",function(s){s.preventDefault(),document.querySelector(".preview-devices-active").classList.remove("preview-devices-active"),this.classList.add("preview-devices-active"),document.querySelector("#preview-frame").className=this.id.replace("-test","")})})});})();Иконки тут — это svg спрайт со следующим содержимым:
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 24 24" fill="currentColor" id="download" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M13 10h5l-6 6-6-6h5V3h2v7zm-9 9h16v-7h2v8a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-8h2v7z"/>
</symbol>
<symbol viewBox="0 0 24 24" fill="currentColor" id="preview" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 16h16V5H4v11zm9 2v2h4v2H7v-2h4v-2H2.992A.998.998 0 0 1 2 16.993V4.007C2 3.451 2.455 3 2.992 3h18.016c.548 0 .992.449.992 1.007v12.986c0 .556-.455 1.007-.992 1.007H13z"/>
</symbol>
<symbol viewBox="0 0 24 24" fill="currentColor" id="external-link" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8z"/>
</symbol>
<symbol viewBox="0 0 24 24" fill="currentColor" id="tablet" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6 4v16h12V4H6zM5 2h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
<symbol viewBox="0 0 24 24" fill="currentColor" id="smartphone" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7 4v16h10V4H7zM6 2h12a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm6 15a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</symbol>
</svg>Вот так выглядит пустая панелька:
Теперь нужно передать в данную панель данные (с другой страницы), к примеру по клику на кнопку с некоторыми выходными данными.
Передача данных с 1 страницы на другую (теория)
Для передачи данных с одной страницы на другую, можно использовать следующие подходы:
С использованием URL-параметров
В ссылке на другую страницу добавьте параметры в URL, содержащие данные. Например:
<a href="second-page.html?param1=value1¶m2=value2">Перейти на вторую страницу</a>На второй странице вы можете получить значения параметров из URL. Например, с использованием JavaScript:
const urlParams = new URLSearchParams(window.location.search);
const param1Value = urlParams.get('param1');
const param2Value = urlParams.get('param2');С использованием состояния (state)
Если вы используете фреймворк, такой как React или Vue, вы можете передавать данные через состояние. Пример с React:
// На первой странице
import { useHistory } from 'react-router-dom';
function FirstPage() {
const history = useHistory();
const handleClick = () => {
const data = { param1: 'value1', param2: 'value2' };
history.push('/second-page', data);
};
return (
<button onClick={handleClick}>Перейти на вторую страницу</button>
);
}
// На второй странице
import { useLocation } from 'react-router-dom';
function SecondPage() {
const location = useLocation();
const { param1, param2 } = location.state;
// Используйте значения param1 и param2
}С использованием JavaScript и атрибутов data
Добавьте атрибуты data к кнопке:
<button id="myButton" data-param1="value1" data-param2="value2">Кликни меня</button>В JavaScript обработчике клика получите значения атрибутов:
document.getElementById('myButton').addEventListener('click', function() {
const param1 = this.getAttribute('data-param1');
const param2 = this.getAttribute('data-param2');
// Используйте значения param1 и param2
});В моем случае, под мои потребности мне больше подходит использование URL параметров, разберем его подробнее.
Передача данных с одной страницы на другую с использованием URL-параметров
Итак, нам нужно передать как минимум 2 параметра:
- URL страницы для демонстрации, который будет помещаться в фрейм и не только.
- Название шаблона или демонстрации.
Передавать их буду через кнопку, вот ее пример:
<a class="btn btn-warning" target="_blank" href="/demo.html?data-title=example header&data-url=/assets/examples/headers/index.html">Посмотреть демо</a>И у меня получился вот такой JS который забирает данные из URL и вставляет их в demo bar:
// Получаем строку запроса из текущего URL
const queryString = window.location.search;
// Создаем объект URLSearchParams для работы с параметрами
const urlParams = new URLSearchParams(queryString);
// Извлекаем значения параметров
const title = urlParams.get('data-title');
const url = urlParams.get('data-url');
// Применяем полученные значения к элементам страницы
document.title = title; // Заголовок страницы
document.querySelector('.template-home').innerHTML = title; // Заголовок страницы в демо баре
document.querySelector('.hide-navigate').href = url; // Ссылка "на пример без фрейма"
document.querySelector('#preview-frame').src = url; // Адрес в iframe
// Обновляем ссылку для скачивания
const downloadLink = document.querySelector('.download');
downloadLink.href = url;
downloadLink.querySelector('span').textContent = 'Скачать';
// Устанавливаем target="_top" для ссылки "Скрыть demo бар"
document.querySelector('.navigate a').target = '_top';
// Выводим значения в консоль для проверки
console.log(`Title: ${title}`);
console.log(`URL: ${url}`);Этот JavaScript нужно поместить в html демо бара.
Заключение
Демо бары являются неотъемлемой частью процесса веб-разработки, предоставляя эффективный инструмент для демонстрации и тестирования шаблонов и верстки. Они помогают создавать прозрачное и доступное представление продукта, что способствует укреплению доверия и удовлетворенности клиентов.
Вы можете доработать код демо-панели в соответствии с вашими потребностями. ?
