• Страница 1 из 1
  • 1
Мини-чат 2.0 для uCoz от Урааа
Pasan не в сети0:01 AM | Сообщение # 1
Админ
Администраторы
Сообщений: 100
Награды: 0
Репутация: 0


Новая версия мини-чата для 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:20px;


    А вот так по центру:

    Код
    left:calc(50% - 156px);left:-webkit-calc(50% - 156px);left:-moz-calc(50% - 156px);




  • профиль сайт
    • Страница 1 из 1
    • 1
    Поиск: