Multi-Screen - простой JQuery плагин, который делает из веб-страницы коллекцию экранов
![Multi-Screen - простой JQuery плагин, который делает из веб-страницы коллекцию экранов](/uploads/posts/2016-02/1455187368_dc23e7ecc6584e78288436aa5868a356.jpg)
Multi-Screen – это простой в использовании JQuery плагин, который превращает одну страницу в коллекцию экранов с анимированной навигацией. Это достаточно интересное решение, на его основе можно придумать большое количество вариантов шаблонизации сайта, требуется только наличие фантазии. Сделать с его помощью мульти-экранную веб-страницу не сложно. Достаточно просто задать
элементам, в теле веб-страницы, класс ms-container (плагину нужно хотя бы два блока для запуска), эти блоки будут использоваться как экраны. Чтобы определить экран по умолчанию (домашнюю страницу), задайте нужному элементу класс ms-default. Если экран по умолчанию не выбран, то будет использоваться самый верхний блок ms-container, а если задано больше одного ms-default, то использоваться будет находящийся в коде выше.
<head> <title>My Multi-Screen Page</title> <link href="multi-screen-css.css" type="text/css" rel="stylesheet"/> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" src="multi-screen.js"></script> <script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script> </head> <body> <div id="screen1" class="ms-container ms-default"> <!-- screen1 content --> </div> <div id="screen2" class="ms-container"> <!-- screen2 content --> </div> </body>
Чтобы осуществлять навигацию между экранами, используйте уникальный ID атрибут блока (экрана). Просто задайте класс ms-nav-link любому кликабельному элементу, и укажите к какому экрану нужно переместиться, используя атрибут data-ms-target, который равен его ID. Также можно менять анимацию, используя соответствующие атрибуты в коде.
<!-- default animations --> <a class="ms-nav-link" data-ms-target="welcome" href="javascript:void(0)">link</a> <!-- specific animations --> <a class="ms-nav-link" data-ms-target="welcome" data-ms-animation="fadeleft" data-ms-vertical-distance="0" href="javascript:void(0)">link</a> <a class="ms-nav-link" data-ms-target="welcome" data-ms-exit-animation-time="700" data-ms-enter-animation-time="300" href="javascript:void(0)">link</a> <a class="ms-nav-link" data-ms-target="welcome" data-ms-delay="true" href="javascript:void(0)">link</a>
Комментариев 0