Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Оповещение о новых сообщениях на форуме
Оповещение о новых сообщениях на форуме
AndreyДата: Понедельник, 09.12.2013, 14:16:25 | Сообщение # 1
Технарь
Offline
3

Этот скрипт позволит выводит уведомление о новых сообщениях форума в стильном Аякс окошке.

И так позвольте мне рассказать о всех новшиствах данного скрипта

1)скрипт теперь отличает новую тему от нового сообщения.
2)появились настройки скрипта(включить\выключить звук и включить\выключить само оповещение).
3)Кнопка закрытия уведомления заменена кнопкой вызова настроек.
4)немного изменена сама структура уведомления и упрощен его вид.
5)название темы и само сообщение теперь обрезаются если превышают заданные размеры.

Для правильной работы скрипта нам нужно в настройках сайта включить API, для этого мы идём в ПУ->Настройки->Общие настройки->Использование API

Теперь на страницах где хотите видеть уведомления после </body> ставим:
Код
<div class="NotifySettingsDiv"><div class="NotifySettingsBlock"><div class="SettingHeader">Настройки оповещения<span class="NotifyBoxClose NotifySettings"><span class="NotifyBoxCloseLink"></span></div><div class="SettingBody"><div class="store">Выключить звук</div><div class="note">Выключить оповещение</div></div></div></div>    
    <div class="NotifyBox"><div class="NotifyBoxMessage"><span class="NotifyBoxSettings"><span class="NotifyBoxSettingsLink"></span></span><div class="NotifyTitle">Новое сообщение от <span id="NotUser"></span></div><table><tr><td valign="top"><div class="NotifyAvatar"></div></td><td valign="top"><div class="NotifyText"><div id="NotTitle"></div><div id="NotPost">загрузка..</div></div></td></tr></table></div></div>    
    <script>$(function() {    

    var PostLetters = 150, // Число символов сообщения, выводимых в уведомлении    
    TitleLetters = 37, // Число символов названия темы, выводимых в уведомлении    
    AvatarPath = '/images/noavatar.png'; // Адрес картинки "Нет аватара"    

    if (!(localStorage.getItem("note"))) {    
    var ForumApi = $.ajax({type: 'GET', url: '/api/forum/0-0-1-34', dataType: 'xml', async: false}).responseText;     
    var fla = $(ForumApi).find('member:contains("TOPIC_NAME")').first().find('string').text();    
    var flb = $(ForumApi).find('member:contains("REPLIES_NUM")').first().find('i4').text();    

    setInterval(function() {    
    var ForumApiNew = $.ajax({type: 'GET', url: '/api/forum/0-0-1-34', dataType: 'xml', async: false}).responseText;     
    var ForumTitle = $(ForumApiNew).find('member:contains("TOPIC_NAME")').first().find('string').text();    
    var ForumCount = $(ForumApiNew).find('member:contains("REPLIES_NUM")').first().find('i4').text();    
    if (!(ForumTitle == fla && ForumCount == flb)) {fla = ForumTitle; flb = ForumCount;    
    if (ForumTitle.length > TitleLetters) {ForumTitle = ForumTitle.substring(0,TitleLetters)+'...'}    
    if (ForumCount == 0) {$('.NotifyTitle').html('Новая тема от <span id="NotUser"></span>')}    
    var ForumUser = $(ForumApiNew).find('member:contains("LASTPOST_AUTHOR")').first().find('string').text(); $('#NotUser').html(ForumUser);    
    var ForumPost = $(ForumApiNew).find('member:contains("LASTPOST_LINK")').first().find('string').text(); $('#NotPost').load(ForumPost+' .ForumPost:last', function() {if ($(this).html().length > PostLetters) {$('#NotPost').html( $(this).html().substring(0,PostLetters)+"..." )}});    
    $('#NotTitle').html('Тема: <a href="'+ForumPost+'" id="NotifyLink">'+ForumTitle+'</a>');    
    var AvatarApi = $.ajax({type: 'GET', url: '/api/index/8-0-'+ForumUser, dataType: 'xml', async: false}).responseText;    
    var ForumAvatar = $(AvatarApi).find('member:contains("USER_AVATAR")').find('string').text();    
    if (ForumAvatar.length) {$('.NotifyAvatar').html('<a href="/index/8-0-'+ForumUser+'"><img src="'+ForumAvatar+'"></a>');} else {$('.NotifyAvatar').html('<a href="/index/8-0-'+ForumUser+'"><img src="'+AvatarPath+'"></a>');}    
    $('.NotifyBox').animate({height:'toggle',opacity:'toggle'}, 400).delay(10000).animate({height:'toggle',opacity:'toggle'}, 400);    
    if (!(localStorage.getItem("sound"))) {$('#player').remove(); $('body').append('<embed id="player" type="application/x-shockwave-flash" src="http://s45.ucoz.net/flash/audio1.swf?song_url=/alert.mp3&autoplay=1&loop=0" width="0" height="0" hidden="true">');}    
    };}, 30000);}    

    if (localStorage.getItem("sound")) {$('.store').addClass('storeoff').removeClass('store')}    
    if (localStorage.getItem("note")) {$('.NotifyActivate').show().click(function(){localStorage.removeItem('note'); $(this).html('Оповещения успешно включены')})}    
    $('.NotifySettingsDiv').css({left:($(window).width()-$('.NotifySettingsDiv').width())/2,top:($(window).height()-$('.NotifySettingsDiv').height())/2}).delegate('.store', 'click', function(){localStorage.setItem('sound', 'setting'); $(this).addClass('storeoff').removeClass('store').html('Включить звук')}).delegate('.storeoff', 'click', function(){localStorage.removeItem('sound'); $(this).addClass('store').removeClass('storeoff').html('Выключить звук')}).delegate('.note', 'click', function(){localStorage.setItem('note', 'setting'); $(this).addClass('noteoff').removeClass('note').html('Включить уведомления')}).delegate('.noteoff', 'click', function(){localStorage.removeItem('note'); $(this).addClass('note').removeClass('noteoff').html('Выключить уведомления')}).hover(function(){$('.NotifyBoxClose').fadeIn(100)},function(){$('.NotifyBoxClose').fadeOut(100)});    
    $('.NotifyBoxSettings').click(function(){$('.NotifySettingsDiv').fadeIn(200)});    
    $('.NotifyBoxClose').click(function(){$('.NotifySettingsDiv').css('display', 'none')});    
    $('.NotifyBoxMessage').hover(function(){$('.NotifyBoxSettings').fadeIn(100)},function(){$('.NotifyBoxSettings').fadeOut(100)});    
    });</script>


Идём в CSS и ставил стиль нашему окошку:
Код
.NotifyBox{position:fixed;bottom:5px;right:5px;z-index:9999;display:none;}    
    .NotifyBoxMessage{background:none repeat scroll 0 0 rgba(0, 0, 0, 0.75);border-radius:5px;moz-border-radius:5px;webkit-border-radius:5px;box-shadow:0 2px 15px #000;moz-box-shadow:0 2px 15px #000;webkit-box-shadow:0 2px 15px #000;color:#FFF;cursor:pointer;text-shadow:0 1px 0 #262626;width:320px;font-family:tahoma,arial,verdana,sans-serif,Lucida Sans;font-size:11px;margin-bottom:5px;overflow:hidden;padding:7px;}    
    .NotifyBoxClose,.NotifyBoxSettings{background:#000;display:none;border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;box-shadow:0 0 2px #111;moz-box-shadow:0 0 2px #111;webkit-box-shadow:0 0 2px #111;padding:5px;float:right;}    
    .NotifyBoxSettings{margin:3px 3px 0 15px}    
    .NotifyBoxCloseLink{display:block;background:url("/images/notifier_close.gif") no-repeat scroll 0 0 transparent;width:7px;height:7px;}    
    .NotifyBoxSettingsLink{display:block;background:url("/images/setting.png") no-repeat scroll 0 0 transparent;width:10px;height:10px}    
    .NotifyTitle{font-size:12px;font-weight:bold;margin-bottom:8px;margin-top:3px;margin-left:3px;}    
    .NotifyAvatar{border-radius:3px;moz-border-radius:3px;webkit-border-radius:3px;box-shadow:0 1px 2px #111111;moz-box-shadow:0 1px 2px #111111;webkit-box-shadow:0 1px 2px #111111;line-height:0;overflow:hidden;}    
    .NotifyAvatar img{width:50px;max-height:50px;}    
    .NotifyText{margin-left:6px;margin-top:1px;}    
    #NotTitle,#NotTitle a{color:#BBB}    
    .NotifySettingsDiv{font-family: arial,tahoma,verdana,sans-serif,Lucida Sans;font-size:11px;z-index:1200;position:fixed;display:none}    
    .NotifySettingsBlock{background: none repeat scroll 0 0 rgba(0, 0, 0, 0.75);border-radius: 5px 5px 5px 5px;box-shadow: 0 2px 15px #888888;color: #FFFFFF;cursor: pointer;line-height: 160%;padding: 15px;text-shadow: 0 1px 0 #262626;width: 380px;}    
    .SettingHeader{font-size: 1.09em;font-weight: bold;padding-bottom: 5px;}


И ссылку которая будет включать наше оповещение, если оно выключено:
Код
<span class="NotifyActivate" style="display:none">Включить оповещение</span>


Заливаем к себе на хост файлы

Всё, теперь вы будете всегда в курсе последних обновлений на форуме!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Оповещение о новых сообщениях на форуме
Страница 1 из 11
Поиск: