Иконки в главном меню.

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Иконки в главном меню.

Сообщение Chainik » Пн янв 02, 2017 6:04 pm

Уважаемые форумчане! Сделал с помощью HTML-блока кнопки для управления рулонной шторой (обвел зеленой рамкой).
Каждую из кнопок сделал с помощью такого кода (где-то подсмотрел на форуме).

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

<div style='display:%RollorBlind_1.status|"none;block"%' onClick='callMethod("%RollorBlind_1.moveUp");'><img src="\cms\scenes\styles\images\AnimationUp.gif"></div>
<div style='display:%RollorBlind_1.status|"block;none"%' onClick='callMethod("%RollorBlind_1.moveUp");'><img src="\cms\scenes\styles\images\arrow-up.png"></div>
Все замечательно, даже удалось их динамически менять и прикрутить gif-анимацию. Только хочется их расположить на одном уровне.
Возможно это как-то сделать?
Изображение
http://dropmefiles.com/SXYUx
(Ниже на картинке аналогичные кнопки управления, только сделанные с помощью радиобокса.)
В программировании полный ноль.

ДОПОЛНЕНИЕ
Товарищи! Удалось расположить на кнопки на одном уровне! Код такой

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

<style type="text/css">
.gorizontalno {
display: inline-block
} 
</style>

<div class="gorizontalno">
<div style='display:%RollorBlind_1.status|"none;block;none;none"%' onClick='callMethod("%RollorBlind_1.moveUp");'><img src="\cms\scenes\styles\images\AnimationUp.gif"></div>
<div style='display:%RollorBlind_1.status|"block;none;none;none"%' onClick='callMethod("%RollorBlind_1.moveUp");'><img src="\cms\scenes\styles\images\arrow-up.png"></div>
</div>

<div class="gorizontalno">
<div style='display:%RollorBlind_1.status|"none;none;block;none"%' onClick='callMethod("%RollorBlind_1.moveDown");'><img src="\cms\scenes\styles\images\AnimationDown.gif"></div>
<div style='display:%RollorBlind_1.status|"none;none;none;block"%' onClick='callMethod("%RollorBlind_1.moveDown");'><img src="\cms\scenes\styles\images\arrow-down.png"></div>
</div>
Может кому пригодится.
Ни разу не программист.
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: Иконки в главном меню.

Сообщение directman66 » Вс фев 19, 2017 1:45 pm

а картинки и анимации не выложите?
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Иконки в главном меню.

Сообщение Chainik » Вс фев 19, 2017 2:49 pm

directman66 писал(а):а картинки и анимации не выложите?
Выкладываю (те что в примере кода):
http://TransFiles.ru/04nve

Можете использовать любые картинки. Сергей рекомендует размер 32х32 пикселя. Даже если картинка нестандартная, ее всегда можно масштабировать средствами html.

При клике на изображение-кнопку (и, соответственно, запуске методов "RollorBlind_1.moveUp" и "RollorBlind_1.moveDown") свойство "RollorBlind_1.status" из метода принимает значение от "0" до "3". В соответствии с этим значением меняются и картинки.
immortal
Сообщения: 1138
Зарегистрирован: Вт янв 29, 2013 9:16 am
Откуда: Белозерск
Благодарил (а): 16 раз
Поблагодарили: 400 раз
Контактная информация:

Re: Иконки в главном меню.

Сообщение immortal » Ср фев 22, 2017 6:51 pm

срок хранения истек ,можно сюда прицепить?
Lubuntu на cubieboard2 + ds9490R
DietPi на Orange Pi PC + 1wire на esp8266 с прошивкой Homes-smart.ru
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Иконки в главном меню.

Сообщение Chainik » Ср фев 22, 2017 7:54 pm

immortal писал(а):срок хранения истек ,можно сюда прицепить?
Выкладываю.
http://transfiles.ru/4d6q3
Кстати gif-файлы сделал сам, используя какой-то on-line сервис, попавшийся на просторах интернета.
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: Иконки в главном меню.

Сообщение directman66 » Чт мар 16, 2017 1:07 pm

Может выложить картинки на ресурс с большим сроком храниения? А то опять недоступно.
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Иконки в главном меню.

Сообщение Chainik » Чт мар 16, 2017 2:29 pm

directman66 писал(а):Может выложить картинки на ресурс с большим сроком храниения? А то опять недоступно.
На этом файлообменнике максимальный срок хранения 14 дней. Если подскажите бесплатный файлообменник с большим сроком хранения, выложу на нем.
http://transfiles.ru/7yvvz
Кстати, вот бесплатный интернет-ресурс, с помощью которого сделал gif-анимацию:
https://ru.toolson.net/GifAnimation
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: Иконки в главном меню.

Сообщение directman66 » Чт мар 16, 2017 2:38 pm

выложил на яндекс диск https://yadi.sk/d/v7xitDAV3FxwGE
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
directman66
Сообщения: 2801
Зарегистрирован: Пн дек 26, 2016 9:51 am
Откуда: Екатеринбург
Благодарил (а): 380 раз
Поблагодарили: 693 раза
Контактная информация:

Re: Иконки в главном меню.

Сообщение directman66 » Чт мар 16, 2017 4:20 pm

А вообще данный метод это уже прошлый век, сделал кнопочки в современном стиле в несколько колонок.

Не могу только понять как привязать их к вызову метода. Кто разбирается в вэб программинга, помогите плз.

В меню добавляем новый тип html и вставляем код
СпойлерПоказать
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style class="cp-pen-styles">
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Helvetica', sans-serif;
}

/* BUTTON 4 */
.four .button-wrap {
width: 100px;
margin: 40px auto 0;
cursor: pointer;
}
.four .button-bg {
width: 100%;
height: 100%;
background-color: #44453d;
border-radius: 40px;
padding: 3px;
color: #fff;
transition: all 0.2s ease;
}
.four .button-switch {
position: relative;
left: 0px;
width: 44px;
height: 44px;
border: solid 13px;
background-color: #fff;
border-radius: 36px;
transition: all 0.2s ease;
}
.four .button-active .button-switch {
left: 50px;
}
.four .button-in,
.four .button-out {
position: absolute;
transition: all 0.2s ease;
padding-top: 15px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
.four .button-in {
margin-left: 76px;
}
.four .button-out {
margin-left: 18px;
}
.four .button-active .button-bg {
background-color: #c7d923;

</style></head><body>

<table>
<tr> <td>
<div class="four">
<div class="button-wrap">
<div class="button-bg">
<div class="button-out"></div>
<div class="button-in"></div>
<div class="button-switch"></div>
</div>
</div>
</div>
</td><td>
<div class="four">
<div class="button-wrap">
<div class="button-bg">
<div class="button-out"></div>
<div class="button-in"></div>
<div class="button-switch"></div>
</div>
</div>
</div>
</td></tr>
</table>

<script>$('.button-wrap').on("click", function(){
$(this).toggleClass('button-active');
});
//# sourceURL=pen.js
</script>
</body></html>
СпойлерПоказать
Безымянный.jpg
Безымянный.jpg (41.76 КБ) 7958 просмотров
Если вам помогло данное сообщение, не поленитесь нажать кнопку "спасибо".
CONNECT | Оборудование | Блог | Дополнения | Email | Telegram
Chainik
Сообщения: 1462
Зарегистрирован: Вс янв 10, 2016 11:05 am
Благодарил (а): 260 раз
Поблагодарили: 454 раза

Re: Иконки в главном меню.

Сообщение Chainik » Чт мар 16, 2017 5:01 pm

directman66 писал(а):...Не могу только понять как привязать их к вызову метода. ...
Я, конечно, в веб-дизане не разбираюсь, но могу предположить, что внутрь "div ... /div", где отрисовываются элементы, нужно положить еще один div ... /div, где указывается, что запускать при клике
ну т.е. вместо, например

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

<div class="button-in"></div>
поставить

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

<div class="button-in"<div onClick='callMethod("%Объект.Метод");'></div></div>
или может быть сработает без div

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

<div class="button-in" onClick='callMethod("%Объект.Метод");'></div> 
Хотя это только мое предположение. Пусть спецы по веб-дизайну ответят.

P.S. В общем, заработал код с таким синтаксисом:

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

<div class="button-wrap" onClick='callMethod("%Switch1.switch");'> 
Правда работает у меня только в Опере, а в IE не хочет. Ну да не беда.
В результате выполнения метода меняется свойство. А если это свойство изменилось не путем клика на этот элемент и запуска метода, а путем выполнения скрипта, клика по другим элементам и т.д., т.е. не из данного объекта.
Как сделать, чтобы элемент получил обратную связь (т.е. реагировал на изменение свойства)?
В общем, как синхронизировать состояние HTML-элемента со значением свойства?
Ответить