Skip to content

synergy-various-libraries
synergy-various-libraries
Commit b7e62f40 authored by Sergey Antonovich's avatar Sergey Antonovich 🇯🇵
Browse files
Options

Update mobile_adaptability_form.md

parent 7b8d5c24
Pipeline #62 canceled with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 26 additions and 106 deletions
      Library/mobile_adaptability_form.md
      View file @ b7e62f40
      # Мобильная адаптивность формы Synergy через проигрыватель форм
      ![Описание](Library/Снимок_экрана_от_2018-10-23_12-45-07.png)
      Как будет выглядеть форма:
      **Автор: [Антонович Сергей (yandexphp)](mail:antonovich_1313@mail.ru)**
      ![Результат](Library/e775eeb0-5979-4907-9eb9-b48fe559613e.jpeg)
      <hr>
      Обязательные поля или маска:
      *Пример структуры HTML*
      ```html
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link rel="stylesheet" href="mobile-window.css">
      <script src="mobile-window.js"></script>
      <script>FORM_PLAYER_URL_PREFIX = "http://127.0.0.1/Synergy/";</script> <!-- Для работы компонента HTD редактора -->
      <link rel="stylesheet" href="http://127.0.0.1/Synergy/js/form.player.css"/> <!--стандартный стиль компонентов формы-->
      <script src="http://127.0.0.1/Synergy/js/vendor.js" type="text/javascript"></script> <!--ссылка на сторонние библиотеки-->
      <script src="http://127.0.0.1/Synergy/js/form.player.js" type="text/javascript"></script> <!--ссылка на проигрыватель форм-->
      </head>
      <body>
      <div class="mobile-window">
      <div id="form_player_container">
      <div id="form_player_div"></div>
      </div>
      </div>
      </body>
      </html>
      ```
      ![Результат](Library/91e1f82d-3319-4339-88f6-4a8c4125ed4a.jpeg)
      <hr>
      Выбор элемента из списка: (System UI)
      *Структура CSS*
      ```css
      body{
      margin: 0;
      }
      .mobile-window{
      padding: 5px;
      }
      .mobile-window .asf-textBox {
      border-radius: 0;
      border: 0;
      }
      .mobile-window .asf-invalidInput{
      border: 0 !important;
      background-color: transparent !important;
      }
      .mobile-window .asf-label{
      position: absolute;
      display: flex;
      align-items: center;
      left: 5px;
      color: #a0a0a0;
      font-size: 12px;
      }
      #mw-label-listbox{
      position: relative;
      cursor: default;
      }
      .mw-invalid-label-color-error, .mw-invalid-color-error{
      color:rgb(255, 19, 0);
      }
      .mw-invalid-label-color-success, .mw-invalid-color-success{
      color:rgb(63, 162, 63);
      }
      .mobile-window-system-select, .mobile-window-system-date, .mobile-window-system-box{
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-width: 100%;
      min-height: 100%;
      opacity: 0;
      }
      .mobile-window .asf-dateBox{
      min-width: calc(100% - 32px);
      min-height: 100%;
      }
      .mobile-window .asf-container{
      position: relative;
      }
      .mobile-window .asf-buttonLabel{
      padding: 4px 0;
      }
      .mobile-window .mobile-window-systemAlign{
      position: absolute;
      top: auto;
      bottom: auto;
      min-height: 14px;
      opacity: 0;
      }
      ```
      ![Результат](Library/f48ace25-f344-4c60-9b1f-d82b0db1bbab.jpeg)
      Выбор даты из пикера: (System UI)
      ![Результат](Library/d2404e39-cfb9-410b-8380-4e92f08e630c.jpeg)
      Описание задачи:
      ![Описание](Library/Снимок_экрана_от_2018-10-23_12-45-07.png)
      **Библиотека:** [Посмотреть код](Library/mobile_adaptability_form.js)
      **Стили для библиотеки:** [Посмотреть код стилей](Library/mobile_adaptability_form.css)
      **Пример HTML структуры:** [Посмотреть код верстки](Library/mobile_adaptability_form.html)
      **Автор:** [Антонович Сергей (yandexphp)](mail:antonovich_1313@mail.ru)
      <hr>
      ......@@ -120,7 +37,8 @@ body{
      portal.player = AS.FORMS.createPlayer();
      ```
      Шаблон без библиотеки
      * Шаблон без библиотеки
      ```javascript
      'use strict';
      ......@@ -154,6 +72,8 @@ $(function(){
      });
      ```
      * Шаблон с библиотекой
      ```javascript
      'use strict';
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment