Модер-панель для модулей сайта uCoz
11.07.2013, 19:23
Всем доброго дня, сегодня мы будем создавать html шаблон модер-панели, который заменит стандартную модер-панель редактирование новостей, но для начала смотрим демо.


Установка
Шаг 1 - Установим HTML:
Для начала нам следует установить новый html код модер-панели, для этого заходим

в Админ панель => Дизайн => Управление дизайном => Новости сайта => Вид материалов

находим системную переменную uCoz:

Код
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>

удаляем её и устанавливаем новый html код:

Код
<?if($MODER_PANEL$)?>  
<div class="dd_edit_news">  
  <a href="#" class="drop"><img alt="edit news" title="редактировать новость" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_edit_news.png"></a>  
  <div class="dd_cell_n1">  
  <span class="dd_ugol_n1"></span>  
  <div class="dd_content_en">  

  <?if($NOT_ACTIVE$)?> <a href="javascript://" rel="nofollow" onclick="_entrRem('aib$ID$','/index/91-4-$ID$','http://s105.ucoz.net','Вы действительно хотите активировать данный материал?');return false;"><img id="aib$ID$" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_activate.png" title="Материал неактивен. Активировать..." align="absmiddle" border="0" height="18" width="18"></a> <?endif?>  
  <a href="javascript://" rel="nofollow" onclick="new _uWnd('TgEd',' ',-450,-100,{autosize:1,closeonesc:1,resize:0},{url:'/index/52-2-$ID$'});return false;"><img alt="tag" title="Теги материала" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_tag.png" border="0" height="18" width="18"></a>  
  <a href="javascript://" rel="nofollow" onclick="new _uWnd('cntEd',' ',-280,-100,{autosize:1,closeonesc:1,resize:0},{url:'/index/87-2-$ID$'});return false;"><img alt="counters" title="Управление счетчиками" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_counters.png" border="0" height="18" width="18"></a>  
  <a href="/news/0-0-0-$ID$-10"><img alt="edit" title="Редактировать материал" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_edit.png" border="0" height="18" width="18"></a>  
  <a href="javascript://" onclick="if(confirm('Вы действительно хотите удалить материал?'))$.get('/index/92-4-$ID$-<?substr($MODER_PANEL$, strrpos($MODER_PANEL$,"','h")-8,8)?>',function(){setTimeout(function(){_uWnd.alert('Материал успешно удален!!','Внимание',{w: 300, h: 60, tm: 1000000});$('#entryID$ID$').fadeOut('slow');},2000)});"><img onclick="_entrRem('dib$ID$','/index/92-4-$ID$','http://s105.ucoz.net','Вы подтверждаете удаление?');return false;" alt="remove" title="Удалить материал" src="http://center-dm.ru/ucoz/vid_m_panel/v1/ico_remove.png" border="0" height="18" width="18"></a>  

  </div>  
  </div>  
</div>  
<?endif?>

Как многие могли заметить, в данном решении я использовал Drop-Down Menu, который заменит нам разного рода js, когда речь идёт о появляющейся информации на сайте.

Не забудьте изменить в данном html коде http://s105.ucoz.net, номер сервера на свой, иначе данное решение может перестать работать.

Шаг 2 - Установим CSS:
Теперь когда всё готово, нам следует прописать следующие css стили:

Код
/* Модер-панель для модули новости сайта uCoz  
------------------------------------------*/  
.dd_edit_news {  
  float:right;  
  display:block;  
  position:relative;  
}  
   
.dd_edit_news .drop {padding: 0px 7px;}  

.dd_cell_n1,  
.dd_ugol_n1 {width:35px;}  

.dd_cell_n1 {  
  left:-999em;  
  z-index:998;  
  position:absolute;  
  margin: 0 -2px 0 auto;  
}  
   
.dd_content_en {  
  margin:0;  
  width:35px;  
  text-align:center;  
  overflow:hidden;  
  background:#333;  
}  

.dd_content_en a:link,  
.dd_content_en a:visited {  
  float:left;  
  width:35px;  
  padding: 5px 0px 3px 0px;  
  border-bottom: 1px solid #888;  
}  

.dd_content_en a:hover {background:#5f5f5f;}  
   
.no_bb:link,  
.no_bb:visited {border-bottom:none!important;}  
   
.dd_edit_news:hover .dd_cell_n1{  
  top:27px;  
  right:0;  
  left:auto;  
}  
   
.dd_ugol_n1 {  
  height:7px;  
  top: -7px;  
  position:absolute;  
  background:url(http://center-dm.ru/ucoz/vid_m_panel/v1/fon_ugol_news.png) no-repeat center bottom;  
}

Для тех кто захочет изменить цвет данных иконок, в данном архивы вы найдёте PSD исходник.

Напоминаю, что данное решение лучше всего использовать когда на сайте только вы редактируете материал, в противном случае ту или иную функцию данного решения, придётся отображать для определённой группы пользователей.

К примеру вы хотите, чтобы кнопка удалить материал отображалась только вам, а группе модеры нет, для этого следует поместить данную функцию в специальную системную переменную uCoz:

Код
<?if($CUR_GROUP_ID$='4')?> ссылка на удаление<?endif?>

А номер той или иной группы пользователей на вашем сайте, вы можете посмотреть зайдя

в Админ панель => Пользователи => Группы пользователей => ID

На этом всё, спасибо за внимание!
Категория: Прочее | Добавил: Pincher | Теги: Модер-панель, Прочее, uCoz, сайта, для, модулей
Просмотров: 692 | Загрузок: 0 | Рейтинг: 1.0/4
Всего комментариев: 0