» » >

Оповещение о новом лс как ВКонтакте

23.09.2013, 17:41

На одном из сайтов uCoz я обнаружил интересное решение, как вы поняли по заголовку данной темы, речь идёт о новом личном сообщении как "ВКонтакте", единственное что мне не понравилось в данном решении, так это:

- размещение аватара пользователя с левой стороны ячейки
- старая вёрстка таблицами
- css стили вписаны в html код, а не вынесены в отдельный файл

но самым главным плюсом является тот момент, что в данном решении автор задействовал API системы ucoz, что даёт нам возможность вывести аватар пользователя который отправил вам личное сообщение.

Немного повозившись с кодом я реализовал всё как надо с точки зрения юзабилити и html-css кода и так начнём...

Шаг 1 - Установка Js:

Всё что нам следует сделать, так это установить следующий js код, на вашу страницу сайта, в самый низ перед тегом </body>

JS

<script type="text/javascript">  
var no_ava = 'http://www.center-dm.ru/img/no_avatar.jpg';  
$.getScript('http://center-dm.ru/ucoz/vid_ls/v1/ls.js');</script>
Шаг 2 - Установка CSS:

Теперь нам следует выбрать один из пяти вариантов оформление данного решения для uCoz:

Белый вариант:
белый вариант оповещение о новом личном сообщении как Вконтакте
CSS-Code

/* Оповещение о новом лс как Вконтакте  
------------------------------------------*/
.news_ls1 {
  position:relative;
  z-index:9999;
}

.news_ls2 {
  position:fixed;
  bottom:5px;
  right:5px;
}

.uContent{
  overflow: hidden;  
  display:none;
  margin-bottom:10px;
  width:300px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/fon_uContent_White.png);
  padding:5px 10px 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius:5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
}

.uContent_l {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#555; text-shadow: 1px 1px 1px #fff; font-weight: bold;
}
   
.uContent_p {float:right;}
.uContent_c {
  float:left;
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;
  width:300px;
  padding: 5px 0px 0px 0px;  
}
   
.uPm-close {
  width:18px;
  height:18px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/knopka_closse_White.png) no-repeat;
}

.uPm-close:hover {
  background-position:0px -18px;
}
   
.uContent_c img {
  float:right;
  width:45px;
  height:45px;
  border:1px solid #a7a7a7;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;
}

.uContent_c span {
  color:#547ec4;  
}
.uContent_c p {
  padding:0;  
  margin: 5px 0px 0px 0px;  
}

.uContent_c a:link,  
.uContent_c a:visited {color:#555;}
.uContent_c a:hover {color:#4a6ca5;}
/* -------------------------------------- */
Чёрный вариант:
чёрный вариант оповещение о новом личном сообщении как Вконтакте
CSS-Code

/* Оповещение о новом лс как ВКонтакте  
------------------------------------------*/
.news_ls1 {
  position:relative;
  z-index:9999;
}

.news_ls2 {
  position:fixed;
  bottom:5px;
  right:5px;
}

.uContent{
  overflow: hidden;  
  display:none;
  margin-bottom:10px;
  width:300px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Black.png);
  padding:5px 10px 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius:5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
}

.uContent_l {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#a7a7a7; text-shadow: 1px 1px 1px #252525; font-weight: bold;
}
   
.uContent_p {float:right;}
.uContent_c {
  float:left;
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;
  color:#a7a7a7;
  width:300px;
  padding: 5px 0px 0px 0px;  
}
   
.uPm-close {
  width:18px;
  height:18px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/knopka_closse_Black.png) no-repeat;
}

.uPm-close:hover {
  background-position:0px -18px;
}
   
.uContent_c img {
  float:right;
  width:45px;
  height:45px;
  border:1px solid #838383;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#646464;
}

.uContent_c span {
  color:#8fbbe9;  
}
.uContent_c p {
  padding:0;  
  margin: 5px 0px 0px 0px;  
}

.uContent_c a:link,  
.uContent_c a:visited {color:#f7f7f7;}
.uContent_c a:hover {color:#bdbdbd;}
/* -------------------------------------- */

Синий вариант:
Синий вариант оповещение о новом личном сообщении как Вконтакте
CSS-Code

/* Оповещение о новом лс как Вконтакте  
------------------------------------------*/
.news_ls1 {
  position:relative;
  z-index:9999;
}

.news_ls2 {
  position:fixed;
  bottom:5px;
  right:5px;
}

.uContent{
  overflow: hidden;  
  display:none;
  margin-bottom:10px;
  width:300px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Blue.png);
  padding:5px 10px 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius:5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
}

.uContent_l {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#6e87c6; text-shadow: 1px 1px 1px #fff; font-weight: bold;
}
   
.uContent_p {float:right;}
.uContent_c {
  float:left;
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;
  color:#555;
  width:300px;
  padding: 5px 0px 0px 0px;  
}
   
.uPm-close {
  width:18px;
  height:18px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/knopka_closse_Blue.png) no-repeat;
}

.uPm-close:hover {
  background-position:0px -18px;
}
   
.uContent_c img {
  float:right;
  width:45px;
  height:45px;
  border:1px solid #99bee4;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;
}

.uContent_c span {
  color:#43983f;  
}
.uContent_c p {
  padding:0;  
  margin: 5px 0px 0px 0px;  
}

.uContent_c a:link,  
.uContent_c a:visited {color:#555;}
.uContent_c a:hover {color:#999;}
/* -------------------------------------- */
Зелёный вариант:
Зелёный вариант оповещение о новом личном сообщении как Вконтакте
CSS-Code

/* Оповещение о новом лс как Вконтакте  
------------------------------------------*/
.news_ls1 {
  position:relative;
  z-index:9999;
}

.news_ls2 {
  position:fixed;
  bottom:5px;
  right:5px;
}

.uContent{
  overflow: hidden;  
  display:none;  
  margin-bottom:10px;
  width:300px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/fon_uContent_Green.png);
  padding:5px 10px 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius:5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
  box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.70);
}

.uContent_l {
  float:left;
  font: 11px Verdana,Arial,Helvetica, sans-serif;
  color:#1dbb19; text-shadow: 1px 1px 1px #fff; font-weight: bold;
}
   
.uContent_p {float:right;}
.uContent_c {
  float:left;
  font: 100%/1.0 Verdana,Arial,Helvetica, sans-serif;
  color:#555;
  width:300px;
  padding: 5px 0px 0px 0px;  
}
   
.uPm-close {
  width:18px;
  height:18px;
  background:url(http://center-dm.ru/ucoz/vid_ls/v1/knopka_closse_Green.png) no-repeat;
}

.uPm-close:hover {
  background-position:0px -18px;
}
   
.uContent_c img {
  float:right;
  width:45px;
  height:45px;
  border:1px solid #77ca79;  
  padding: 3px;  
  margin: 0px 0px 10px 15px;  
  background:#fff;
}

.uContent_c span {
  color:#5976c0;  
}
.uContent_c p {
  padding:0;  
  margin: 5px 0px 0px 0px;  
}

.uContent_c a:link,  
.uContent_c a:visited {color:#555;}
.uContent_c a:hover {color:#999;}
/* -------------------------------------- */
Примечание:

Для того чатобы аватар пользователя который отправил вам личное сообщение стал отображаться, вам следует включить API в админ панели uCoz, для этого заходим в:

Админ панель => Настройки => Общие настройки => Разрешить использование API

на этом всё...

Категория: jQuery и JS | Добавил: tashkent97
Просмотров: 805 | Загрузок: 0 | Источник: center-dm.ru | Рейтинг: 5.0/2
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<