[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Аватар и данные при наведении на ник для онлайн пользователе
FrAiDeRДата: Среда, 11.05.2011, 21:05 | Сообщение # 1
FrAiDeR
Логин: FrAiDeR
Имя: артем fraider
Сообщений: 314
Награды: 7
Репутация: 29
Замечания:
Offline

Представляю Вам скрипт "Аватар и данные при наведении на ник для онлайн пользователей V.3(как на DLE)"
Я уже делал скрипты подобного рода ,но для онлайн статистики еще не делал никогда. И вот сделал,смотрите что получилось...
Что нам нужно для установки скрипта:

1. Как и в предидушем скрипте будем использовать вывеление данных при помощи jquery.tooltip.js.
Скачиваем архив , распаковываем и заливаем содержимое (java скрипт) в корень сайта:

http://letitbit.net/downloa....ar.html

2. Ставим в CSS (таблица стилей Вашего сайта) следуещее:

Code
/* Avatar */  
  #tooltip {  
  width: 200px;  
  position: absolute;  
  z-index: 1;  
  border: 1px solid #989790;  
  background-color: #fff;  
  font-family: Arial;  
  color: #000;  
  padding: 5px 10px 5px 10px;  
  opacity: 1.0;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
  border: 1px solid #989790;  
  border-radius: 5px;  
  }  
  /*------------------------*/

3. Далее в блок с онлайн статистикой в самый верх ставим следующий код:
Code
<script src="/jquery.tooltip.js" type="text/javascript"></script>  
  <script type="text/javascript">  
  $(function() {  
  $('#tooltiper a').tooltip({  
    track: false,  
    delay: 0,  
    showURL: false,  
    fade: 200  
  });  
  });  
  </script>

Внимание! Если вы уже поставили себе мой пршлый "Аватар и данные о пользователе при наведении на ник V.2 (как на DLE)" скрипт , то пропустите действие 1 , 2 и 3.

4. Заменяем

Code
$ONLINE_USERS_LIST$

на
Code
<div id="tooltiper">  
  <div id="avat">  
  $ONLINE_USERS_LIST$  
  </div>  
  </div>  
  <script type="text/javascript">  
  r=document.getElementById('avat').getElementsByTagName('a');  
    for(j=0; j<r.length;j++) {  
    r[j].className = ''+r[j].innerHTML+'';  
  }  
  </script>

5. Теперь нам нужно откуда-то взять все данные ,которые будут выводиться в подсказке. Для этого создаём информер (информеры)
И вот здесь то большим недостатком становится ограничение колличества выводимых материалов до 300 в информерах сайтов на ucoz...
- Для сайтов с колличеством пользователей до 600 всё очень просто:
если ползователей до 300 ,создаем информер Пользователи--->Способ сортировки дата регистрации А--->Количество материалов 300;
если ползователей до 600 ,создаем первый информер Пользователи--->Способ
сортировки дата регистрации А--->Количество материалов 300 и второй информер Пользователи--->Способ
сортировки дата регистрации D--->Количество материалов 300;

- Для сайтов с колличеством пользователей более 600 создаем колличество информеров по своему усмотрению,при этом сортируем пользователей тоже посвоему усмотрению.
Я посоветовал бы так:
- создать информер (информеры) куда вошли бы администраторы,модераторы,журналисты и т.д....все кроме простых пользователей
- создать еще одну группу,назвать её тоже Пользователи и при помощи "Массового переноса пользователей" в админке перенести в неё всех неактивных,к примеру кто посетил последний раз сайт полгода или год назад...туда попадут все "мертвые души"
- а основную оставшуюся группу Пользователей посортировать информерами уже как вам угодно

Может Вы придумаете способ лучшей сортировки.Информеров можно сделать ровно столько,сколько вам позволяет ваш сайт (максимум 30 за исключением тех которые у вас есть)

6. После всего этого в шаблон информера (шаблоны информеров) вставляем следующий код

Code
<script type="text/javascript">  
  e=document.getElementsByTagName('A');    
  for(k=0; k<e.length;k++) {    
  if(e[k].className=="$USERNAME$"){    
  e[k].title = "<center><?if($AVATAR_URL$)?><img src=$AVATAR_URL$ height='100' width='100' border='0'><?else?><img src='http://romale80.ucoz.ru/noavatar.gif.png' border='0' height='100' width='100'><?endif?></center><br><span style='font-size: 8pt;font-weight:normal;'><b>Ник на сайте:</b> $USERNAME$<br><b>Пол:</b> $GENDER$<br><b>Группа:</b> $GROUP_NAME$<br><b>Страна:</b> $COUNTRY$<br><b>С нами с</b> <?if($USERNAME$='admin')?>03.09.2009<?else?>$REG_DATE$<?endif?><br><b>Опубликовал новостей:</b> $NEWS_POSTS$ шт.</span>";  
  e[k].innerHTML = '<?if($GROUP_ID$==1)?><font color="blue"><?endif?>  
  <?if($GROUP_ID$==2)?><font color="green"><?endif?>  
  <?if($GROUP_ID$==3)?><font color="yellow"><?endif?>  
  <?if($GROUP_ID$==4)?><font color="red"><?endif?>  
  <?if($GROUP_ID$==251)?><font color="orange"><?endif?>  
  <?if($GROUP_ID$==255)?><font color="gray"><?endif?>  
  $USERNAME$</font>';    
  }}    
  </script>

Коды информеров ставим перед </body>(я поставил в нижний контейнер) только не ввиде кода вызова информера,а в виде java скриптов инфориеров для того чтоб в итоге не получить киллометровый код страницы(в админке кликните на название информера и получите код,для тех кто не вкурсе)
Вот впринципе и всё!!!
Да и еще я добавил в скрипт возможность сделать всплывающую подсказку с аватаром и данными для информера пользователей посетивших сайт сегодня.
Для этого нужно создать информер пользователей посетивших сайт сегодня и вставить в его шаблон код (при условии если вы всё сделали для онлайн статистики)
Code
<a href="$PROFILE_URL$" class="$USERNAME$1">$USERNAME$</a>

Успешно протестировано на сайтах автора в браузерах Firefox 4,Opera 10, IE 8,Safari,Google Chrome и Рамблер Нихром

Картинки на noavatar ставим свои


бла...бла...бла...
  • Страница 1 из 1
  • 1
Поиск: