Описание
Как я уже говорил
Система уровней пользователей без визуальной части.
По этому я решил создать парочку визуальных частей для своего скрипт.
Первым будет вот этот, довольной простой вид - в виде прогресс-бара.
Довольно просто и со вкусом.. Перейдём же к установке.
Установка: Сначала нужно поставить вот этот скрипт на свой сайт:
Система уровней пользователей для uCoz Данный код добавить в нужное место, на странице пользователя.
ПУ >
Управление дизайном >
Страница пользователя Код
<div class="brogress-bar">
<div class="line"></div>
<div class="text">0%</div>
</div>
Данный код добавить
после системы уровня, там же - на странице пользователя
Код
<script>
var progBar = (($scoreSL / $NextLS)*100);
$('.brogress-bar .line').css('width', progBar+'%');
var progBar = Math.round(progBar);
$('.brogress-bar .text').text(progBar+'%');
</script>
И это в CSS
ПУ >
Управление дизайном >
Таблица стилей (CSS):
Код
.brogress-bar {display: block; width: calc(100% - 4px); height: calc(30px - 4px); border-radius: 30px; border: 2px solid #fff; position: relative;} /* -4px - потому что border 2px, с одной стороны, а их две */
.brogress-bar .line, .brogress-bar .text {display: block; position: absolute; top: 2px; right: 2px; bottom: 2px;}
.brogress-bar .line {background: #fff; max-width: calc(100% - 4px); left: 2px; border-radius: 30px;}
.brogress-bar .text {height: calc(30px - 4px - 4px); line-height: calc(30px - 4px - 4px); color: #07f; padding-right: 5px; cursor: default;} /* -4px - потому что border 2px, с одной стороны, а их две + ещё -4px, потому что top и bottom так же по 2px с обеих сторон */
Важно
При копирование материала
указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка:
http://pandora.clan.su/publ/1-1-0-50
Автором материала является:
Denis Minov (CbIPoK2513)
Лицензия
GNU GPL от 2018 года.
