info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ Сообщений: 2 ]  Просмотры: 908

Автор Сообщение
Не в сети
(Андрей)  
 BBCode Progress
Администратор
Аватара пользователя

Стаж: 8 лет 6 месяцев 7 дней
Сообщения: 1223
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


недавно мне понадобился код вывода на страничку "полоски прогресса", то есть я переделывал один модуль и чтобы пользователи были в курсе того, как движется работа, я "нарисовал" полоску прогресса с выводом данных.
для удобства применения я её оформил как bbcode.
вот решил поделиться. вдруг кому и пригодится такой небольшой хак. :)


выглядеть будет примерно так:

56%


Разумеется, это "полный конструктор", как я обычно и предлагаю. все параметры очень легко поменять.

вот так, например, может выглядеть "тёмный вариант":

56%


в общем - всё в ваших руках. экспериментируйте.

создаётся он так (светлый вариант):

Использование BBCode

Код: Выделить всё

[progress={NUMBER}]{TEXT}[/progress]


Замена HTML

Код: Выделить всё

<div style="position:relative;width:600px;height:50px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:{NUMBER}%;height:50px;background:#32CD32;"></div>
<span style="position:absolute;top:20px;left:200px;color:black;font-size:1.2em;font-weight:normal">{TEXT}</span>
</div>


Подсказка

Код: Выделить всё

[progress=проценты]текст[/progress]



теперь пояснения:

по коду html:

Цитата:
width:600px;height:50px; - ширина и высота основного блока
background:white; - цвет основного блока (белый)
padding:5px; - отступ внутри блока (расстояние до полоски)
border:1px solid #c1c1c1; - бордер, "окантовка" основного блока (серый)

width:{NUMBER}%; - установка пользователем (в процентах) длины индикатора полоски
height:50px; - ширина полоски индикатора
background:#32CD32; - цвет полоски индикатора (зелёный)

top:20px;left:200px; - установка положения вывода надписи на индикаторе. отступ сверху и слева
color:black; - цвет надписи
font-size:1.2em; - размер шрифта надписи
font-weight:normal" - толщина шрифта (жирный - bold)
{TEXT} - надпись на индикаторе, устанавливаемая пользователем


вроде всё.

может кому пригодится. :arigato:

а вот пришло в голову небольшое украшение (выглядит так):

|
60%


код

Код: Выделить всё

<div style="position:relative;width:600px;height:30px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:{NUMBER}%;height:25px;background:#32CD32;padding-top:5px;"><MARQUEE LOOP="100"INFINITE SCROLLDELAY="1" SCROLLAMOUNT="4" DIRECTION=right onmouseover="this.stop()" onmouseout="this.start()"><span style="color:white;">  |  </span></MARQUEE></div>
<span style="position:absolute;top:10px;left:300px;color:black;font-size:1.2em;font-weight:normal">{TEXT}</span>
</div>


здесь встроен "движущийся текст":
SCROLLAMOUNT="4" - скорость движения полоски


то есть, как я говорил - простор для фантазии большой. :-D

для адаптации к мобильному стилю размеры лучше задавать в процентах.
то есть для основного блока width:98%; (100% не стоит ставить) и отступ надписи в процентах left:40%;

тогда этот bbcode будет адаптирован к мобильному стилю.

|
56%


код

Код: Выделить всё

<div style="position:relative;width:98%;height:30px;background:white;padding:5px;border:1px solid #c1c1c1;">
<div style="width:56%;height:25px;background:#32CD32;padding-top:5px;"><MARQUEE LOOP="100"INFINITE SCROLLDELAY="1" SCROLLAMOUNT="4" DIRECTION=right onmouseover="this.stop()" onmouseout="this.start()"><span style="color:white;">  |  </span></MARQUEE></div>
<span style="position:absolute;top:10px;left:40%;color:black;font-size:1.2em;font-weight:normal">56%</span></div>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
прогресс,шкала,bbcode,phpbb 3.0,forum
Не в сети
(Дмитрий)  
2020-08-01 
Аватара пользователя

Стаж: 7 лет 2 месяца 14 дней
Сообщения: 734


Стиль: prosilver


Репутация: 15




Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Интересный модик :arigato:


Показать сообщения за:  Поле сортировки  
Ответить на тему  [ Сообщений: 2 ] 

Кто сейчас на сайте:

Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 0

Часовой пояс: UTC + 2 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы не можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 28 мар 2024, 18:23

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид