<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JSDoc: Class: Конструктор класса DropDown</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>

    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css" />
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
    <link type="text/css" rel="stylesheet" href="styles/descriptionOptions.css" />
  </head>

  <body>
    <div id="main">
      <h1 class="page-title">Class: Конструктор класса DropDown</h1>

      <section>
        <header>
          <h2>
            <span class="attribs"><span class="type-signature"></span></span>Конструктор класса
            DropDown<span class="signature">(options)</span><span class="type-signature"></span>
          </h2>
        </header>

        <article>
          <div class="container-overview">
            <h4 class="name" id="Конструктор класса DropDown">
              <span class="type-signature"></span>new Конструктор класса DropDown<span
                class="signature"
                >(options)</span
              ><span class="type-signature"></span>
            </h4>

            <div class="description">Конструктор принимает объект и рендерит селект.</div>

            <h5>Parameters:</h5>

            <table class="params">
              <thead>
                <tr>
                  <th>Name</th>

                  <th>Type</th>

                  <th class="last">Description</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <td class="name"><code>options</code></td>

                  <td class="type">
                    <span class="param-type">object</span>
                  </td>

                  <td class="description last">Объект принимающий настройки селекта</td>
                </tr>
              </tbody>
            </table>

            <dl class="details">
              <dt class="tag-source">Source:</dt>
              <dd class="tag-source">
                <ul class="dummy">
                  <li>
                    <a href="cg-dropdown.js.html">cg-dropdown.js</a>,
                    <a href="cg-dropdown.js.html#line74">line 74</a>
                  </li>
                </ul>
              </dd>
            </dl>

            <h5>Example</h5>

            <pre class="prettyprint"><code>options = {
              selector: 'Уникальный селектор',
              selected: 'Выбранный элемент',
              placeholder: '...',
              items: [string|number|object],
              darkTheme: true/false,
              searchMode: true/false,
              closeOnSelect:  true/false,
              nativeSelectMode: true/false,
              listDisplayMode: true/false,
              language: 'ru/en',
              styles: {
                head: {
                  background: '...',
                },
                list: {...},
                chips: {...},
                caret: {...},
                placeholder: {...},
                lable: {..},
              },
              event: '...',
              url: 'http/...',
              multiselect: true/false,
              multiselectTag: true/false,
        }</code></pre>
          </div>
        </article>

        <h4>Описание всех параметров селекта</h4>
        <section>
          <ul class="descriptionOptions">
            <li>
              <strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
              который задаеться при создании селекта.
            </li>

            <li>
              <strong>selected</strong> - необязательный параметр, в который передается элемент
              который будет выбран изначально в селекте.
            </li>

            <li>
              <strong>placeholder</strong> - необязательный параметр, в который передается текст
              плейсхолдера селекта.
            </li>

            <li>
              <strong>items</strong> -
              <strong
                >*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
              >, это массив елементов, которые будут отображаться в селекте при выборе.
            </li>

            <li>
              <strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
              светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
            </li>

            <li>
              <strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
              по элеметам селекта.
            </li>

            <li>
              <strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
              поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
              селекте закрытия не происходит, и можно выбрать другой элемент по умолчанию,
              closeOnSelect:true.
            </li>

            <li>
              <strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
              поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
              тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
              десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
              отображаться нативный селект из HTML 5;
            </li>

            <li>
              <strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
              поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
              опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
              с выбором опции будет отображаться как модальное окно.
            </li>

            <li>
              <strong>language</strong> - необязательный параметр, отвечающий за локализацию
              некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
              локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
              передав туда объект с полями для текста.
            </li>

            <li>
              <strong>event</strong> - необязательный параметр, который отвечает за поведения
              селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
              открываться при наведении.
            </li>

            <li>
              <strong>url</strong> -
              <strong
                >*обязательный параметр(эсли не указан другой способ получения данных
                (items)),</strong
              >
              htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
            </li>

            <li>
              <strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
              селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
              отрисовываются как обычный текст, через запятую.
            </li>

            <li>
              <strong>multiselectTag</strong> - необязательный параметр, который отвечает за
              поведения селекта, для него,
              <strong>***работает только в месте с подключением multiselect.</strong>
            </li>

            <li>
              <strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
              элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
              элементов.
            </li>
          </ul>
        </section>
      </section>
    </div>

    <nav>
      <h2><a href="index.html">Home</a></h2>
      <h3>Classes</h3>
      <ul>
        <li><a href="DropDown.html">DropDown</a></li>
        <li>
          <a href="constructor.html">Конструктор класса DropDown</a>
        </li>
      </ul>
      <h3>Modules</h3>
      <ul>
        <li><a href="module-Utils.html">Utils</a></li>
        <li><a href="module-createElementChips.html">createElementChips</a></li>
      </ul>
      <h3>Private methods</h3>
      <ul>
        <li><a href="global.html#addOptionsBehaviour">#addOptionsBehaviour</a></li>
        <li><a href="global.html#close">#close</a></li>
        <li><a href="global.html#checkTheme">#checkTheme</a></li>
        <li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
        <li><a href="global.html#init">#init</a></li>
        <li><a href="global.html#initEvent">#initEvent</a></li>
        <li><a href="global.html#initSelected">#initSelected</a></li>
        <li><a href="global.html#open">#open</a></li>
        <li><a href="global.html#render">#render</a></li>
        <li><a href="global.html#renderUrl">#renderUrl</a></li>
        <li><a href="global.html#searchMode">#searchMode</a></li>
        <li><a href="global.html#displayMode">#displayMode</a></li>
        <li><a href="global.html#selectMode">#selectMode</a></li>
      </ul>
      <h3>Public methods</h3>
      <ul>
        <li><a href="global.html#addLanguage">addLanguage</a></li>
        <li><a href="global.html#addItem">addItem</a></li>
        <li><a href="global.html#buttonControl">buttonControl</a></li>
        <li><a href="global.html#deleteItem">deleteItem</a></li>
        <li><a href="global.html#deleteItemAll">deleteItemAll</a></li>
        <li><a href="global.html#disabled">disabled</a></li>
        <li><a href="global.html#getElement">getElement</a></li>
        <li><a href="global.html#selectIndex">selectIndex</a></li>
      </ul>
    </nav>

    <br class="clear" />

    <footer>
      Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.11</a> on Wed
      Oct 19 2022 20:30:19 GMT+0300 (Moscow Standard Time)
    </footer>

    <script>
      prettyPrint();
    </script>
    <script src="scripts/linenumber.js"></script>
  </body>
</html>