Пример этих закладок можно увидеть на этом сайте.
Добавление и удаление в избранное находится на кнопке под каждой статьей, а сам список закладок в верхнем меню.
HTML:
Кнопка добавить/удалить:
|
1 |
<button class="bookmarks" data-bookurl="https://atuin.ru/" data-bookname="Atuin">В закладки</button> |
Где атрибуты data-bookurl и data-bookname - ссылка и название закладки. Если эти атрибуты отсутствуют, то ссылка будет браться из адресной строки, а заголовок из тега h1
Список закладок:
|
1 2 3 |
<ul id="books"> <li class="bookmarks-txt">Тут будут показаны ваши закладки</li> </ul> |
CSS:
bookmarks - основной класс кнопки
in-bookmark - класс, который добавляется к кнопке, если она в закладках
books - ID списка со всеми закладками
bookmarks-txt - класс элемента списка, который показывается при отсутствии закладок
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
let book = []; function Item(name, url) { this.name = name; this.url = url; } function savebook() { localStorage.setItem("bookmarks", JSON.stringify(book)); } function loadbook() { book = JSON.parse(localStorage.getItem("bookmarks")); if (book === null) { book = [] } /* Сброс кнопок и названий */ $('.bookmarks').removeClass('in-bookmark'); $('.bookmarks').text('В закладки'); $('#books li').hide(); if (!book.length) { $('.bookmarks-txt').show(); } else { /* Выводим ссылки */ $('.bookmarks-txt').hide(); $('.bookmarks').removeClass('in-bookmark'); for (let i in book) { $('#books').append('<li><a href="'+ book[i].url +'">'+ book[i].name +'</a></li>'); } $('.bookmarks').each(function() { /* Отмечаем кнопки, которые в закладках */ let name = $(this).attr('data-bookname'); let url = $(this).attr('data-bookurl'); if (typeof url === typeof undefined || url === false) { name = $('h1').text(); // url = window.location.href; // Полная ссылка url = location.protocol + '//' + location.host + location.pathname; // Ссылка без параметров } if ((book.find(n => n.name === name)) && (book.find(n => n.url === url))) { $(this).addClass('in-bookmark'); $(this).text('В закладках'); } }); } } function addDelItem(name, url) { for (let i in book) { if ((book[i].name === name) || (book[i].url === url)) { book.splice(i, 1); savebook(); return; } } let item = new Item(name, url); book.push(item); savebook(); }; loadbook(); $(".bookmarks").click(function() { let name = $(this).attr('data-bookname'); let url = $(this).attr('data-bookurl'); // Проверяем один из атрибутов для определения их наличия if (typeof url === typeof undefined || url === false) { name = $('h1').text(); // url = window.location.href; // Полная ссылка url = location.protocol + '//' + location.host + location.pathname; // Ссылка без параметров } addDelItem(name, url); // Тут можно добавить дополнительные действия, которые будут активироваться после нажатия на кнопку. // На этом сайте, это показ верхнего меню, и анимация кругов на кнопке "закладки" /* $("#navigation").css({ top: "0" }); $(".navbar-nav > li:last-child").addClass('book-show'); window.setTimeout(function() { $(".navbar-nav > li:last-child").removeClass('book-show'); }, 1500); */ loadbook(); }); |
Обратите внимание:
В данном примере наличие страницы в закладках и вариант кнопки определяется по совпадению заголовка и ссылки без параметров.
Если на сайте есть страницы с одинаковыми заголовками или разными ссылками на одну страницу, то проверку на наличие в избранном нужно будет менять.
По аналогии с ссылкой и названием можно добавить и другие данные, например, картинку или описание.
Спасибо , хорошее решение
Почему то при добавлении пишет Atuin