|
Новые пользователи
|
Активные пользователи
|
Скрипт информера - команда сайта для Ucoz
 |
Добавил: Liga
Категория: Скрипты для Ucoz
Просмотров: 118
Мне нравится 0 |
Что делает скрипт:
- Выводит, указанных вами, пользователей.
- Показывает кто из них онлайн\оффлайн.
- Этого вполне достаточно.
Установка:
1) В нужное для вас место, вставьте этот код:
Код
<div class="IOT">
<div class="title">Команда сайта онлайн</div> <!--Шапка-->
<div class="users"></div> <!--Сюда выводятся пользователи-->
<div class="draft" style="display:none"></div> <!--Не удалять-->
</div>
<script>
var teamArr = [1,2,3];
for (var i=0; i<teamArr.length; i++) {
var userBlock = $('.IOT .draft').load('/index/8-'+teamArr[i]+' .IOT-cart',function(){
userBlockHtml = $(this).html();
if(userBlockHtml) {
$('.IOT .users').append(userBlockHtml);
}
$('.IOT .draft').html('');
});
}
</script>
Это сам код информер:
Обратите внимание: teamArr = [1,2,3] - в квадратные скобки, через запятую, указываем ID тех, кто является частью команды сайта, чтобы он выводился в блок.
2) Далее заходим в ПУ > Управление дизайном > Персональная страница пользователя и вставьте после данный код:
Код
<?if($_GROUP_ID$=4 || $_GROUP_ID$=3)?>
<div style="display:none">
<div class="IOT-cart <?if($_LOGGED_IN$)?>IOT-online<?endif?>" title="Пользователь <?ifnot($_LOGGED_IN$)?>не<?endif?> в сети">
<a href="/index/8-$_USER_ID$" target="_blank">
<div class="IOT-ava">
<?if($_AVATAR$)?>$_AVATAR$<?else?><img src="<?if($_AVATAR_URL$)?>$_AVATAR_URL$<?else?>/img/noava.png<?endif?>"><?endif?>
</div>
<div class="IOT-info">
<div class="IOT-name"><?if($_USERNAME$)?>$_USERNAME$<?else?>$_NAME$<?endif?></div>
<div class="IOT-group IOT-group-color_$_GROUP_ID$">$_GROUP_NAME$</div>
</div>
</a>
</div>
</div>
<?endif?>
Этот будет выводить блок пользователя.
Обратите внимание: - внутри условия указывается ID группы, к которой относится пользователь.
3) Таблица стилей CSS
Код
.IOT {display: block; width: 100%; background: #fff;}
.IOT .title {display: block; width: calc(100% - 20px); padding: 10px; font-size: 1.25em; color: #333; border-bottom: 1px dotted #666; margin-bottom: 10px;}
.IOT .users {display: block; width: calc(100% - 16px); padding: 0 8px 10px;}
.IOT .draft {display: none !important;}
.IOT .IOT-cart {display: block; width: 100%; height: 50px; margin-bottom: 10px; cursor: pointer; border-radius: 50px; border: 2px solid transparent;}
.IOT .IOT-cart a {text-decoration: none !important;}
.IOT .IOT-cart:hover {background-color: #cce5f6; border-color: #cce5f6;}
.IOT .IOT-cart:last-child {margin-bottom: 0;}
.IOT .IOT-ava, .IOT .IOT-info {display: inline-block; float: left;}
.IOT .IOT-ava {width: 46px; height: 46px; margin-right: 5px; border: 2px solid #999; position: relative; border-radius: 100%;}
.IOT .IOT-ava::before {content: ''; display: block; background-color: #999; width: 10px; height: 10px; border: 2px solid #fff; position: absolute; bottom: 0; right: 0; border-radius: 100%;}
.IOT .IOT-cart:hover .IOT-ava::before {border-color: #cce5f6;}
.IOT .IOT-ava img {width: 100%; height: 100%; object-fit: cover; border-radius: 100%;}
.IOT .IOT-info {width: calc(100% - 60px); color: #333; padding: 5px 5px 5px 0;}
.IOT .IOT-name, .IOT .IOT-group {display: block; height: 20px; line-height: 20px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.IOT .IOT-name {}
.IOT .IOT-group {}
.IOT .IOT-group-color_4 {color: #e74c3c;} /* default ID admin */
.IOT .IOT-group-color_3 {color: #5b48a2;} /* default ID moder */
.IOT .IOT-cart.IOT-online .IOT-ava {border-color: #2ecc71;}
.IOT .IOT-cart.IOT-online .IOT-ava::before {background-color: #2ecc71;}
Теги материала:
Вход на сайт
Мини-чат
Популярные файлы
Последний скрипт
Последний скрипт
| Скрипт информера - команда сайта для Ucoz |
Новое на форуме
Последние комментарии
Администрация не несёт ответственности за содержащие файлы на данном портале.
Все материалы на сайте принадлежат исключительно их владельцам!
Хостинг от uCoz
Все материалы на сайте принадлежат исключительно их владельцам!
Хостинг от uCoz
