Шаблоны Оформления для Веб-Интерфейса
Шаблоны Оформления для Веб-Интерфейса
[ref]Qwert855[/ref],
да
да
Последний раз редактировалось petroua 15 янв 2022, 12:44, всего редактировалось 1 раз.
-
- Рядовой
- Сообщения: 58
- Зарегистрирован: 28 апр 2021, 14:45
- Имя: Евгений
Шаблоны Оформления для Веб-Интерфейса
Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
З.Ы. код JavaScript хромой, но работает. Буду продолжать трудится над этим:)
Цель присосаться к тем данным, которые получает вся html страница через JavaScript автора
Отправлено спустя 4 часа 56 минут 35 секунд:
Маленько подправил код. Теперь кнопка привязана не к ID "пользовательскому параметру", а к CSS стилям buttonX и colorX (писаться должны именно так). Это позволят привязывать их к любому "пользовательскому параметру"(только обязательно оба к одному параметру). ///////////////////////////////
Добавляем css стили в закладке "описание стилей"
[spoiler][/spoiler]
Добавляем кнопку с сис.параметром (в данном примере "Temp1")
Указываем стиль для кнопки buttonX
[spoiler] [/spoiler]
Добавляем цветовой индикатор с таким же сис.параметром как в кнопке (в данном примере "Temp1")
Указываем стиль colorX
Настраиваем цвета по вкусу:)
[spoiler] [/spoiler]
Добавляем HTML код
[spoiler][/spoiler]
Всё!
З.ы. последовательность размещения и место нахождения всех элементов не имеет значения
DelЗ.Ы. код JavaScript хромой, но работает. Буду продолжать трудится над этим:)
Цель присосаться к тем данным, которые получает вся html страница через JavaScript автора

Отправлено спустя 4 часа 56 минут 35 секунд:
Маленько подправил код. Теперь кнопка привязана не к ID "пользовательскому параметру", а к CSS стилям buttonX и colorX (писаться должны именно так). Это позволят привязывать их к любому "пользовательскому параметру"(только обязательно оба к одному параметру). ///////////////////////////////
Добавляем css стили в закладке "описание стилей"
[spoiler]
Код: Выделить всё
.buttonX {
width: 100px;
height: 35px;
border: solid 2px rgba(255, 255, 255, 0.4);
border-radius: 5px;
margin: 4px;
font-size: 1.2rem;
font-weight: 500;
color: white;
-webkit-box-shadow: 0px 3px 4px grey;
box-shadow: 0px 3px 4px grey;
}
.buttonX:hover {
opacity: .8;
}
.buttonX:active {
-webkit-box-shadow: inset 2px 2px 3px black;
box-shadow: inset 2px 2px 3px black;
}
Добавляем кнопку с сис.параметром (в данном примере "Temp1")
Указываем стиль для кнопки buttonX
[spoiler] [/spoiler]
Добавляем цветовой индикатор с таким же сис.параметром как в кнопке (в данном примере "Temp1")
Указываем стиль colorX
Настраиваем цвета по вкусу:)
[spoiler] [/spoiler]
Добавляем HTML код
[spoiler]
Код: Выделить всё
<script>
setInterval(function(){
document.querySelector('.buttonX').style.backgroundColor = document.querySelector('.colorX').style.backgroundColor
},300);
</script>
Всё!

З.ы. последовательность размещения и место нахождения всех элементов не имеет значения

У вас нет необходимых прав для просмотра вложений в этом сообщении.
-
- Рядовой
- Сообщения: 58
- Зарегистрирован: 28 апр 2021, 14:45
- Имя: Евгений
Шаблоны Оформления для Веб-Интерфейса
[ref]artemka19[/ref], Можете сам js код выложить? Хочется глянуть, а до компа тока после праздников доберусь 

-
- Сержант
- Сообщения: 194
- Зарегистрирован: 29 авг 2016, 22:44
- Откуда: Серпухов
- Имя: Александр
Шаблоны Оформления для Веб-Интерфейса
Не могу сообразить если надо несколько кнопок сделать? Надо в HTML код внести изменения. Может пример выложите с двумя кнопками???DrScorpion86 писал(а): 22 дек 2021, 16:38 Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
-
- Рядовой
- Сообщения: 58
- Зарегистрирован: 28 апр 2021, 14:45
- Имя: Евгений
Шаблоны Оформления для Веб-Интерфейса
Помочь смогу только после праздников.zhulen820 писал(а): 01 янв 2022, 23:53Не могу сообразить если надо несколько кнопок сделать? Надо в HTML код внести изменения. Может пример выложите с двумя кнопками???DrScorpion86 писал(а): 22 дек 2021, 16:38 Вот вам кнопка меняющая цвет по состоянию(on/off). Цвета можно выбрать любые.
-
- Рядовой
- Сообщения: 58
- Зарегистрирован: 28 апр 2021, 14:45
- Имя: Евгений
Шаблоны Оформления для Веб-Интерфейса
[ref]zhulen820[/ref], В принципе...
Берёте этот код
<script>
setInterval(function(){
document.querySelector('.buttonX').style.backgroundColor = document.querySelector('.colorX').style.backgroundColor;
document.querySelector('.buttonX2').style.backgroundColor = document.querySelector('.colorX2').style.backgroundColor;
},300);
</script>
Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2
Берёте этот код
<script>
setInterval(function(){
document.querySelector('.buttonX').style.backgroundColor = document.querySelector('.colorX').style.backgroundColor;
document.querySelector('.buttonX2').style.backgroundColor = document.querySelector('.colorX2').style.backgroundColor;
},300);
</script>
Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2
-
- Сержант
- Сообщения: 194
- Зарегистрирован: 29 авг 2016, 22:44
- Откуда: Серпухов
- Имя: Александр
Шаблоны Оформления для Веб-Интерфейса
Отправлено спустя 1 час 4 минуты 5 секунд:
Проверил, работает. Спасибо!
DrScorpion86 писал(а): 02 янв 2022, 20:30 Для второй кнопки ставите стиль buttonX2, а для цветовой стиль colorX2
Проверил, работает. Спасибо!
Шаблоны Оформления для Веб-Интерфейса
Набросал свой вид менюшки. Пока тока разбираюсь в CCS и HTML, прошу сильно не пинать. Много еще надо переделать. Да и много не хватает в самой Flprog
[spoiler]
[/spoiler]
Пример
[spoiler]
[/spoiler]
Пример
Последний раз редактировалось cmept-27 22 ноя 2024, 15:48, всего редактировалось 1 раз.
OK
-
- Лейтенант
- Сообщения: 438
- Зарегистрирован: 25 окт 2016, 21:26
- Откуда: Волгоградская обл.
- Имя: СашкаСаняАлександр
- Благодарил (а): 1 раз
- Поблагодарили: 4 раза
Шаблоны Оформления для Веб-Интерфейса
У нас пока так получается, бьемся над расположением компонентов .
Кнопки работают
[spoiler] [/spoiler]
Кнопки работают
[spoiler] [/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
-
- Сержант
- Сообщения: 194
- Зарегистрирован: 29 авг 2016, 22:44
- Откуда: Серпухов
- Имя: Александр
Шаблоны Оформления для Веб-Интерфейса
А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.pipapsix писал(а): 07 янв 2022, 15:59 У нас пока так получается, бьемся над расположением компонентов .
Кнопки работают
-
- Лейтенант
- Сообщения: 438
- Зарегистрирован: 25 окт 2016, 21:26
- Откуда: Волгоградская обл.
- Имя: СашкаСаняАлександр
- Благодарил (а): 1 раз
- Поблагодарили: 4 раза
Шаблоны Оформления для Веб-Интерфейса
Тут я сильно не помогу, сын делал и сказал , что тут руки связаны . С каждым объектом создается отдельный DIV.zhulen820 писал(а): 07 янв 2022, 16:38 А выложите проект пожалуйста. Хочется посмотреть как кнопки в одну строку сделать.
Получилось расположить так кнопки с помощью создания таблицы, так что все данные будут в таблице , но говорит, что нужно еще подумать, может получится обойти это.
[spoiler] [/spoiler]
Я тут вообще не понимаю)
Вот даю свои стили уже с настройками, где , что изменено не знаю. Просто заменить свои.
И в настроках кнопки. СТИЛЬ КНОПКИ ВПИСАТЬ button
P.S- проэкт не загружаю, так как рабочий. Как будет получаться, создам новый и поделюсь.
[spoiler] .stText
{
font-family:TRENDY;
font-size:20px;
color:blue;
text-align:center;
}
.button {
background-color: #008CBA; /* Green */
border: 5px solid black;
color: #00FF00;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px 2px;
cursor: pointer;
}
.menu
{
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1%;
margin: 1%;
width:16%;
border: 1px solid black;
border-radius: 8px;
}
.menuItem
{
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
display: block;
margin: 5px;
width:95%;
}
.header
{
padding: 10px;
left: 0px;
right: 0px;
top: 0px;
background: #00FFFF;
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 250%;
}
.content
{
display: grid;
float:right;
width:78%;
grid-template-rows: 1fr 1fr;
grid-template-columns: 150px 150px 150px;
}
.footer
{
float:left;
padding: 1%;
width:98%;
background: #00FFFF;
margin-top: 1%;
text-align: center;
font-weight: 600;
font-family: 'Times New Roman', Times, serif;
font-size: 150%;
}
.buttonFlp
{
width:150px;
border-radius:20px;
background:#459DE5;
color:#fff;
font-size:12px;
cursor:pointer;
float:left;
padding: 1%;
margin: 1%;
}
.buttonFlp:hover
{
background:#358DE5;
}
.buttonFlp:focus
{
outline:none;
}
.stLab
{
margin: 5px 0;
}
.stBtn
{
margin: 5px;
}
.stLig
{
margin: 5px;
width:50px;
height:50px;
border-radius:20%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stText
{
margin: 5px 0;
}
.stIF
{
margin: 5px 0;
}
.stWL
{
height:100px;
width:400px;
overflow: auto;
}
.stChb
{
margin: 5px 0;
}
.stRb
{
margin: 5px 0;
}
.stCB
{
margin: 5px 0;
}[/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Шаблоны Оформления для Веб-Интерфейса
[ref]pipapsix[/ref], Тоже сделал с помощью таблицы. Может можно по другому, но пока не понял как
Последний раз редактировалось cmept-27 22 ноя 2024, 15:48, всего редактировалось 3 раза.
OK
-
- Лейтенант
- Сообщения: 438
- Зарегистрирован: 25 окт 2016, 21:26
- Откуда: Волгоградская обл.
- Имя: СашкаСаняАлександр
- Благодарил (а): 1 раз
- Поблагодарили: 4 раза
Шаблоны Оформления для Веб-Интерфейса
Можно,там вариант есть несколько DIV в один засунуть и уже отдельно управлять, сын начал, но особой прыти нет в этом ковыряться), голжу хожу, надоедаю))cmept-27 писал(а): 07 янв 2022, 18:07 Тоже сделал с помощью таблицы. Может можно по другому, но пока не понял как
Просто я ему еще давно сказал, чтобы изучал программирование, а не блоками собирал, а теперь мне и говорит, ну не понимаю я твои блоки.
-
- Рядовой
- Сообщения: 58
- Зарегистрирован: 28 апр 2021, 14:45
- Имя: Евгений
Шаблоны Оформления для Веб-Интерфейса
[ref]cmept-27[/ref], [ref]pipapsix[/ref],
Display: flex
или
Display: grid
Думаю вам лучше подойдёт именно display grid.
Почитайте-изучите;)
Display: flex
или
Display: grid
Думаю вам лучше подойдёт именно display grid.
Почитайте-изучите;)
-
- Лейтенант
- Сообщения: 438
- Зарегистрирован: 25 окт 2016, 21:26
- Откуда: Волгоградская обл.
- Имя: СашкаСаняАлександр
- Благодарил (а): 1 раз
- Поблагодарили: 4 раза
Шаблоны Оформления для Веб-Интерфейса
[ref]DrScorpion86[/ref],
Как ни странно, изначально пробовали Display: grid, не то. Перешли на Display: flex с еще одним костылем) Все прочитано и изучено)
Но все расно спс за совет.
Как ни странно, изначально пробовали Display: grid, не то. Перешли на Display: flex с еще одним костылем) Все прочитано и изучено)
Но все расно спс за совет.
-
- Лейтенант
- Сообщения: 438
- Зарегистрирован: 25 окт 2016, 21:26
- Откуда: Волгоградская обл.
- Имя: СашкаСаняАлександр
- Благодарил (а): 1 раз
- Поблагодарили: 4 раза
Шаблоны Оформления для Веб-Интерфейса
Вот как и обещал, если будет получатся , что то более менее подходящее, выложу. В проекте только Вэб интерфейс, больше ничего.
Что и куда вставлено я не понял) но понять можно)
В принципе , для большего интерфейс мне и не нужен .
[spoiler] [/spoiler]
Что и куда вставлено я не понял) но понять можно)
В принципе , для большего интерфейс мне и не нужен .
[spoiler] [/spoiler]
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Шаблоны Оформления для Веб-Интерфейса
[ref]DrScorpion86[/ref], Спасибо. Чуток разобрался.Display: grid получше таблиц. Совместил кнопку индикатор и текст )))
[spoiler]
[/spoiler]
[spoiler]
[/spoiler]
Последний раз редактировалось cmept-27 22 ноя 2024, 15:48, всего редактировалось 1 раз.
OK
Шаблоны Оформления для Веб-Интерфейса
кому нужно скину примеры из темы я откопал на я.диске архивы зачем минусите чела может он отойдет еще)
Шаблоны Оформления для Веб-Интерфейса
[ref=#000080]aidar_i[/ref], это пока его еще не удалили админы но тему первоисточник уже удалили
Кто сейчас на конференции
Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость