Сейчас: 30.11.2024, 06:05RSS
  • Страница 1 из 1
  • 1
Модератор форума: unLim  
Аватар и данные при наведении на ник для онлайн пользователе

Дата: Суббота, 16.04.2011, 09:22 | Сообщение # 1

stalker94







         Сообщений: 13
         Репутация: 0
         Статус: Оффлайн

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

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

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> $REG_DATE$<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>,

Код информера должен иметь такой вид
Code
<div id="tooltiper">код информера</div>

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

Ссылку на картинку на noavatar можно заменить на свою

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