Показать Меню
falbar Мини-карта страницы

Делаем мини-карту страницы как в Sublime Text 2

Мини-карта страницы

Сегодня я расскажу про плагин, который позволяет создать на странице сайта мини-карту. Данное решение, возможно, сделает пребывание пользователя у Вас на сайте более комфортным.

Для начала подключаем jQuery библиотеку и плагин:

<link href="minimap.min.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="minimap.min.js" type="text/javascript"></script>

Далее назначаем DOM элемент, для которого будем создавать карту. Сохраняем его в переменную для того, чтобы можно было пользоваться методами плагина.

<script type="text/javascript">
$(function(){
	var minimap = $("body").minimap();
});
</script>

После вызова скрипта Вы увидите, как в правом верхнем углу появится уменьшенный аналог вашей страницы, по которому можно перемещаться.

Плагин обладает богатым набором настроек:

  • heightRatio - отношение высоты к странице [0.0, 1.0). (по умолчанию: 0.6);
  • widthRatio - отношение ширины к странице [0.0, 0.5). (по умолчанию: 0.05);
  • offsetHeightRatio - отношение верхнего отступа к странице (0.0, 0.9]. (по умолчанию: 0.035);
  • offsetWidthRatio - отношение левого отступа к странице (0.0, 0.9]. (по умолчанию: 0.035);
  • position - положение карты на странице: справа (по умолчанию) или слева;
  • touch - коснуться поддержки. (по умолчанию: true);
  • smoothScroll - поддержка прокрутки. (по умолчанию: true);
  • smoothScrollDelay - скорость при прокрутке (по умолчанию: 200 ms).

Для удобства все настройки скрипта кроме touch дублируются методами с префиксом set. В нашем случае их необходимо применять к переменной minimap:

minimap.setHeightRatio(0.6);
minimap.setWidthRatio(0.05);
minimap.setPosition("right");
minimap.setOffsetHeightRatio(0.035);
minimap.setOffsetWidthRatio(0.035);
minimap.setSmoothScroll(true);
minimap.setSmoothScrollDelay(200);

Так же присутствует callback функция onPreviewChange, которая срабатывает в двух случаях: когда изменяется область просмотра и при вызове выше перечисленных методов.

Осталось ещё три функции, которые мы не рассмотрели:

  • show - отобразить карту;
  • hide - спрятать карту;
  • toggle - спрятать, отобразить карту.

Если Вам потребуется задать свои стили мини-карте, то стоит воспользоваться встроенными классами:

  • minimap - область мини-карты;
  • miniregion - область просмотра мини-карты.

Надеюсь, плагин Вам понравился, а у меня на этом всё.

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено