4 место Делаем красивый интерфейс входящих настроек BotUI с помощью jQuery

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
Долго не мог собраться начать писать статью, поэтому делая это в последние дни - думаю, получилось скомкано и местами криво. Но надеюсь, что вы простите мне это: чукча писатель, но очень занят своими делами :-) Думаю, многие меня знают по моему ReCaptchaGnizer'у, кучке полезных сниппетов, предложений и шаблонов, которые я публиковал на форуме, а также, что я "какой-то там гриб с горы", который делает дорвеи в промышленных масштабах. :bt:


Начну издалека: BotUI - это новый интерфейс настроек проекта, чтобы заменить старые и не очень юзабельные "Входящие настройки" для шаблонов/ботов. Он появился в версии 5.11.0.0 и сейчас практически с каждой новой версий активно дополняется и развивается. Многообещающее нововведение для тех, кто делает шаблоны "на заказ" или для продажи "в несколько рук". Через данный интерфейс можно сделать очень красивые настройки, которые помогут работать с шаблоном не зная самого ZennoPoster. На сколько я слышал - в дальнейшем планируется привести их к такому виду, чтобы клиент вообще мог не запускать ZennoPoster/ZennoBox и работать с шаблоном только из BotUI (поправьте меня, если я не прав, но вроде бы где-то на форуме я читал именно это). Я пишу эту статью и привожу примеры, используя последнюю актуальную версию ZennoPoster 5.12.3.0.

Когда подавал заявку на конкурс, то хотел просто накидать несколько примеров, которые по моему субъективному мнению могут быть полезны (хоть я сам и не использую BotUI, а делаю всё по хардкору). Но в ходе написания статьи я заметил некоторые недоработки со стороны разработчиков, и мне пришла в голову мысль, что используя такой инструмент, как "Конкурсная статья" - я могу обратить на них внимание ;-) Мой внутренний перфекционист просто не может оставить бесследно какую-то багу, которую он находит в этом замечательном софте, которым я пользуюсь уже более 2-х лет с огромным удовольствием.

Поэтому я начну с того, что мне бросилось в глаза при написании статьи:
  • Почему-то в коде BotUI есть загрузка скрипта гугл аналитики, причем это сделано таким образом, что он никогда не загрузится (из-за неправильно указанного протокола file://). Вот этот фрагмент из кода:
    HTML:
    <script async="" src="file://www.google-analytics.com/analytics.js"></script>
  • Неправильно прописан путь до "_all-skins.min.css", при загрузке всегда будет 404 и эти стили не подключаются. Фрагмент кода:
    HTML:
    <link rel="stylesheet" href="file:///C:/Program%20Files%20(x86)/ZennoLab/RU/ZennoPoster%20Pro/5.12.3.0/Progs/HtmlEditorContent/AdminLTE.2.3.3/content/admin-lte/css/skins/_all-skins.min.css">
  • Стиль "pointer-events: none;", на который я обращал внимание ещё летом так и остался, и он всё также мешает при тестировании кода в браузере (в том обсуждении был предложен более-менее удобный вариант, но, по всей видимости, эти данные просто не дошли до разработчиков).
  • Пути к стилям и JS зависят от той версии ZP, в которой шаблонописатель сделал свой проект. Если у покупателя шаблона не будет установлено такой версии, то скорее всего (я не тестировал, но подозреваю), что нужно будет копировать содержимое папки HtmlEditorContent из версии ZP шаблонописателя. Иначе всё просто может "поехать" :-) На самом деле это важно и стоит учитывать такое поведение при разработке BotUI.
  • При добавлении элементов на интерфейс - код не выравнивается, всё скидывается в кашу. Никаких отступов, никаких пустых строк, всё в одной куче. Причем в некоторых случаях родительские теги div то "склеиваются" в одну строку с дочерними элементами (input/textarea/button), то идут отдельными строками. Редактировать такой код - сущий ад, но во всех своих тестовых шаблонах я отформатировал код, чтобы от него не начал дергаться глаз при просмотре этих примеров.
  • Также, в конце блока <head> есть предустановленные стили, они не отформатированы, а "выплюнуты" как есть, из-за больших отступов перед ними - код смотрится очень коряво.
  • При добавлении кнопки к ней автоматически добавляется атрибут onclick="userOnClickXX()", причем эта функция не задана в js (но пустой <script></script> всё равно добавляется). По факту добавлять этот обработчик нужно только тогда, когда явно задано какое-то действие в поле "OnClick" в панели "Свойства".
  • AlignToGrid (выравнивание по пиксельной сетке) не работает при перемещении элементов, используя "стрелки" - они передвигаются по 1 пикселю. Но при изменении размеров с помощью мыши - работает. (Возможно, это не баг, но стоит иметь ввиду)
  • При изменении ElementId для checkbox - он почему-то задается тегу label, а не тегу input (хотя, например, для input password - всё ок). Корректнее использовать id для input, а в label передавать его через атрибут "for".
  • Почему в "Панели инструментов" есть элемент "Label", но по факту в коде добавляется обычный div? Это взято из конструктора элементов под какую-то десктопную IDE (VisualStudio, например)? Тогда просто логичнее назвать этот элемент "Text", т.к. интерфейс - это html код, а в нём смысл термина "Label" - это совсем другая сущность.
  • У элемента "Label" нельзя поменять шрифт из настроек, хотя подгружается сразу несколько шрифтов и в принципе, это возможно.
  • Невозможно работать с добавленными руками тегами. То есть если я добавлю где-то в коде свой элемент, то потом его нельзя выделить и соответственно переместить/удалить.
  • Если добавить элемент Tab, а затем изменить его (хотя бы выравнять код) в редакторе, то потом при добавлении других элементов внутри его содержимого - их нельзя редактировать/выделить/удалить.
  • Если переформатировать код и изменить id у родительского div для "Translate Service", то его становится невозможно выделить в редакторе интерфейса BotUI.
  • Такое чувство, что нумерация id в добавляемых элементах глобальна для всех открытых шаблонов на время сессии ProjectMaker. Почему-то после создания нового проекта и добавления туда элемента - она не начинается с 0 или 1, а идет с трехзначных цифр (причем если делать несколько шаблонов подряд - эти цифры всегда увеличиваются, но не "сбрасываются"). Почему так сделано - остается загадкой.
  • В последнем шаблоне используется сторонняя css-библиотека для анимации и почему-то она не работает в ZennoPoster, хотя в "Просмотре" интерфейса в ProjectMaker - всё превосходно работает.
  • Также, при использовании animate.css почему-то "дергается" главный заголовок при выполнении некоторых эффектов, хотя ничего с ним не связано.

Да простят меня админы и не удалят этот абзац, так как тем, кто будет разрабатывать под BotUI лучше знать эти особенности, пока нет новых версий и это всё не исправлено каким-то образом.

Итак, что же такое jQuery и зачем мы здесь собрались?

Интерфейс BotUI - это html+css+javascript, которые выполняются во встроенном браузере. За счет того, что можно редактировать внешний вид интерфейса с помощью кнопки "Открыть код" - можно делать там практически всё тоже самое, что сейчас можно сделать на обычных сайтах. Я даже подозреваю, что можно добавить iframe и уведомлять с его помощью клиентов о выходе новой версии шаблона или о чем-то важном.

Собственно, jQuery - это JavaScript библиотека, с помощью которой можно манипулировать HTML-элементами на странице (в нашем случае - кнопками, селектами, текстом и так далее). В моей версии ZennoPoster в интерфейсе BotUI используется jquery version 3.1.1 (можно узнать, посмотрев исходный код интерфейса через вышеуказанную кнопку и найдя "jquery-3.1.1.min.js").
jQuery - очень популярная и старая библиотека, которая позволяет писать более-менее нормальный код на JS и не парится над тем, как всё будет работать в различных браузерах (но конкретно нам сейчас это не важно, но знать - стоит).
Вся документация по взаимодействию с jQuery находится по адресу: http://api.jquery.com/ - да, она на английском, но можно найти и описание на русском, только скорее всего там будет очень много устаревшей информации. Но базовые принципы и вещи должны и будут работать, но обращаться как к первоисточнику - нужно всегда к оригинальной документации.

И как это "кушать" (использовать)?

Хотелось бы написать очень подробное руководство по применению jQuery и JavaScript в целом, но боюсь, что закопаюсь в дебри, поэтому некоторые вещи я буду подавать без длительного объяснения "Как? Почему? И зачем?". Думаю, если вы никогда не "трогали" javascript/jQuery - для вас всё будет на первый взгляд сложно и не очевидно (особенно после десктопных языков программирования, бугага). Поэтому советую вам ознакомится с некоторыми старыми, но пока ещё актуальными статьями и книгами о том, как подружиться с JavaScript/jQuery:

Здесь и далее я буду предполагать, что вы уже ознакомились с базовыми возможностями jQuery, чтобы мы смогли говорить на одном языке (на javascript, ога).
Как минимум вы должны знать что такое: html, css, селекторы, обработчики и методы.

Если же вы не успели прочитать всё то, что по ссылкам выше, то хотя бы внимательно ознакомьтесь с этим отредактированным изображением, взятым из какой-то статьи (на нем изображена вся суть jQuery):

В целом разработка под web - позволяет совершать ошибки и не особо заботится о том, что их не будет в 100% случаев. Специфика не та, не ракеты запускать :-)
Но всё же, знать как протестировать свой код - нужно и это будет очень полезно. По-моему, самое простое и эффективное тестирование и написание кода под BotUI выглядит следующим образом:
  1. Продумываем в голове / пишем на листочке все переменные, которые мы хотим передавать из настроек в шаблон.
  2. Открываем BotUI, закидываем все нужные элементы, согласно продуманным переменным.
  3. Настраиваем размеры, положение, пишем вспомогательные тексты (описание и хелп).
  4. А вот тут начинается самое интересное: открываем код получившегося шаблона, копируем его и вставляем в пустой созданный *.html файл (в utf-8!).
  5. Открываем созданный *.html файл в редакторе кода (Notepad++ / SublimeText или другой) + браузере (лучше в FireFox, т.к. я подозреваю, что в ZP всё выполняется именно в нём).
  6. Открываем в браузере "Инструменты разработчика" (Ctrl+Shift+I), пишем обработчики jQuery в редакторе кода, обновляем страницу в браузере и смотрим во вкладке "Консоль", чтоб не появилось каких-то ошибок (если появляются - исправляем свой код).
  7. Делаем все нужные эффекты и взаимодействия с элементами, тестируем, копируем код из обычного редактора обратно в окно редактора BotUI в ProjectMaker.
  8. Всё! Мы прекрасны, а наш шаблон ещё прекраснее!)

Суть этого списка простыми словами: гораздо проще и удобнее тестировать html в обычном браузере, а также смотреть какие ошибки там возникают при написании js. Во встроенном редакторе в BotUI можно только чуть-чуть подправить код, постоянно что-то в нём редактировать - не очень удобная затея.

От простого к сложному, а затем снова к простому

Возможность использовать jQuery в интерфейсе ботов дает огромный полет фантазии для того, чтобы кастомизировать их и сделать не только красивыми, но и удобными для клиента. Но из-за того, что вариаций как его использовать - огромное количество, то рассмотреть абсолютно все варианты - не представляется возможным. Поэтому, я напишу только о тех способах работы с ним, которые на мой взгляд являются самыми востребованными для нас.

При добавлении любого элемента (кнопка, ввод текста, выбор вариантов) в интерфейс - добавляется сам элемент в html представлении и его родительская обёртка, тег div. У тега div всегда присутствует атрибут id, через который можно обращаться к элементу (или самому родительскому тегу div), а также можно задать уникальный идентификатор для самого элемента, используя правую панель "Свойства" -> вкладка "Дополнительно" -> Прочее -> ElementId. Это важное вступление, нужно раз и навсегда запомнить этот способ как обратиться к определенному элементу или его базовому/родительскому тегу.

Ещё одно очень важное отступление - частичное повторение из предыдущих абзацев. Следует запомнить, что весь код, который вы пишите на jQuery необходимо размещать ниже чем загрузка самой библиотеки jquery, но идеальным вариантом будет размещение кода перед закрывающимся тегом </body>. К тому же, стоит отметить, что jQuery код необходимо оборачивать специальной конструкцией, которая предотвратит выполнение кода, пока страница не загрузилась до конца (в нашем случае не критично, но лучше придерживаться этого стандарта). Выглядит это следующим образом:
HTML:
<!-- тут html-код нашего интерфейса -->
<script>
$(function() { // анонимная функция-обёртка
// здесь мы пишем обработчики для нашего интерфейса
}); // закрытие анонимной функции-обёртки
</script>
</body>
</html>
Скрытие/отображение элементов

Скрыть или отобразить какой-то элемент с помощью jQuery можно как минимум 3 способами:
  1. Используя метод .css():
    JavaScript:
    $('#element1').css('display', 'none'); // скроет тег с id element1
    $('#element1').css('display', 'block'); // отобразит тег с id element1
    На самом деле - это не очень корректный способ, т.к. придется самостоятельно дописывать получение значения и проверку текущего состояния. Лучше использовать этот метод, чтобы задать изменение какого-то css.
  2. Используя методы .hide() и .show():
    JavaScript:
    $('#element1').hide(); // скроет тег с id element1
    $('#element1').show(); // отобразит тег с id element1
    Опять же - не всегда это решение является корректным, но уже гораздо лучше первого и используются по своему прямому назначению.
  3. И последний, самый часто используемый метод .toggle():
    JavaScript:
    $('#element1').toggle();
    // получит текущее состояние тега с id=element1 и скроет его, если он видим или наоборот отобразит, если он скрыт
    В основном, такой подход используется для того, чтобы при каком-то событии скрыть или отобразить элемент. Например, при клике на кнопку - скрыть какие-то данные, с которыми она связана, а при повторном клике (если не прописано другой логики) - снова отобразить скрытые данные.

Детальное рассмотрение всех методов представлено в шаблоне show_hide.xmlz, но для начала и общего понимания как это всё работает - часть кода (первый пример с .css()) с комментариями дублирую тут:
JavaScript:
// добавляем обработчик (при действии click) для кнопки "скрыть", используя её id="btn_css1"
$("#btn_css1").on('click', function() {
    $("#90").css("display", "none"); // скрываем текстовое поле через родительский тег c id="90"
});
Вот так выглядит интерфейс этого шаблона:

В нем добавлены вышеперечисленные методы и их обработчики, причем методы для различных действий выбраны просто исходя из моих предпочтений. По факту вы можете для любых действий использовать любые обработчики.

Получение и изменение данных элемента

В jQuery есть несколько методов для работы с данными элементов, но все они имеют значительные отличия друг от друга:
  1. Метод .val() - служит для получения и изменения данных большинства элементов форм (input, select, textarea и других). Если выполнить его без аргументов, то мы получим значение указанного DOM-элемента, а если с аргументом - то соответственно изменим его значение.
  2. Метод .text() - предназначен для получения и изменения текстового представления содержимого тега, к которому он применяется (аналогичен знакомому нам innerText). То есть из кода:
    HTML:
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
      <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
      </ul>
    </div>
    При вызове данного метода на самом верхнем DOM-элементе:
    JavaScript:
    $("div.demo-container").text()
    Мы получим в результате:
    Код:
    Demonstration Box list item 1 list item 2
    Для изменения данных текстового представления - следует по аналогии с методом .val() передать первым аргументом содержимое, которое мы хотим записать внутри тега.
  3. Метод .html() - работает аналогично предыдущему методу, но с тем условием, что мы получим полный HTML-код из DOM-дерева (аналогичен знакомому нам innerHtml). Он точно также может и записать данные в html-представлении внутри тега.
  4. Последний рассматриваемый пример, который немного не похож на два предыдущих - это событие .change() - оно нужно для отслеживания изменений в значении тега, для которого оно применено.
    Пример, который объясняет суть этого события: если применить событие .change() на тег select, то при изменении значения - мы получим это значение внутри переданной анонимной функции, т.е. отработает событие и далее мы можем в зависимости от выбранного пользователем элемента - строить свою логику. Да, немного сложно, но если посмотрите в последний пример в шаблоне, то сразу станет ясно о чем идет речь :-)

Пример взаимодействия с этими методами сделан в шаблоне get_set.xmlz, а выглядит это следующим образом:

Визуальные эффекты

Визуальные эффекты - неотъемлемая часть красивого оформления, поэтому манипуляции с ними в jQuery сделаны максимально просто и удобно. Для работы с анимацией и эффектами обычно используют следующие методы:
  1. Метод .fadeIn() - анимировано отображает невидимый элемент, делая его видимым, плавно увеличивая уровень непрозрачности, используя эффект проявления. В первом аргументе можно передать скорость появления элемента в миллисекундах.
  2. Метод .fadeOut() - анимировано скрывает видимый элемент, делая его невидимым, плавно уменьшая уровень прозрачности, используя эффект растворения. Также в первом аргументе можно передать скорость скрытия в миллисекундах.
  3. Метод .animate() - самый часто используемый способ сделать любую анимацию, основанную на CSS. Обязательно в качестве первого аргумента нужно передать объект с CSS-свойствами, с помощью которых будет происходить анимация, но также можно задать длительность анимации в миллисекундах, используя второй необязательный аргумент.

Пример всех методов и некоторые красивые эффекты, создаваемые с помощью библиотеки animate.css (не рассматриваю её полноценно в контексте статьи, но решил использовать в качестве примера для облегчения поисков красивых эффектов) сделаны в шаблоне effects.xmlz. Посмотреть как это выглядит можно на следующем изображении:
Внимание! Эффекты, используемые в animate.css почему-то отказались работать в ZennoPoster, хотя в ProjectMaker работали, поэтому изображение оттуда. Будем ждать, когда это исправят.


Послесловие aka выводы

jQuery - мощный и интересный инструмент для тех, кто любит делать по настоящему красиво и качественно. Нам повезло, что разработчики сразу же включили его в BotUI, теперь создание входящих настроек - это будет такое же искусство, как и написание хорошего шаблона. Да, конечно, не многие буду заморачиваться с этим, но свою аудиторию среди шаблонописцев он точно найдет.

В данной статье я рассмотрел самый минимум из того, что теперь можно делать, поэтому вашим лучшим другом должна стать официальная документация - в ней рассмотрены все методы и события, а также добавлено множество примеров. Но если вам сложно начинать, например, по причине не знания английского, то стоит обратить внимание на учебники и статьи на русском, что я приводил в начале статьи. В целом, при знании HTML/CSS и хотя бы чуть-чуть javascript - библиотека jQuery не такая уж и сложная, если четко понимать что нужно сделать, тогда и решение будет где-то на поверхности, ну и гуглить никто не запрещал :-) В сети находится огромное количество примеров и рассмотрено множество ситуаций, которые могут у вас возникнуть в ходе работы. Если искать решение, то оно всегда будет найдено!

Спасибо, что дочитали до конца, надеюсь вам было интересно и вы узнали что-то новое для себя.
Мне будет приятно, если эта публикация в первую очередь принесет пользу для камрадов, а уж конкурс - дело десятое :dn:
 

Вложения

Для запуска проектов требуется программа ZennoPoster.
Это основное приложение, предназначенное для выполнения автоматизированных шаблонов действий (ботов).
Подробнее...

Для того чтобы запустить шаблон, откройте программу ZennoPoster. Нажмите кнопку «Добавить», и выберите файл проекта, который хотите запустить.
Подробнее о том, где и как выполняется проект.

Последнее редактирование:

Megalo

Client
Регистрация
30.03.2015
Сообщения
85
Благодарностей
38
Баллы
18
Классная статья. А кто-нибудь использовал WPF + Zennoposter? Можете на простом примере показать, как WPF связать с Зенно? Интерфейсы на WinForms без проблем создаются, а с WPF затык какой-то (
 

shtift

Client
Регистрация
29.07.2015
Сообщения
149
Благодарностей
242
Баллы
43
Классная статья. А кто-нибудь использовал WPF + Zennoposter? Можете на простом примере показать, как WPF связать с Зенно? Интерфейсы на WinForms без проблем создаются, а с WPF затык какой-то (
C WPF делается все также, как и с WinForms. Могу проконсультировать в ЛС.
 
  • Спасибо
Реакции: AZANIR и Megalo

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
К слову, хотел написать, да вылетело из головы: если вы умеете "варить" javascript и вам интересна тема с очень сильной кастомизацией входящих настроек, то вам определенно нужно посмотреть содержимое
HTML:
<script src="file:///C:/Program%20Files%20(x86)/ZennoLab/RU/ZennoPoster%20Pro/5.12.3.0/Progs/HtmlEditorContent/JSBotUI/Content/Scripts/BotUiApi.js"></script>
Есть очень сильное чувство, что с его помощью можно вывести и отредактировать чуть ли не все данные по шаблону из ZennoPoster (количество выполнений, попыток, потоков, использование прокси и так далее), а также более хитро обрабатывать всё оттуда :dm:
 

yriy158

Client
Регистрация
10.08.2013
Сообщения
423
Благодарностей
252
Баллы
63
Очень толковая статья, как и все остальные статьи ТСа. Пока ниразу не рабол с botui да и толком не понимал что это и зачем. Теперь хоть буду знать что можно такую красоту делать. Спасибо!
 
  • Спасибо
Реакции: Lord_Alfred

LightWood

Moderator
Регистрация
04.11.2010
Сообщения
2 350
Благодарностей
816
Баллы
113

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
Очень толковая статья, как и все остальные статьи ТСа. Пока ниразу не рабол с botui да и толком не понимал что это и зачем. Теперь хоть буду знать что можно такую красоту делать. Спасибо!
Всё действительно по красоте! Снимаю шляпу :bt:
И вам, друзья, спасибо! Значит не зря я потратил на написание несколько дней, перелопатил кучу документаций и написал несколько сотен строк javascript-кода с кучей комментариев для примеров :az:
 

WebBot

Client
Регистрация
04.04.2015
Сообщения
1 076
Благодарностей
638
Баллы
113
Люблю jQuery за его простоту и логичность.
К сожалению пока в своих проектах вынужден по-прежнему юзать старые входные настройки т.к у многих покупателей все еще 5.9.x, 5.10.x ....
 

AgentRassilok

Известная личность
Регистрация
08.11.2016
Сообщения
1 273
Благодарностей
449
Баллы
83
Топчик
 

AZANIR

Client
Регистрация
09.06.2014
Сообщения
270
Благодарностей
111
Баллы
43
Плюсану и за эту статью.
 

ibred

Administrator
Команда форума
Регистрация
04.04.2015
Сообщения
2 630
Благодарностей
2 016
Баллы
113
Теперь боты всех пользователей ZennoPoster станут краше и юзабильнее :-)
Хорошая статья!

@Lord_Alfred как ты считаешь, возможно ли реализовать подгрузку данных из файла в Select, без выбора файла пользователем?
Сейчас приходится считывать с тега:
HTML:
<input accept="text/plain" name="file" id="file" onchange="readFile(event)" type="file">
Но это не очень удобно так как приходится указывать путь к файлу через проводник + данные обнуляются при закрытии BotUI.
 
  • Спасибо
Реакции: Lord_Alfred

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
@Lord_Alfred как ты считаешь, возможно ли реализовать подгрузку данных из файла в Select, без выбора файла пользователем?
Не совсем понимаю суть вопроса:
1 вариант: проблема в том, что пользователю нужно выбирать один и тот же файл всегда?
- Думаю, есть смысл "захардкодить" относительно пути к шаблону и просто заполнять селект при открытии BotUI.
2 вариант: проблема в том, что данные обнуляются (выбранный файл) при закрытии BotUI?
- Скорее всего это проблема BotUI, значения должны предустанавливаться снова, если переоткрыть входящие настройки.

Если я не правильно понял суть вопроса, то объясни плиз на конкретном примере, может что-то ещё в голову придет, а то уж слишком как-то просто эти ответы пришли )) думаю, там сложнее всё должно быть)
 

Meteorburn

Client
Регистрация
23.05.2016
Сообщения
747
Благодарностей
253
Баллы
63
Где голосовать за автора?))
 
  • Спасибо
Реакции: Lord_Alfred

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113

Juniorcpa

Client
Регистрация
27.05.2014
Сообщения
1 314
Благодарностей
609
Баллы
113
Грустно что и остальные настройки, при таких раскладах, должны будут в коде редактироваться. Чеж, яву чтоли учить идти на жавараш?
 

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
Грустно что и остальные настройки, при таких раскладах, должны будут в коде редактироваться. Чеж, яву чтоли учить идти на жавараш?
Сейчас в любом случае без javascript не обойтись, но, думаю, что со временем разработчики добавят какие-то типовые зависимые друг от друга элементы. Просто надо придумать кейсы, по которым они будут работать.
Один из таких кейсов у меня в статье есть во второй анимации: выбор капча-сервиса, а снизу заполнение настроек для него. То есть сделать зависимость элемента "список табов" от "сервис распознавания", причем не обязательно даже "шапку" для табов выводить будет (с названиями), я это оставил для простоты понимания.
 

arhip1985

Client
Регистрация
31.10.2011
Сообщения
2 623
Благодарностей
573
Баллы
113
хорошая статья, за Ваш труд - отдал один из своих голосов, как раз сегодня только озадачился темой интерфейса - сначала справку окучивал, а потом Вашу статью увидел. очень достойно!!
 

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
хорошая статья, за Ваш труд - отдал один из своих голосов, как раз сегодня только озадачился темой интерфейса - сначала справку окучивал, а потом Вашу статью увидел. очень достойно!!
Спасибо )
 

Juniorcpa

Client
Регистрация
27.05.2014
Сообщения
1 314
Благодарностей
609
Баллы
113

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
Обещали в след. обнове БОТуи доработать, надеюсь внедрят и автоматизируют твои фичи.
Думаю, там по большей части баги исправят из начала темы) По крайней мере на это надеюсь :-))
 

SadisT_UA

Client
Регистрация
14.12.2012
Сообщения
36
Благодарностей
6
Баллы
8
Прикольная статья, проголосовал за.
 

lzlmrf

Client
Регистрация
14.08.2015
Сообщения
456
Благодарностей
124
Баллы
43
ОГОНЬ , спасибо!
 

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
ОГОНЬ , спасибо!
:bt: старался) и тебя спасибо, надеюсь, что статья пригодится и будет использоваться как подручный материал для того, чтоб быстро придумать или подсмотреть как лучше всего организовать какой-то простой эффект в настройках )
 

avtostopshik

Client
Регистрация
09.09.2016
Сообщения
393
Благодарностей
43
Баллы
28
@Lord_Alfred привет! Ты рекомендовал в браузере редактировать код - а как это делать? Я скопировал в html файл весь код, открыл в браузере, но все элементы мёртвые - даже в поле текстовое курсор не становится. Что не так было сделано?

P.S.: А статья отличная, проголосовал за неё, так как мне она оказалась самой полезной. Дала начало, а дальше уже найдя русскоязычный справочник по jquery я понял, что могу делать всё, что угодно, и что всё не так уж сложно)))
Спасибо за статью!
 

avtostopshik

Client
Регистрация
09.09.2016
Сообщения
393
Благодарностей
43
Баллы
28
  • Настраиваем размеры, положение, пишем вспомогательные тексты (описание и хелп).
Кстати об этом - не нашёл в бот уи таких вещей - их самостоятельно нужно писать, используя лэйбл, и потом уже играясь со стилями приводить в нужный вид? Речь про описания и хэлп.
 

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113
@Lord_Alfred привет! Ты рекомендовал в браузере редактировать код - а как это делать? Я скопировал в html файл весь код, открыл в браузере, но все элементы мёртвые - даже в поле текстовое курсор не становится. Что не так было сделано?
Это всё из-за стиля:
  • Стиль "pointer-events: none;", на который я обращал внимание ещё летом так и остался, и он всё также мешает при тестировании кода в браузере (в том обсуждении был предложен более-менее удобный вариант, но, по всей видимости, эти данные просто не дошли до разработчиков).
Он блокирует в браузере работу с элементами и нужен в редактировании botui, чтобы можно было передвигать их.

Кстати об этом - не нашёл в бот уи таких вещей - их самостоятельно нужно писать, используя лэйбл, и потом уже играясь со стилями приводить в нужный вид? Речь про описания и хэлп.
Да, сейчас такое можно сделать только через Label, или ручками уже самому стили накручивать)

МБ я чего то не понимаю) но это туториал по JQuery)
Туториал - это слишком громко сказано) Скорее справка и примеры по jQuery, которые применимы и по моему мнению будут часто использоваться в BotUI :-)
 
  • Спасибо
Реакции: Radzhab

daymos

Client
Регистрация
11.11.2009
Сообщения
768
Благодарностей
212
Баллы
43
биктоин можно майнить во входных настройках? :D
 
  • Спасибо
Реакции: ibred

Lord_Alfred

Client
Регистрация
09.10.2015
Сообщения
3 250
Благодарностей
2 734
Баллы
113

Кто просматривает тему: (Всего: 2, Пользователи: 0, Гости: 2)