Kosten | Суббота, 01 Июля 2017, 22:27 | Сообщение 1 |
| Красивое оповещение, где с появлением окна, которое идет в самом сообщение и плюс стильный эффект появление. Здесь буде выводиться аварат и название темы, где по клику переходите. По умолчанию будет появляться с правой стороны выше немного центра. Оно сильно отличается от стандартных, которые есть в сети. Это стили, что окно можно сделать как светлым, что идет, так и темным, где при наведение появляется кнопка отключить. Если у вас еще не подключен админ бар, точнее его нет, а все по старому, то этот скрипт безусловно заменит все старые коды оповещение.
Приступаем к установке:
1. Включаем API в "Общих настройках" Панели управления.
2. Вставляем данный код в нижнюю часть сайта :
Код <!--Оповещение ЛС--> <?if($USER_LOGGED_IN$)?> <div id="one_pm" class="bounceIn animated"></div> <script type="text/javascript"> var no_ava = 'http://zornet.ru/zorner_ru_1/Abter/der/W.png'; var this_mess_link = ''; function m_reload() { if($('#one_pm').html()=='') { $.get('/index/14?'+Math.random(), function (data) { $('b.unread', data).each(function (i,index) { getLink = $(index).parent().attr("href"); this_mess_link = getLink; getText = $(index).parent().text(); getAuthorName = $(index).parent().parent().children('a').eq(1).text(); getAuthor = $(index).parent().parent().children('a').eq(1).attr("href"); getID = '#one_pm'+i; var xml = $.ajax({ type: 'GET', url: '/api/index/8-0-'+getAuthorName.replace('-','~'), dataType: 'xml', async: false }).responseText; var urlAvatar = $(xml).find('struct:first member:contains("USER_AVATAR")').find('string').text(); var userName = $(xml).find('struct:first member:contains("USER_NAME")').find('string').text(); $('#one_pm').html('<div id="one_pm'+i+'" style="display:none" class="bounceIn animated">' +'<div class="h_newpm">' +'<div class="h_npin" align="center"><a class="h_nover" href="'+getLink+'"></a>' +'<div class="h_nptitle">Новое сообщение</div><span class="h_del" onclick="h_del();return false;"></span>' +'<div class="h_npl"><div class="h_npimg"><a href="#" id="hnp_avatar"></a></div></div>' +'<div class="h_npr"><a href="#" id="hnp_author"></a> <a id="hnp_text" href="'+getLink+'">'+getText+'</a></div>' +'</div>' +'</div>' +'</div><div id="hnp_sound"></div>'); $(getID+' #hnp_author').attr('href', getAuthor); $(getID+' #hnp_avatar').attr('href', getAuthor); $(getID+' #hnp_author').html(userName); $(getID+' #hnp_avatar').html('<img src="'+ (urlAvatar == '' ? no_ava : urlAvatar )+'">'); setTimeout(function(){$(getID).slideDown(200);},200); }); }); } } function h_del() {$('#one_pm').fadeOut(200,function(){$('#one_pm').html('<i></i>')});$.get(this_mess_link);} m_reload();setInterval(function(){m_reload()}, 15000); </script> <style type="text/css"> #one_pm { position: fixed; top: 80px; right: 10px; cursor: pointer; font-family: Tahoma,Arial,Verdana,sans-srif; width: 300px;} #hnp_sound {position:absolute;top:-1000px;left:-1000px} #hnp_author span {display:none} .h_newpm { position: relative; height: 110px; margin-bottom: 20px; color: #555; padding: 8px 8px!important; background: #fff!important; border: 1px solid #8e9bb5; border-radius: 5px; } .h_npin {padding:5px;padding-top:5px} .h_nptitle {color:#555;font-size:13px;font-weight:bold;padding-bottom:0px} .h_npimg {width:57px;height:57px;overflow:hidden;-webkit-border-radius: 90px;-moz-border-radius:90px;border-radius: 90px;} .h_npimg img {width:100%;-webkit-border-radius: 90px;-moz-border-radius: 90px;border-radius: 90px;} .h_npl {position:absolute;left:13px;top:45px;z-index:3;width:70px} .h_npr {position:absolute;left:84px;top:45px;z-index:3;color:#555;font-size:13px;padding-right:14px} .h_npr #hnp_text, .h_npr #hnp_text:hover {display:block;text-decoration:none;color:#555} .h_newpm:hover .h_del {display:inline-block;} .h_del {display: none;cursor: pointer;position: absolute!important;right: 10px;top: 40px;margin: 0!important;z-index: 10014!important;width: 36px!important;height: 36px!important;background: url(http://webo4ka.ru/Ucoz8/ajax_p.png) no-repeat!important;} .h_del:hover {background-position:0px 18px} .h_nover {position:absolute;top:0px;left:0px;width:100%;height:100%;} .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
/*the animation definition*/
@-webkit-keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } }
@keyframes bounceIn { 0%, 100%, 20%, 40%, 60%, 80% { -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1); transition-timing-function: cubic-bezier(0.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); -ms-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(.9, .9, .9); -ms-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(.97, .97, .97); -ms-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } }
.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } </style> <?endif?>
| Страна: (RU) |
| |
Scheme | Воскресенье, 02 Июля 2017, 01:50 | Сообщение 3 |
| Цитата Сафрон ( ) Это самое нормальное личное сообщение. Нормально перейти на новый админ бар.
| Страна: (RU) |
| |
Kosten | Воскресенье, 02 Июля 2017, 02:09 | Сообщение 4 |
| Здесь на выбор, сне вот больше такое окно нравится и установлено, только темно прозрачное.
| Страна: (RU) |
| |