Multi-Screen - простой JQuery плагин, который делает из веб-страницы коллекцию экранов
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