Красивые сноски при помощи jQuery

Часто в тексте надо раскрыть определение какого-то термина, дать дополнительную информацию или перевод иностранного слова. В таких случаях лучше всего использовать подстрочные примечания. В этом посте я хочу показать как применить примечания с ссылками-сносками для гипертекста, сэкономив при этом место на странице и сохранив удобство читателя.

Решение будет лаконичным, благодаря jQuery. Рабочий пример можно увидеть в файле Lorem-ipsum.html. Задача примера не поразить читателя спецэффектами или вас трюками js, а показать как применять старые проверенные решения в новых условиях и при новых технических возможностях.

Сценарий

В сценарии ничего сложного нет, полагаю с комментариями логика его работы будет ясна даже новичкам.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(function(){
	$('a.note').bind('click', function(){
		// определяем идентификатор требуемой сноски. он совпадает с якорем - атрибутом href ссылки
		var id = $(this).attr('href'); 
		if($(id).css('display') == 'none'){ // если сноску ещё не смотрели, значит она невидима
		// это условие нужно что бы следующие манипуляции не повторялись
			// получаем индекс (порядковый номер) данного элемента. 
			// т.к. нумерация в ЯП начинается с 0 - добавляем единицу и точку. 
			var num = $('.notes li').index($(id))+1;
			$(id).prepend(num+'. ');
			// добавляем якорь для использованной ссылки
			$(this).attr({'id': 'link-'+num});
			// рисуем обратную ссылку, чтобы вернуться к месту на котором остановились. 
			$(id).append('<a href="#link-'+num+'" class="backlink" title="Вернуться к тексту">&#9650;</a>');
		}
		// показываем сноску
		$(id).show('slow');
		return true;
	});
});

5 строк css

Вот весь css-код:

1
2
3
4
5
body {width: 50%; text-align: justify; margin: 0 auto; font-size: 12pt;}
a.note{vertical-align: super; font-size: 10pt;}
ol.notes {border-top: 1pt solid gray; font-size: 10pt; list-style: none; padding-bottom: 1em;}
ol.notes li {display: none;}
a.backlink {text-decoration: none; color: green;}

Разберём его построчно.

  1. Для страницы я определил половину ширины окна, и выровнял по центру. Удобнее читать не слишком длинные строки, к тому же “высокая” страницы будет нагляднее для нашего примера. Кегль основного текста: 12 пунктов.
  2. Стиль для ссылки на примечание: знак сноски (в нашем случае это цифра) должна быть набрана на верхней линии шрифта, используем для этого css, хотя можно было бы и применить тэг . Кегль на 2 пункт ниже основного текста.
  3. Хоть мы используем для примечаний нумерованный список, через стили уберём маркеры, т.к. невидимые элементы (с display: none) не существуют в выходном потоке, и соответственно не нумеруются. Иначе мы бы получили первый номер любым примечанием, которое открыли первым. Нумерацию мы вернём при помощи javascript. Нижнее поле добавлено, т.к. у Opera оказался маленько сбит прицел)) Если после блока примечаний находиться ещё что-то занимающее высоту на странице, то это поле не нужно.
  4. Прячем при помощи display: none примечания
  5. Оформим симпатично обратные ссылки-треугольники: зелёным цветом, убрав подчёркивание.

Конечно в данный код можно добавить разного рода вкусностей: интересную анимацию, подсветку активных примечаний и теста вокруг обратной ссылки, плавную прокрутку… Но я ставил задачу написать лёгкий пример для самых начинающих, чтобы показать саму идею эргономичного оформления страницы.

Эта запись была опубликована в рубрике Основное и отмечена метками , , , , , . Добавить в закладки ссылку.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>