Как сделать дополнительные закладки на сайте html

Закладки с использованием только CSS

Идея построения закладок на одном CSS витает в среде веб дизайна уже достаточно давно. Однако среди множества реализаций очень немногие соответствуют тому функционалу, который ожидается от закладок. Обычно, пользователь надеется, что нажав на закладку, он увидит новое содержание без перезагрузки страницы.

С 2008 года проводились различные попытки реализовать функционал закладок на чистом CSS без привлечения JavaScript. В основе одного направления лежит использование псевдо-класса :target. Другое направление базируется на псевдо-классе : cheсked для радио кнопок и смежных комбинаторах.

Второе направление показывало гораздо лучший результат, за исключением работы с браузерами семейства WebKit, которые не давали работать вместе селекторам псевдо-класса и смежным комбинаторам. Но в Safari 5.1 и Chrome 13 ошибка наконец-то устранена!

И теперь можно реализовать закладки с использованием псевдо-класса :checked , что, вероятно, станет основным методом для решения данной задачи на несколько лет.

Контейнер для всей группы. Каждый элемент div закладки содержит радио кнопку (для формирования функционала), метку (для названия закладки) и содержание закладки:

1. Скрывает радио кнопку (ее не нужно показывать, нам она требуется только для состояния отмеченная/неотмеченная).
2. Делаем закладки плавающими блоками, чтобы метки выстроились в одну строку.
3. Абсолютно позиционируем области содержания одну поверх другой.
4. Когда радио кнопка имеет состояние :checked , переставляем соответствующую область содержания наверх с помощью свойства z-index (визуально она будет появляться, скрывая другие области содержания).

Очень маленький код CSS, который легко масштабируется на любое количество закладок (нужно лишь добавить элементы div с классом tab в код HTML).

JavaScript

В чем польза от данного метода?

• Доступность. Радио кнопки скрываются с помощью свойства display: none , поэтому программы для чтения с экрана не будут видеть их и сбиваться. А содержание не использует свойства display: none; и остается доступным.
• Работает в Safari 5.1+, Chrome 13+, Firefox 3.6+, Opera 10+, и IE 9+.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/13758-functional-css-tabs-revisited/
Перевел: Сергей Фастунов
Урок создан: 26 Августа 2011
Просмотров: 46092
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

HTML Links — Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark — first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example

First, use the id attribute to create a bookmark:

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example

You can also add a link to a bookmark on another page:

Chapter Summary

• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark

HTML Exercises

HTML Link Tags

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Добавить в избранные закладки для всех браузеров

Здравствуйте. Поговорим о том, как сделать ссылку или кнопку для добавления в избранное (закладки) для всех браузеров: Chrome, Firefox, Opera, Internet Explorer, Safari — кроссбраузерно, чтобы пользователь при клике на неё смог отложить на будущее и запомнить вашу страницу. Естественно, позаботьтесь о том, чтобы содержание было интересным, иначе никто не будет сохранять её к себе в закладки 🙂
Итак, поехали.

• Что нужно добавить в HTML
• Что нужно добавить в JavaScript
• Как избежать отображения ссылки для избранного в планшетах и мобильных браузерах
• Пример готового скрипта и страницы

Что нужно добавить в HTML

Код вносите в любое нужное вам место. Все параметры, кроме нижеуказанных, можно изменить или удалить.

• id=»fav»
  Сюда будет писаться инструкция для Chrome, Opera и всех браузеров на движке Webkit
• rel=»sidebar»
  Атрибут обязательный, нужен для Firefox, так он будет определять, что страницу по ссылке нужно отправить в избранное
• href=»»
  Также желательно оставить без изменений. Firefox будет брать ссылку для закладки по этому адресу

Будь моя воля, заменил бы a на span , но этот вариант не подойдёт под Firefox

Что нужно добавить в JavaScript

Код либо выносите во внешний файл, либо располагаете в любом понравившемся месте на странице, например, в разделе <head></head> или перед закрывающим тегом </body>
Код закомментирован, думаю, ничего сложного нет. Если возникнут вопросы — задавайте в комментариях.

Как избежать отображения ссылки для избранного в планшетах и мобильных браузерах

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

Немного разберём его

• var UA = navigator.userAgent.toLowerCase(); — записывает в переменную заголовки браузера, переведя их в нижний регистр. По её содержимому мы будем определять «мобильность» браузера.
• return (/Регулярное выражение/.test(UA) ? true : false) — фильтр. В регулярном выражении записываются фрагментры, которые могут находиться в заголовках мобильных браузеров. Вы можете добавить свои значения, разделяя их | .

Фильтр чувствителен к регистру. Поэтому, если будете вносить свои значения в фильтр, обязательно записывайте их в нижнем регистре (маленькими буквами).

Пример готового скрипта и страницы

Подытожу, как в итоге может выглядеть код html

Данный способ актуален на 2017 год. Не исключено, что со временем новые версии браузеров внесут свои коррективы, и скрипт перестанет работать. Если вы заметите такие сбои, пишите в комментариях, рассмотрим и обновим код.

Кроссбраузерные закладки на произвольное место страницы

Бывают случаи, когда в браузере приходится читать большой текст в несколько приёмов. Это может быть роман, статья или техническое руководство. Хорошо, когда документ разделён на главы и снабжён удобной навигацией. Тогда, прерывая чтение, можно создать временную закладку на страницу раздела или на якорную точку в документе. А если текст сплошной? Или ссылки на внутренние разделы не предусмотрены? Или сами разделы слишком велики и трудно потом искать нужный абзац внутри раздела?

Один из выходов — сохранить документ на диск и читать при помощи любой программы, позволяющей создавать внутренние закладки или запоминающей место, на котором закрыли текст.

Но такое умножение сущностей не для всех удобно. Попробуем найти способ попроще.

Чтобы этот способ был универсальным, придётся ориентироваться не на структуру документа (он может вообще не содержать никаких тегов кроме body и, может быть, pre ) и не на текстовое содержимое (в тексте могут быть повторяющиеся строки или документ может быть коллекцией неподписанных картинок). Остаётся ориентироваться на самое шаткое — на метрику. А именно — на расстояние, прокрученное от начала документа (страницы с горизонтальной прокруткой редки и пока можно ими пренебречь).

Вырисовывается алгоритм: нам нужно получить расстояние от начала документа до места чтения и где-то сохранить его, чтобы потом затребовать для прокрутки страницы до нужного участка. Для этого понадобится: кроссбраузерный способ определять расстояние прокрутки, кроссбраузерное хранилище для базы закладок и кроссбраузерный интерфейс для сохранения и восстановления позиции в документе (алгоритм можно использовать и для серверных решений, но нас пока интересует клиентская сторона).

У алгоритма будет по крайней мере два минуса: привязка к размерам окна браузера (правда, вряд ли пользователи часто меняют этот размер; вдобавок есть идея, как минимизировать эту зависимость) и поддержка только статичных документов (использовать, например, для часто изменяющейся страницы друзей в ЖЖ или для ленты новостей не получится).

1. Определение прокрутки

Так как Internet Explorer не поддерживает свойства window.scrollY и window.pageYOffset , будем использовать element.scrollTop . Какой элемент брать, зависит от режима работы браузера, то есть — от doctype страницы. В режиме следования стандартам (standards mode) нужно использовать document.documentElement.scrollTop , в режиме совместимости (quirks mode) — document.body.scrollTop . К счастью, нам нет нужды проверять режим: свойство scrollTop ошибочно выбранного элемента всегда будет равно нулю при любой прокрутке, поэтому можно просто перебрать оба элемента и сохранить значение, отличное от нуля.

2. Хранилище закладок

Единственный кроссбраузерный способ хранения, который представляется удобным, это технология Web Storage. Её поддерживают все последние версии популярных браузеров (Chrome 4+, Firefox 3.5+, Internet Explorer 8+, Opera 10.5+, Safari 4+). Скрепя сердце распрощаемся с поддержкой старых версий. Единственный минус: не все браузеры поддерживают эту технологию для локальных файлов. Поскольку функции объекта localStorage создают и запрашивают данные в базе, ориентируясь на домены страниц, а все локальные файлы (то есть страницы, загруженные по протоколу file:/// ) не имеют домена, налицо трудность, с которой не все браузеры до сих пор справились. Chrome, Opera и Safari поддерживают технологию localStorage для оффлайн-документов, создавая общее хранилище ключей для всех локальных файлов. Internet Explorer выдаёт ошибку, не находя объекта localStorage для документов без домена. Firefox вообще по-партизански молчит и ничего не делает в местах вызова функций (баг запротоколирован здесь и здесь). Поэтому для последних двух браузеров единственным выходом остаётся чтение онлайн или из кэша браузера.

Для каждой интересующей нас страницы мы будем создавать в базе уникальный ключ, состоящий из произвольного префикса и полного URL документа. Так закладки будут автоматически соотнесены с со своими объектами и их можно будет сохранять и запрашивать двумя миниатюрными универсальными функциями.

3. Интерфейс

До настоящего времени, кажется, нет общего способа создавать расширения под все браузеры. Поэтому нам остаётся старый проверенный путь — букмарклеты.

Соединяем компоненты

Создадим код для трёх функций: первая будет получать расстояние прокрутки и сохранять его в базе, вторая будет восстанавливать прокрутку страницы, третья — удалять закладку из базы (это уже факультативная прибавка).

Код сохранения прокрутки (создание закладки):

Когда мы удалим пробелы (пару пришлось оставить, иначе куски длинных строк исчезает за границами топика) и, следуя правилам, обернём код в анонимные функции, не возвращающие значения, мы получим следующие букмарклеты:

Код сохранения прокрутки (создание закладки):

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

Если кому-то это покажется неудобным, можно перетащить ссылки отсюда (в Internet Explorer лучше действовать через контекстное меню ссылок, добавляя их в нужную папку Избранного, потому что перетаскивание букмарклетов не всегда срабатывает).

Конечно, эти зачатки функций можно развивать уже средствами каждого браузера. Можно использовать GreaseMonkey или Custom Buttons для Firefox (или создать полноценное расширение), можно оформить алгоритм как виджет для Opera или расширение для Chrome. Можно наладить автоматическое создание закладок перед закрытием для нужных страниц и автоматический переход к последней позиции при их открытии. Можно добавлять к названию ключей в базе данных текущую метрику окна браузера, чтобы для разных размеров устанавливались свои закладки. Можно реализовать серверное решение (благо, никакой базы данных на стороне сервера не потребуется, ценой будет несколько строчек кода).

Будем считать это ещё одной иллюстрацией возможностей замечательной технологии Web Storage.