Pasan
не в сети | 0:01 AM 2024-09-23 | Сообщение # 1 |
Админ
Администраторы
|
Новая версия мини-чата для uCoz от Урааа. Современный, удобный и функциональный. Изменен не только дизайн, добавлен новый функционал, анимация, исправлены ошибки и неудобства. Чат стал чище и легче, по сравнению с предыдущей версией. Получилось действительно здорово, нам самим нравится полученный результат.
На этой странице мы делимся с вами исходным кодом, покажем как добавить в чат свои «фишки» и ответим на часто задаваемые вопросы.
Следующая картинка раскрывает ключевые особенности чата:
Установка 1. Активируйте модуль «Мини-чат». В настройках включите дополнительные поля. В настройках прав для групп пользователей установите «Не показывать код безопасности» для всех групп.
2. Загрузите на сайт папки с файлами «chat_files» и «smiles».
3. Перейдите в Панель управления – Управление дизайном. Замените код в модуле «Мини-чат».
Вид материалов:
Код <?if($CUSTOM2$='active')?> <div class="msg"> <div class="sb$PARITY$ comm_id$USER_ID$"> <div class="chatBubbles"> <div id="av$USER_ID$" class="cBubbleLeft"><span></span><div class="av"><a href="$PROFILE_URL$"><img src="$CUSTOM1$" alt="$USERNAME$" width="28" /></a></div></div> <div id="ms$USER_ID$" class="chatRight"> <div class="us"><div class="pdvr"><span class="l_it"><a href="javascript:otbet('$USERNAME$')" class="otbv">Ответить</a> |</span> <?if($DATE$='Сегодня')?>$TIME$<?else?>$DATE$ в $TIME$<?endif?></div> <a href="$PROFILE_URL$" class="us_name">$USERNAME$</a> </div> <div class="chatInner" <?if($NUMBER$='1')?> id="c_one"<?endif?>>$MESSAGE$</div> </div> <div id="av$USER_ID$" class="cBubbleRight" align="right"><span></span><div class="av"><a href="$PROFILE_URL$"><img src="$CUSTOM1$" alt="$USERNAME$" /></a></div></div> </div> </div> </div> <?endif?>
Форма добавления сообщений:
Код <input type="hidden" name="custom1" class="mchat" id="mchatC1F" value="/images/noavatar.gif" /> <input type="hidden" name="custom2" value="active" /> <div align="left"><input type="text" name="mcmessage" class="mchat" id="mchatMsgF" maxlength="500" autocomplete="off" placeholder="Написать..." /></div> <input type="submit" onclick="messages();setTimeout(function(){messages()},500)" value="Отправить" class="mchat2" id="mchatBtn" /> <input type="hidden" name="email" value="1@yraaa.ru"> <input style="visibility:hidden" id="mchatAjax" type="button" value="Отправить" class="mchat2" disabled />
4. Вставьте следующий код в Таблицу стилей (CSS):
Код <!--Mini-chat-->
<script type="text/javascript" src="/chat_files/cookies.js"></script>
<script type="text/javascript" src="/chat_files/jquery.jscrollpane.js"></script> <script type="text/javascript" src="/chat_files/jquery.mousewheel.js"></script> <script type="text/javascript">jQuery(function() {jQuery('#wrapper2').jScrollPane({hideFocus:true});})</script>
<div class="chat_over"<?if($USER_AGENT_PDA$)?> style="display:none"<?endif?>> <?if($USER_LOGGED_IN$)?><div id="sound_chat"><div class="sound_on" onclick="sound_off()"><span class="hm hs">Отключить звук</span> </div><div class="sound_off" onclick="sound_on()"><span class="hm hs">Включить звук</span> </div></div><?endif?> <div id="rules_chat"><span class="hm">Правила чата</span><a href="javascript://" rel="nofollow" onclick="open_rules()"></a></div> <?if($GROUP_ID$="4" or $GROUP_ID$="3")?><div id="setting_chat"><span class="hm">Управление сообщениями</span><a href="javascript://" rel="nofollow" onclick="window.open('/mchat/0-1','mchatCtrl','scrollbars=1,width=550,height=550,left=0,top=0');return false;"></a></div><?endif?> <?if($MODULE_ID$!='forum')?><div id="online_counter" onclick="open_oline_list()"><span class="hm">Пользователи онлайн</span><span id="onlCount"></span></div><?endif?> <div id="bottom_chat" onclick="hide_chat()"><span>−</span>Мини-чат</div><div id="top_chat" onclick="show_chat()"><span>+</span>Мини-чат</div> <div id="cht" onclick="show_chat()"><div class="ngd"><div id="wrapper2" class="scroll-pane"><div id="scroller" class="comm"></div></div></div> <?if($USER_LOGGED_IN$)?> <!--smiles--> <?if($GROUP_ID$='1_000' || $GROUP_ID$='2_000' || $GROUP_ID$='255_000')?><?else?> <div class="smile_in"> <div class="ch_sml"> <div class="ch_smlin"> <img src="/smiles/smile.gif" onclick="smiles(':)')" alt="" /> <img src="/smiles/wink.gif" onclick="smiles(';)')" alt="" /> <img src="/smiles/laugh.gif" onclick="smiles(':D')" alt="" /> <img src="/smiles/cool.gif" onclick="smiles('B)')" alt="" /> <img src="/smiles/sad.gif" onclick="smiles(':(')" alt="" /> <img src="/smiles/cry.gif" onclick="smiles(':cry:')" alt="" /> <img src="/smiles/care.gif" onclick="smiles('^_^')" alt="" /> <img src="/smiles/tease.gif" onclick="smiles(':p')" alt="" /> <img src="/smiles/shock.gif" onclick="smiles('%)')" alt="" /> <img src="/smiles/angel.gif" onclick="smiles('0:)')" alt="" /> <img src="/smiles/eye.gif" onclick="smiles(':eye:')" alt="" /> <img src="/smiles/angry.gif" onclick="smiles('>(')" alt="" /> <img src="/smiles/fools.gif" onclick="smiles(':fools:')" alt="" /> <img src="/smiles/please.gif" onclick="smiles(':please:')" alt="" /> <img src="/smiles/desman.gif" onclick="smiles(':des:')" alt="" /> <img src="/smiles/xd.gif" onclick="smiles(':xD:')" alt="" /> <img src="/smiles/like.gif" onclick="smiles(':like:')" alt="" /> <img src="/smiles/unlike.gif" onclick="smiles(':unlike:')" alt="" /> <img src="/smiles/ok.gif" onclick="smiles(':ok:')" alt="" /> <img src="/smiles/peace.gif" onclick="smiles(':peace:')" alt="" /> <img src="/smiles/clups.gif" onclick="smiles(':clups:')" alt="" /> </div></div> <span> </span></div> <?endif?> <?endif?> <div class="chtt"><?if(!$USER_LOGGED_IN$)?><div class="clkg"><a href="$LOGIN_LINK$">Необходима авторизация</a></div><?else?>$CHAT_BOX$<?endif?></div></div> <div id="c_one_clon">0</div><div id="c_tell"></div> </div>
<div id="onlCountDate">$ONLINE_COUNTER$</div>
<script type="text/javascript"> $('#onlCount').html($('#onl1 b').html()) function open_oline_list() {new _uWnd('UserList','Сейчас онлайн',240, 152,{modal:1,autosize:0,resize:0,notaskbar:1,fadetype:1,fadespeed:500,fadeclosetype:1,fadeclosespeed:500,align:'left'},'<fieldset class="sortUserlist"><legend>Сводка:</legend><div>$ONLINE_COUNTER$</div></fieldset>')} function open_rules() {new _uWnd('UserList','Правила чата',330, 190,{modal:1,autosize:0,resize:0,notaskbar:1,fadetype:1,fadespeed:500,fadeclosetype:1,fadeclosespeed:500,align:'left'},'<p><b>В чате запрещены:</b></p><ul><li>спам;</li><li>мат;</li><li>повторные сообщения;</li><li>ссылки на сторонние ресурсы;</li><li>любая реклама.</li></ul><p><a href="https://yraaa.ru/scripts/mini-chat-ot-yraaa" target="_blank">Хочу такой чат</a></p>')}
var wActive = '1'; $(window).blur(function() {wActive = '0'}); $(window).focus(function() {wActive = '1'});
function otbet(xt) {$('#mchatMsgF').val(''+xt+', ');$('#mchatMsgF').focus()} function smiles(tx) { $('#mchatMsgF').val($('#mchatMsgF').val()+' '+tx+' ') $('#mchatMsgF').focus() } function show_chat() { $('.chat_over').animate({bottom:'20px'},200) $('#top_chat').fadeOut(200,function(){$('#bottom_chat').fadeIn(200)}) setCookie('chat', '1', 10, "/")} function hide_chat() { $('.chat_over').animate({bottom:'-182px'},200) $('#bottom_chat').fadeOut(200,function(){$('#top_chat').fadeIn(200)}) setCookie('chat', '0', 10, "/")} function show_profile(nmm) { document.location.href='/index/8-'+nmm }
function sound_on() { $('.sound_off').fadeOut(200, function(){$('.sound_on').fadeIn(200)});setCookie('musics', 'on', 10, "/") }
function sound_off() { $('.sound_on').fadeOut(200, function(){$('.sound_off').fadeIn(200)});setCookie('musics', 'off', 10, "/") }
musics = getCookie('musics')
if(musics == 'off') {$('.sound_off').show();$('.sound_on').hide()}
function messages() { $.get('/mchat/', function(dt){ if(wActive==1) { <?if($USER_LOGGED_IN$)?><?if($GROUP_ID$!='1_000' || $GROUP_ID$!='2_000' || $GROUP_ID$!='255_000')?>if($('#c_one_clon').html() != $('#c_one', dt).html() && $('#c_one_clon').html() != '0' && $('#c_one_clon').html() != '' && getCookie('musics') != 'off') {$('#c_tell').html('<audio src="/chat_files/n.mp3" autoplay></audio>');setTimeout(function(){$('#c_tell').html('')},2000)}<?endif?><?endif?> }
setTimeout(function(){$('#c_one_clon').html($('#c_one', dt).html());$('.message_fadein').eq(0).slideDown(200);},2100)
$('#scroller').html($('div.msg', dt).after()); setTimeout(function(){$('.message_fadein').fadeIn(200);$('#wrapper2').fadeIn(200);jQuery('#wrapper2').jScrollPane();},200) $('.comm_id$USER_ID$').addClass('myBubble');$('.comm_id$USER_ID$ .l_it').hide(); }); $('#mchatC1F').val('<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/chat_files/noavatar.gif<?endif?>') setTimeout(function(){messages()},20000) $('.message_fadein').eq(0).slideDown(200); } messages();
chtcc = getCookie('chat'); if(chtcc == '1') {$('.chat_over').css('bottom', '20px');$('#top_chat').hide();$('#bottom_chat').show()}
$('.chat_over').mouseover(function(){ document.onmousewheel = function (e) {e.preventDefault();} })
$('.chat_over').mouseout(function(){document.onmousewheel = ''}) </script>
6. С помощью Редактора смайлов установите предложенные смайлы (выбирайте из папки smiles и задавайте код вызова):
Следует отметить:
Кнопку «Управление сообщениями» видит только администрация сайта; Новые сообщения появляются в режиме реального времени; При наведении на сообщение показывается дата, время и кнопка для ответа. Для сегодняшних сообщений дата не показывается; Звуковое оповещение издает только активная вкладка сайта.
Чат установлен. Вот из чего он состоит:
Кастомизация Создали интернет-магазин, установили качественный шаблон, добавили множество товаров, установили разумные цены, а клиентов все еще нет? Удобный, простой, качественный конструктор, который находится в топе среди бизнесменов, которые ведут свой бизнес в интернете, в статье расскажу о всех преимуществах и дам рекомендации.
Всего одна картинка может придать чату собственный стиль.
В CSS для класса «chat_over» замените:
Код background:rgba(0,0,0,0.6);
на (меняйте ссылку изображения на свою):
Код background:url('http://subtlepatterns.com/patterns/tweed.png');
По умолчанию чат находится справа внизу, предлагаем готовые решения для смены позиции.
Слева:
А вот так по центру:
Код left:calc(50% - 156px);left:-webkit-calc(50% - 156px);left:-moz-calc(50% - 156px);
|
|
| |