Мини чат в ajax окне от webo4ka.ru
28.06.2015 в 01:40
Автор: babygirl | Комментариев (0) | Просмотров: 553 | Скачали: 0
Мини чат в ajax окне от webo4ka.ru
Описание файла:

Мини-чат в ajax окне в стиле uCoz by webo4ka. Да да, знаю, что до фига мини-чатов в ajax окне, но я решил сделать свой вариант, и сделал я его в стиле uCoz. На скрине вы можете наблюдать, что и форма добавления комментариев и вид материалов в этом стиле. А все кнопки управления я решил сделать не в стандартном месте, а рядом с названием окна мини-чата. Там вы можете наблюдать такие кнопки как: "Обновить", после идет кнопка "Смайлы" при нажатии на нее откроется стандартное окно смайлов, только не по центру как обычно, а левее окна мини-чата. Следующая кнопка "BB-коды", при нажатии на неё откроется ajax окно со стандартными bb-кодами со страницы /index/17. Ну и последняя кнопка управление сообщениями, она будет видна только группе Администратор, при нажатии на неё, в правом нижнем углу сайта откроется ajax окно в котором вы сможете удалять сообщения и еще в это окошко добавлена кнопка обновить данное окошко

Установка:

1) Вставляем данный код перед </body>

Code
<script type="text/javascript"> 
function mchat_webo4ka_ru(){new _uWnd('mchat','Мини-чат',300,100,{onclose:function(){content: 'onclick="_uWnd.close(\'Sml\')"'},customButtons: {'ypravlenie_cmc': [true, function (){new _uWnd("cmc","Управление сообщениями",340,340,{x: _uWnd.getdims().clientW - 353, y: _uWnd.getdims().clientH - 353, customButtons: {'obnoviti': [true, function (){new _uWnd("cmc","Управление сообщениями",340,340,{x: _uWnd.getdims().clientW - 353, y: _uWnd.getdims().clientH - 353,},'<iframe src="/mchat/0-1" height="290px"></iframe>');}]}, alert: 1, autosize: 1, fixed: 1, resize: 0, fadetype: 1, fadespeed: 400, fadeclosetype: 1, fadeclosespeed: 400,},'<iframe src="/mchat/0-1" height="290px"></iframe>');}], 'bb-kodi': [true, function (){new _uWnd('bb-kodi','BB-коды',600,600,{autosize:0,closeonesc:1,resize:0},'<iframe src="http://scales.3dn.ru/index/17" width="550px" height="550px"></iframe>');}], 'smaili': [true, function (){new _uWnd('Sml',' ',-250,-350,{x: _uWnd.getdims().clientW - 1100, y: _uWnd.getdims().clientH - 628, autosize:0,closeonesc:1,resize:0},{url:'/index/35-2-2'});return false;}], 'obnoviti': [true,function(){mchat_webo4ka_ru()}], }, autosize: 1, resize: 1, min: 1, max: 1, fadetype: 1, fadespeed: 400, fadeclosetype: 1, fadeclosespeed: 400,}, $("#mchat_webo4ka_ru").html() )}  
$("body").append("<style type=\"text\/css\">.xt-obnoviti{background-position:0 -225px;} .xt-obnoviti-over{background-position:-15px -225px;}<\/style>"); 
$("body").append("<style type=\"text\/css\">.xt-smaili{background-position:0 -90px;} .xt-smaili-over{background-position:-15px -90px;}<\/style>"); 
$("body").append("<style type=\"text\/css\">.xt-bb-kodi{background-position:0 -135px;} .xt-bb-kodi-over{background-position:-15px -135px;}<\/style>"); 
$("body").append("<style type=\"text\/css\">.xt-ypravlenie_cmc{background-position:0 -315px;} .xt-ypravlenie_cmc-over{background-position:-15px -315px;}<\/style>"); 
</script> 
<div style="display:none;" id="mchat_webo4ka_ru">$CHAT_BOX$</div>

2) Кнопку вызова окна ставите куда вам будет угодно: 

Code
<a href="#" onclick="mchat_webo4ka_ru();">Мини-чат</a>
3) Вид материалов мини чата заменяем на это: 
Code
<div class="xw-tl"><div class="xw-tr"><div class="xw-tc xw-tsps"></div></div></div><div class="xw-ml"><div class="xw-mr"><div class="xw-mc menuBg" style="background-color:#ffffff;"> 
<div style="padding:0 4px 5px 2px;margin-bottom:3px;"> 
<div style="float:right;font-size:8px;" title="$DATE$">$TIME$</div> 
<div style="text-align:left;"> 
<a href="$PROFILE_URL$" title="$USERNAME$" rel="nofollow"><img alt="" src="http://s22.ucoz.net/img/icon/profile.png" width="13" border="0" style="vertical-align:-2px"/></a> 
<a href="javascript:void('Apply to')" onclick="parent.window.document.getElementById('mchatMsgF').focus();parent.window.document.getElementById('mchatMsgF').value+='[i]$NAME$[/i], ';return false;"><b>$NAME$</b></a> 
<a href="$EMAIL_JS$" title="$STR_EMAIL$">E</a> 
<a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">W</a> 
</div> 
<div class="cMessage" style="text-align:left;">$MESSAGE$</div> 
<br>$STR_CUSTOM1$: $CUSTOM1$ 
<br>$STR_CUSTOM2$: $CUSTOM2$ 
</div> 
</div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div> 
<link id="link_layer" type="text/css" rel="stylesheet" href="http://src.ucoz.net/src/layer3.css" /> 
<br>
4) Форму добавления сообщения меняете на это: 
Code

<div class="xw-tl"><div class="xw-tr"><div class="xw-tc xw-tsps"></div></div></div><div class="xw-ml"><div class="xw-mr"><div class="xw-mc menuBg" style="background-color:#ffffff;"> 
<div align="center"><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a>Доступ запрещен</div> 
</div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div> 


<div class="xw-tl"><div class="xw-tr"><div class="xw-tc xw-tsps"></div></div></div><div class="xw-ml"><div class="xw-mr"><div class="xw-mc menuBg" style="background-color:#ffffff;">  

<table border="0" cellpadding="1" cellspacing="1" width="100%"> 
<tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr> 
</table> 


<table border="0" cellpadding="1" cellspacing="1" width="100%"> 
<tr><td width="95%" rowspan="2">$FLD_MESSAGE$</td> 
<td align="center" valign="top"><div style="font-size:10px;">$LENGTH_COUNTER$</div></td> 
</tr><tr><td align="center" valign="bottom">$SUBMIT$</td></tr></table> 
</div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div> 

  
 

Скачать файл

Инструкция по установке шаблонов:
Инструкция, приведенная ниже, поможет Вам быстро установить скачанный у нас с сайта шаблон. Для правильной установки прочтите, пожалуйста, внимательно все пункты инструкции, дабы не возникло дополнительных вопросов.
1. Прежде всего загружаем содержимое папки Файловый Менеджер на Ваш сайт.
2. Далее заходим в Дизайн - Управление дизайном (CSS), копируем содержимое файла Таблица стилей и вставляем с заменой. После используем текстовый файл Конструктор шаблонов для создания каркаса дизайна (Дизайн - Конструктор шаблонов).
3. И в заключении устанавливаем сами модули, находятся они в папках с названием, соответствующему названию модуля.


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]