Боба
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1

Для добавления необходима авторизация
Граффити
Форма входа

Закрыть

Новый вид панели прикрепления для комментариев
Скрипты

Сегодня хотелось поделиться своим вариантом вида панели прикрепления картинки видео и других материалов в комментариях

Установка


Для начала нам нужно подключить вот такой код в верхнюю часть сайта
Данный пункт нужен только для тех у кого еще не подключено jquery
Код
<script src="/js/jquery-1.11.0.min.js"></script>


Установите данный код в Панель управления >> Комментарии >> Форма добавления

Код

<div id="us_block_stena_knopki"><ul><li style="background-position: 0 -29px;"><a href="javascript://" onclick="$('#dop_panel').slideToggle('slow');"></a></li></ul><div id="clr"></div></div><div id="dop_panel" style="display: none;" >   <ul>   <li><a href="/media/?t=draw;h=1"><i style="background-position: -1px"></i>Графити</a></li>   <li><a href="javascript://" onclick="emoticon('[img]Вставьте ссылку на картинку[/img]','message');"><i style="background-position: -32px"></i>Картинку</a></li>   <li><a hhref="javascript://" onclick="emoticon('[audio]Вставьте ссылку на аудиозапись[/audio]','message');"><i style="background-position: -64px"></i>Музыку</a></li>   <li><a href="javascript://" onclick="emoticon('[video]Вставьте ссылку на видеозапись[/video]','message');"><i style="background-position: -96px"></i>Видео</a></li>   <li><a href="javascript://" onclick="emoticon('[url=ставьте ссылку на файл]Название ссылки/файла[/url]','message');"><i style="background-position: -128px"></i>Файл</a></li>   <li><a href="javascript://" onclick="emoticon('[spoiler][/spoiler]','message');"><i style="background-position: -160px"></i>Спойлер</a></li>   </ul>   </div>


Теперь установим стили для нашей панели
для этого переходим Панель управления Таблица стилей и в самый низ ставим код

Код

/* dop_panel
-----------------------------------------------------------------------------*/
#us_block_stena_knopki {
  height: 40px;
}
#us_block_stena_knopki ul li {
  display: block;
  position: relative;
  z-index: 3;
  margin: 3px 5px;
  width: 30px;
  height: 30px;
  background: url("../img/us_block_stena_knopki_img.png");
  float: left;
}
#us_block_stena_knopki ul li a {
  width: 30px;
  height: 30px;
  display: block;
}
#us_block_stena_knopki ul li a:hover {
  background: rgba(0,0,0,.10);
}

#dop_panel {
  width: 115px;
  position: absolute;
  background: #FFF;
  margin-left: 40px;
  margin-top: -40px;
  padding: 5px;
  border-left: 1px solid #eff1f4;
  border-right: 1px solid #eff1f4;
  border-bottom: 1px solid #eff1f4;
  box-shadow:0 0 3px rgba(0,0,0,.10);
  -moz-box-shadow:0 03px rgba(0,0,0,.10);
  -o-box-shadow:0 0 3px rgba(0,0,0,.10);
  -webkit-box-shadow:0 0 3px rgba(0,0,0,.10);
}

#dop_panel ul {
  list-style: none;
}
#dop_panel ul li {
  float: none;
  height: 30px;
  border-bottom: 1px solid #F2F6FA;
}
#dop_panel ul li:hover {
  background: #F1F5F7;
}
#dop_panel ul li a {
  display: block;
  color: #6A727C;
  line-height: 30px;
}
#dop_panel ul li i {
  display: block;
  width: 30px;
  height: 30px;
  background: url("../img/dop_panel_img.png");
  float: left;
}


Теперь переходим в нижнюю часть сайта и в самый низ ставим этот код
Код
<script>  //код прикрепления   function emoticon(code,nm){if (code != ""){var txtarea=document.getElementById(nm);code = code ;if (document.selection) {txtarea.focus();var txtContent = txtarea.value;var str = document.selection.createRange();if (str.text == ""){str.text = code;} else if (txtContent.indexOf(str.text) != -1){str.text = code + str.text;} else {txtarea.value = txtContent + code;}}else{txtarea.value = txtarea.value + code;}}}
</script>


Теперь скачайте файл с картинками и залейте папку img и js в файловый менеджер

На этом всё
Отзывы и вопросы в комментарии к данному материалу

Особености:

Тематика
Для любого сайта
Браузеры
Одинаково работаее на всех браузерах последней версии
Адаптация
Нет
Архив
Все нужные файлы
Размер
35.4Kb

Скачивать файлы могут только зарегистрированные пользователи, Войдите на сайт под своим именем.

Запись добавлена

Комментарии

Нет комментариев

Добавлять комментарии могут только зарегистрированные пользователи, Войдите на сайт под своим именем.