Новая ModerPanel для uCoz

Наверх!
Новая ModerPanel для uCoz
Демо Скачать
Доп. услуги

Описание

Новый взгляд на модер-панель для материалов Вашего сайта на uCoz.
Имеет два цветовых решения светлый (.-light) и тёмный (.-dark)

В установке особые танци с бубнами не нужны, достаточно просто следовать инструкции.

Установка:
Код ниже нужно добавить в то месте, где хотите заменить стандартную модер-панель ($MODER_PANEL$)
ПУ > Управление дизайном > Вид материалов или Страница материала и комментариев к нему

Код
<?if($MODER_PANEL$)?>  
  <!-- ActionMP -->  
  <div class="ActionMP -light" data-id="$ID$">  
  <div class="-placeholder">Выберите действие</div>  
  <div class="-list">  
  <div class="-item" data-action="view" data-link="$ENTRY_URL$">Посмотреть</div>  
  <div class="-item" data-action="active">Активировать</div>  
  <div class="-item" data-action="counters">Счётчики</div>  
  <div class="-item" data-action="tags">Теги</div>  
  <div class="-item" data-action="edit">Редактировать</div>  
  <div class="-item" data-action="delete">Удалить</div>  
  </div>  
  <div class="-defaultMP">$MODER_PANEL$</div>  
  </div>  
  <!-- /ActionMP -->  
  <?endif?>


Стили. ПУ > Управление дизайном > Таблица стилей (CSS):

Код
.ActionMP {display: inline-block; height: 30px; border-radius: 3px; border: 1px solid transparent; font-size: 13px; cursor: pointer;}  
  .ActionMP .-placeholder, .ActionMP .-item {display: block; width: calc(100% - 20px); height: 30px; padding: 0 10px; line-height: 30px;}  
  .ActionMP .-placeholder {background: url('http://pandora.clan.su/demo/moderpanel/arrow.png') no-repeat calc(100% - 27px) center / 15px auto; padding: 0 30px 0 10px;}  
  .ActionMP .-list {display: none; border: 1px solid transparent; border-top: 0; overflow: hidden; border-radius: 0 0 3px 3px; width: 100%; margin-left: -1px;}  
  .ActionMP .-item {height: calc(30px - 1px); border-top: 1px solid transparent;}  
  .ActionMP .-defaultMP {display: none;}  
  .ActionMP.-activeMP {border-radius: 3px 3px 0 0;}  
  .ActionMP.-activeMP .-list {display: block; position: absolute;}  
   
  .ActionMP.-light {background-color: #fff; border-color: #ccc; color: #333;}  
  .ActionMP.-light.-activeMP .-placeholder {color: #5bc6f9;}  
  .ActionMP.-light .-list {border-color: #ccc;}  
  .ActionMP.-light .-item {background-color: #fff; border-color: #ccc;}  
  .ActionMP.-light .-item:hover {background-color: #5bc6f9; color: #fff;}  
   
  .ActionMP.-dark {background-color: #273142; border-color: #313d4f; color: #7c8ca5;}  
  .ActionMP.-dark.-activeMP .-placeholder {color: #fff;}  
  .ActionMP.-dark .-list {border-color: #313d4f;}  
  .ActionMP.-dark .-item {background-color: #273142; border-color: #313d4f;}  
  .ActionMP.-dark .-item:hover {background-color: #244a6c; color: #fff;}


В нижнюю часть сайт. ПУ > Управление дизайном > Нижняя часть сайта:

Код
<?if($MODER_PANEL$)?>  
  <script>  
  ActionMP();  
  function ActionMP(){  
  var $main = $('.ActionMP');  
  $main.on('hover',function() {  
  var main = $(this);  
  var $mainID = main.attr('data-id');  
  //  
  main.find('.-list').width(main.width());  
  //  
  main.find('.-item').on('click',function(){  
  var item = $(this);  
  var itemB = item.attr('data-action');  
  if(itemB == 'view') location.href = item.attr('data-link');  
  if(itemB == 'active') var param = 'publ';  
  if(itemB == 'counters') var param = 'rating';  
  if(itemB == 'tags') var param = 'tags';  
  if(itemB == 'delete') var param = 'del';  
  if(itemB == 'edit') var param = 'edit';  
  var funk = main.find('.-defaultMP .u-mpanel-'+param+' a').click();  
  if(itemB == 'edit') location.href = funk.attr('href');  
  });  
  });  

  $main.hover(function(){$(this).addClass('-activeMP');}, function(){$(this).removeClass('-activeMP');});  
  };  
  </script>  
  <?endif?>


В данном коде цвет будет светлый, чтобы сделать тёмный, нужно заменить в <div class="ActionMP -light" data-id="$ID$">
-light на -dark.

Ну собственно и всё.

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-46
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2018 года.
Дополнительно
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.