FootNotes.JS

FootNotes.JS - это скрипт, разработанный специально для авторов, которые хотят в своих статьях сделать что то вроде сносок, как это делается в книгах в конце страницы. По тексту здесь будут разбросаны такие "[1]" ссылки, это и есть FootNotes^[1] 1 Привет, я FootNotes.JS!x. Покликайте, чтобы посмотреть как он работает.

Преимущества FootNotes.JS

Скрипт написан полностью на чистом JavaScript^[2]2 Это ведь круто, да? Я всегда стремился к улучшению производительности.x, без использования jQuery и прочих библиотек.
Размер скрипта всего 4kb. Вес может быть уменьшен, если в стандартных 10 сносках на страницу нет необходимости^[3]3 По дефолту скрипт поддерживает 10 сносок на 1 станице, но если нужно, это количество легко увеличить, пишите мне на мыло если не справитесь сами!x и вы можете обойтись меньшим количеством.
Простота использования^[4]4 Справился бы даже ваш кот ;)x. Достаточно вставить HTML разметку в нужное место, и прописать текст сноски.
Стиль сноски адаптивен и не будет уезжать за пределы экрана на экранах мобильных устройств.
Автоматизация^[5]5 99%. Кое что всё таки сделать придется.x. Скрипт сам проставит номера сносок, в зависимости от порядка на странице. Помимо этого он сам составит список всех сносок в конце страницы.
Может быть использован для создания обычных тултипов или всплывающих окон.

Установка

Подключить CSS стиль footNotes.css в шапке сайта.
Подключить скрипт footNotes.js как обычно, перед закрывающим тегом </body>
Рекомендуется, но не обязательно, также подключить библиотеку fontawesome (для отображения стрелочки на кнопке "Сноски" в списке).

Ссылки кликабельны.

Использование

Когда все установлено, в том месте, где необходимо установить сноску вставляем этот код:

  <span class="tooltip-link"><sup></sup></span>
  <span class="tooltip-hide toolTip increment"><b></b> <a href="">ТЕКСТ</a>
  <span class="closeTooltip">x</span></span>

Дальше всё что нужно, это заменить слово "ТЕКСТ" на текст вашей сноски.

Если вы хотите в конце вашей статьи выводить список всех сносок, добавьте туда этот код:

    <div align="right" style="margin-bottom: 25px;">
      <span class="spoiler-name"><i style="color: white;font-size: 16px;" id="spoiler-arrow" class='fa fa-chevron-down'></i> Сноски</span>
    </div>
    <ol id="spoiler" class="spoilerHidden">
      <li id="note1"></li>
      <li id="note2"></li>
      <li id="note3"></li>
      <li id="note4"></li>
      <li id="note5"></li>
      <li id="note6"></li>
      <li id="note7"></li>
      <li id="note8"></li>
      <li id="note9"></li>
      <li id="note10"></li>
    </ol>

Заполнять ничего не нужно, скрипт сам всё сделает.

Сноски