Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Закладки пользователя
+
Всем привет сегодня у нас весьма полезный и легкий скрипт который позволит добавить закладки материалов на вашем сайте!.

Особенности:
1. Не использует модули.
2. Классический вид.
3. Удобное добавление и удаление.

Установка:
1. Идем > Страница материала и комментариев к нему (Нужного модуля) и добавляем html:
Код
<div class="Bookmark" data-id="$ID$" data-img="$SCREEN_URL$" data-title="$ENTRY_TITLE$">🔖</div>


2. На этой же странице добавляем вывод (Для создания и парсинга тем (Можно оформить как блок, на это он и создан)):
Код
<div id="Bookmark-content"></div>

Если блок вам не нужен на этой страницу скройте его добавив style="display:none;"

3. На этой же странице добавим js код:
Код
<script>
dates = new Date();  
sDt = dates.getDate();  
sDm = dates.getMonth() +1; if(sDm < 10) {sDm = '0'+sDm};
sDy = dates.getFullYear();
sTh = dates.getHours();
sTm = dates.getMinutes();  
Bookmark = $('.Bookmark').attr('data-id');
BookmarkImg = $('.Bookmark').attr('data-img');
BookmarkTitle = $('.Bookmark').attr('data-title');
BookmarkUrl = location.href;
$('.Bookmark').click(function() {
if($('#Bookmark-content div').hasClass("Bookmark"+Bookmark)) {
$('#Bookmark-content .Bookmark'+Bookmark).remove();
$(this).html('🔖');
} else {
$(this).html('✖');
$('#Bookmark-content').prepend('<div class="BookmarkAll Bookmark'+Bookmark+'" onclick="location=\''+BookmarkUrl+'\'"><img src="'+BookmarkImg+'"><p onclick="BookmarkDel('+Bookmark+')">✖</p><b>'+BookmarkTitle+'</b><br><em>'+sDt+'.'+sDm+'.'+sDy+' в '+sTh+':'+sTm+'</em></div>');
};
BookmarkSave = $('#Bookmark-content').html();
localStorage.removeItem("BookmarkSave");
localStorage.setItem('BookmarkSave', ''+BookmarkSave+'');  
});
BookmarkLoad = localStorage["BookmarkSave"];  
$('#Bookmark-content').html(BookmarkLoad);  
if($('#Bookmark-content div').hasClass("Bookmark"+Bookmark)) { $('.Bookmark').html('✖'); }
function BookmarkDel(id) {
$('#Bookmark-content .Bookmark'+id).remove();
$('.Bookmark').html('🔖');
BookmarkSave = $('#Bookmark-content').html();
localStorage.removeItem("BookmarkSave");
localStorage.setItem('BookmarkSave', ''+BookmarkSave+'');  
};
</script>


4. Добавим базовое CSS:
Код
.Bookmark {
  background: #7196b6;
  display: inline-block;
  padding: 3px 0px;
  width: 32px;
  text-align: center;
  color: #fff;
  position: absolute;
  margin: 55px 0px 0px 759px;
  font-size: 19px;
  font-family: sans-serif;
  border-radius: 4px;
  font-weight: bold;
}
.BookmarkAll img {
  width: 25px;
  height: 25px;
  border-radius: 10% 0px;
  vertical-align: middle;
  margin: 0px 10px 5px 0px;
}
.BookmarkAll b {
  position: relative;
  top: -7px;
  text-transform: capitalize;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  max-width: 225px;
  display: inline-block;
  font-family: sans-serif;
}
.BookmarkAll p {
  position: absolute;
  margin: -30px 0px 0px 275px;
  background: #e8e8e8;
  padding: 2px 3px;
  color: darkcyan;
  border-radius: 2px;
  min-width: 12px;
  text-align: center;
   
  font-size: 10px;
  font-family: cursive;
}
.BookmarkAll em {
  position: absolute;
  font-size: 9px;
  font-style: normal;
  margin: -16px 0px 0px 34px;
  color: #91a8bb;
}
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 18.03.2018 в 18:52 по МСК
Категория: Пользователи
Просмотров: 213
Комментариев: 0
Эмоций:
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]