Мини-чат в ajax окне в стиле uCoz by webo4ka


Мини-чат в ajax окне в стиле uCoz by webo4ka

2944
9.4 из 10
Проголосовало: 7






Описание:
Мини-чат в 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: {<?if($GROUP_ID$='4')?>'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>');}],<?endif?> '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="javascript://" 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;">  
  <?if($USERNAME$)?><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> <?endif?>  
  <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>  
  <?if($EMAIL$)?> <a href="$EMAIL_JS$" title="$STR_EMAIL$">E</a><?endif?>  
  <?if($SITE$)?> <a rel="nofollow" href="$SITE$" target="_blank" title="$STR_URL$">W</a><?endif?>  
  </div>  
  <div class="cMessage" style="text-align:left;">$MESSAGE$</div>  
  <?if($CUSTOM1$)?><br>$STR_CUSTOM1$: $CUSTOM1$<?endif?>  
  <?if($CUSTOM2$)?><br>$STR_CUSTOM2$: $CUSTOM2$<?endif?>  
  </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
<?if(!$CAN_ADD$)?>  
  <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"><?if($LOGIN_LINK$)?><a href="$LOGIN_LINK$">Для добавления необходима авторизация</a><?else?>Доступ запрещен<?endif?></div>  
  </div></div></div><div class="xw-bl"><div class="xw-br"><div class="xw-bc"><div class="xw-footer"></div></div></div></div>  
  <?else?>  

  <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;">  
  <?if($FLD_SECURE$)?>  
  <table border="0" cellpadding="1" cellspacing="1" width="100%">  
  <tr><td width="50%">$FLD_SECURE$</td><td align="right">$IMG_SECURE$</td></tr>  
  </table>  
  <?endif?>  

  <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>  
  <?endif?>


готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 15

World1ng
+1
World1ng написал: Написано 14 Июля 2012 в 20:32
Комментарий №15
-0

AndreyKlipikov
+2
AndreyKlipikov написал: Написано 24 Февраля 2012 в 22:47
Комментарий №12
Code
$("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>");


Нет слов...

Code
$("body").append("<style type=\"text\/css\">.xt-obnoviti{background-position:0 -225px;} .xt-obnoviti-over{background-position:-15px -225px;}.xt-smaili{background-position:0 -90px;} .xt-smaili-over{background-position:-15px -90px;}.xt-bb-kodi{background-position:0 -135px;} .xt-bb-kodi-over{background-position:-15px -135px;}.xt-ypravlenie_cmc{background-position:0 -315px;} .xt-ypravlenie_cmc-over{background-position:-15px -315px;}<\/style>");


sad

S9va
-4
S9va написал: Написано 24 Февраля 2012 в 23:17
Комментарий №13
И чё? angry

Вовчик
0
Вовчик написал: Написано 25 Февраля 2012 в 00:07
Комментарий №14
и то)

FoGame
0
FoGame написал: Написано 24 Февраля 2012 в 22:10
Комментарий №10
Nice)

S9va
0
S9va написал: Написано 24 Февраля 2012 в 22:06
Комментарий №9
Картинки спрятались!

AndreyKlipikov
0
AndreyKlipikov написал: Написано 24 Февраля 2012 в 22:45
Комментарий №11
Скажи спасибо авторам данных окон smile

Sonay
0
Sonay написал: Написано 24 Февраля 2012 в 19:54
Комментарий №8
+1 happy

uExpert
0
uExpert написал: Написано 24 Февраля 2012 в 19:32
Комментарий №6
Code
<a href="#" onclick="mchat_webo4ka_ru();">Мини-чат</a>

href="#" не желательно использовать - будет при нажатии на ссылку кидать к верху страницы. Лучше прописать href="javascript://"

ВоВаН
0
ВоВаН написал: Написано 24 Февраля 2012 в 19:03
Комментарий №4
Нда ребят, прикольнуло, еще летом прошлого года со своей старой социалкой эксперементировал, и начал для удобства засовывать все подряд в аяксы, и чат до туда добрался. И уже через неделю примерно на вебочке а позже и на других сайтах появилась эта фишка smile правда я особо крутого ничего не делал, просто ЧАТ БОКС засовывал и все

kolyan1282
+2
kolyan1282 написал: Написано 24 Февраля 2012 в 18:48
Комментарий №2
Да, действительно круто!!! А может кто дописать скрипт чтобы кнопка вызова чата была в низу с лева в виде картинки???

Kelin
+1
Kelin написал: Написано 24 Февраля 2012 в 18:58
Комментарий №3
2) Кнопку вызова окна ставите куда вам будет угодно:
Ставь:
Code
<a href="#" onclick="mchat_webo4ka_ru();"><img src="ССЫЛКА НА КАРТИНКУ"></a>

Вместо:
Code
<a href="#" onclick="mchat_webo4ka_ru();">Мини-чат</a>

kolyan1282
+1
kolyan1282 написал: Написано 24 Февраля 2012 в 19:13
Комментарий №5
немного не то я спрашивал - чтобы картинка всегда была в нижнем левом углу сайта не зависимо от того в начале страницы ты просматриваеш сайт или в конце страницы

Goodmind
+1
Goodmind написал: Написано 24 Февраля 2012 в 19:42
Комментарий №7
вроде так
Code
<div style="bottom:0;left:0;position:fixed;"><a href="#" onclick="mchat_webo4ka_ru();"><img src="ССЫЛКА НА КАРТИНКУ"></a></div>
если не работает то просто у меня голова болит biggrin

philias507276
+2
philias507276 написал: Написано 24 Февраля 2012 в 18:05
Комментарий №1
Круто! smile smile smile

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: