<!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>