Bookmarks 1.0 - Закладки страниц с использованием localStorage

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

UPD (23.08.2013): Полностью переписан скрипт. Всем, кто его устанавливал - просьба пройти повторную установку.

Установка скрипта

Перед ставим код:
Код
<script>$.getScript('http://web41k.ru/Scripts_files/Bookmark/jquery.bookmarks.1.0.js');</script>
Стили настраиваем по своему усмотрению. По желанию вы можете установить мой вариант стилей:
Код
.book {width:300px;background:#262626;font:Bold 12px Arial,sans-serif;margin:0 auto;padding:.1px 10px;}  
  .nobook {padding:10px;margin:10px 0;background:#cd4040;text-align:center;color:#fff;}  
  .bookmark {background:#9dcd40;margin:10px 0;padding:15px 10px;}  
  .bookmark a {color:#fff;text-decoration:none;display:block;}  
  .bookmark button {font:12px Arial,sans-serif;float:right;background:rgba(255,255,255,.25);border:0;color:#fff;margin-top:-5px;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-ms-transition:background .3s ease;transition:background .3s ease;padding:5px;}  
  .bookmark button:hover {background:rgba(0,0,0,.1);}

Основная информация

Чтобы не повторяться в описании каждой функции, напишу коды кнопки и ссылки сразу:
Код
<button onclick="функция">Текст</button><a href="#" onclick="функция">Текст</a>
Где "функция" - одна из функций, перечисленных ниже.

Массив закладок

Код
$.bookmarks.get();
Функция вернет массив вида:
Код
[{"name":"Страница #1","url":"/index1.html"},{"name":"Страница #2","url":"/index2.html"}]

Поиск закладок по URL

Код
$.bookmarks.search(url,event);
url - адрес страницы
event - объект из двух функций:"success" (Выполнится, если будет найдена закладка) и "failed" (Выполнится, если закладка не найдена).
Пример:
Код
$.bookmarks.search('/index1.html',{  
success:function(){  
alert('Закладка найдена');  
console.log('Номер закладки:'+x);  
},  
failed:function(){  
alert('Закладка не найдена');  
}  
  });
Примечание: если закладка будет найдена, то в консоли вы можете увидеть запись:"Номер закладки: x", где x - порядковый номер закладки в массиве.Так же существует другой формат записи, при котором функция вернет true/false:
Код
$.bookmarks.search(url);

Добавление закладок

Код
$.bookmarks.add(name,url,event);
name - название закладки
url - адрес закладки
event - объект из двух функций:"success" (Выполнится, если закладка будет добавлена) и "failed" (Выполнится, если закладка не будет добавлена).
Пример:
Код
$.bookmarks.add('Закладка #1','/index1.html',{  
success:function(){  
alert('Закладка успешно добавлена.');  
},  
failed:function(){  
alert('Такая закладка уже есть.');  
}  
  });

Удаление закладок

Код
$.bookmarks.erase(url,event);
url - адрес закладки
event - объект из двух функций:"success" (Выполнится, если закладка будет удалена) и "failed" (Выполнится, если закладка не будет удалена).
Пример:
Код
$.bookmarks.erase('/index1.html',{  
success:function(){  
alert('Закладка успешно удалена.');  
},  
failed:function(){  
alert('Закладка не найдена.');  
}  
  });

Вывод закладок

Код
$('элемент').bookmarks({slice,sort},event);
slice - количество закладок. Не указывайте, если хотите вывести все.
sort - сортировка закладок. На данный момент доступно только одно значение ("name"), при котором закладки сортируются по имени. Не указывайте, если хотите сортировать закладки по дате добавления.
event - функция, выполняемая после вывода закладок.
Пример:
Код
$('.book').bookmarks(); // Вывод всех закладок  
  $('.book').bookmarks({slice:3}); // Вывод 3 последних заклади  
  $('.book').bookmarks({sort:'name'}); // Сортировка по имени  
  $('.book').bookmarks({sort:'name',slice:3}); // Вывод 3 последних закладки + отсортировать по имени.
На этом пока все. По всем вопросам, а так же при нахождении багов просьба писать в комменты.
Всем хостов wink
Просмотры: 5157 · Комментарии: 39 · Добавил: Kelin · Категория: Рецепты JavaScript
Комментарии к материалу
28.03.2014 в 15:31
zoOmer

Есть маленькая мелочь!
Когда удаляешь все закладки блок просто исчезает.
Можно как нить сделать чтоб сразу после удаления всех закладок появлялся блок с надписью У вас нет закладок. А, то он появляется только после перезагрузки страницы....

Заранее спасибо!
23.08.2013 в 19:38
oldfox

И еще один надоедливый вопрос) Как сделать чтобы название выводилось то, что установлено у меня например в <title> страницы? Просто очень неудобно получается когда нужно для каждой отделенной станицы/модуля писать условие с названием страницы. $TITLE$ и прочее не работает...
24.08.2013 в 10:25
Goodmind


Код
$.bookmarks.add(document.title , location.href);

Добавит страницу на которой находится ссылка в закладки
24.08.2013 в 15:44
Kelin

Умничка.
23.08.2013 в 16:25
oldfox

Все работает просто отлично, только один вопрос. Как правильно сделать поиск?
23.08.2013 в 16:34
Kelin

Что именно нужно?
23.08.2013 в 17:02
oldfox

Например сделать input text, и при вводе определенного названия закладки в него, показывались только нужные. А также, как сделать, чтобы при добавлении страницы в закладу
выводилось сообщение о успешном добавлении?
24.08.2013 в 08:02
Kelin

1. Поиск по названию реализую в след. версии.
2. Сообщение об успешном добавлении:

Код
$.bookmarks.add('Закладка #1','/index1.html',{   
success:function(){   
alert('Закладка успешно добавлена.');   
},   
failed:function(){   
alert('Такая закладка уже есть.');   
}   
   });
23.08.2013 в 14:24
Kelin

UPD (23.08.2013): Полностью переписан скрипт. Всем, кто его устанавливал - просьба пройти повторную установку.
23.08.2013 в 15:48
nerx

Спасибо
23.08.2013 в 16:21
Kelin

Всегда пожалуйста wink Надеюсь, в этот раз все ок будет.
19.08.2013 в 19:41
Davides

Какой принцип работы данных закладок? Они на куках работают как я понял?
20.08.2013 в 08:47
Kelin

localStorage, не Cookies.
20.08.2013 в 13:34
Davides

А можно сделать с использованием какого нибудь модуля?
22.08.2013 в 22:09
Kelin

Ну, вообще-то, можно не убивать модуль, а убить доп. поле. Но это жесть. (~_~)
19.08.2013 в 10:33
Kelin

Ну вот. Такого не должно быть абсолютно (~_~)
19.08.2013 в 10:31
oldfox

Kelin, может заодно и у меня посмотрите
19.08.2013 в 09:50
COBA95

Ппц вы) у меня все работает)
19.08.2013 в 12:46
Kelin

Да вообще ужас
19.08.2013 в 08:42
Kelin

Читай ответ на свой комментарий
19.08.2013 в 08:35
Kelin

Ребята, только не надо кипишь наводить в комментариях (~_~)
1 2 »
Доступ запрещен
Войдите или Зарегистрируйтесь