2022-10-19 20:33:37 +03:00
|
|
|
|
<!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>
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
2022-10-19 20:33:37 +03:00
|
|
|
|
<!--[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" />
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<link type="text/css" rel="stylesheet" href="styles/descriptionOptions.css" />
|
2022-10-19 20:33:37 +03:00
|
|
|
|
</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 = {
|
2022-12-29 17:15:19 +03:00
|
|
|
|
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>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
</div>
|
|
|
|
|
|
</article>
|
2022-11-08 16:57:35 +03:00
|
|
|
|
|
|
|
|
|
|
<h4>Описание всех параметров селекта</h4>
|
|
|
|
|
|
<section>
|
|
|
|
|
|
<ul class="descriptionOptions">
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>selector</strong> - <strong>*обязательный параметр(индефикатор)</strong>,
|
|
|
|
|
|
который задаеться при создании селекта.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>selected</strong> - необязательный параметр, в который передается элемент
|
|
|
|
|
|
который будет выбран изначально в селекте.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>placeholder</strong> - необязательный параметр, в который передается текст
|
|
|
|
|
|
плейсхолдера селекта.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>items</strong> -
|
|
|
|
|
|
<strong
|
|
|
|
|
|
>*обязательный параметр(эсли не указан другой способ получения данных (url))</strong
|
|
|
|
|
|
>, это массив елементов, которые будут отображаться в селекте при выборе.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>darkTheme</strong> - необязательный параметр, который отвечает за включение
|
|
|
|
|
|
светлой/темной темы по умолчанию, стоит темная тема(darkTheme == true).
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>searchMode</strong> - необязательный параметр, который добавляет живой поиск
|
|
|
|
|
|
по элеметам селекта.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>closeOnSelect</strong> - необязательный параметр, который отвечает за
|
|
|
|
|
|
поведения селекта при открытии, если closeOnSelect: false, тогда при выборе елемента в
|
|
|
|
|
|
селекте закрытия не происходит, и можно выбрать другой элемент по умолчанию,
|
|
|
|
|
|
closeOnSelect:true.
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<strong>nativeSelectMode</strong> - необязательный параметр, который отвечает за
|
|
|
|
|
|
поведения селекта при открытии на мобильных усторйствах, если nativeSelectMode: false,
|
|
|
|
|
|
тогда на мобильном устройстве будет отображаться и работать дефолтное поведение как на
|
|
|
|
|
|
десктопной версии, а если nativeSelectMode: true, то на мобильном устройстве будет
|
|
|
|
|
|
отображаться нативный селект из HTML 5;
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>listDisplayMode</strong> - необязательный параметр, который отвечает за
|
|
|
|
|
|
поведения селекта при открытии, если listDisplayMode: false, тогда лист с выбором
|
|
|
|
|
|
опции отображаться как обычный выпадающий список. Если listDisplayMode: true, то лист
|
|
|
|
|
|
с выбором опции будет отображаться как модальное окно.
|
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
|
<strong>language</strong> - необязательный параметр, отвечающий за локализацию
|
2022-11-08 16:57:35 +03:00
|
|
|
|
некоторых текстовых элементов. по умолчанию стоит 'en'. Можно добавить свою
|
2022-12-29 17:15:19 +03:00
|
|
|
|
локализацию, с помощью функции <a href="global.html#addLanguage">addLanguage()</a>,
|
2022-11-08 16:57:35 +03:00
|
|
|
|
передав туда объект с полями для текста.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>event</strong> - необязательный параметр, который отвечает за поведения
|
|
|
|
|
|
селекта, передавая в этот параметр, евент по типу 'mouseenter', селект будет
|
|
|
|
|
|
открываться при наведении.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>url</strong> -
|
|
|
|
|
|
<strong
|
|
|
|
|
|
>*обязательный параметр(эсли не указан другой способ получения данных
|
|
|
|
|
|
(items)),</strong
|
|
|
|
|
|
>
|
|
|
|
|
|
htylthbn данные которые приходят с бекэнда в формате {id:"", title: "", value: ""}.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>multiselect</strong> - необязательный параметр, который отвечает за поведения
|
|
|
|
|
|
селекта, добавляет возможность выбирать несколько элементов. Выбранные элементы
|
|
|
|
|
|
отрисовываются как обычный текст, через запятую.
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>multiselectTag</strong> - необязательный параметр, который отвечает за
|
|
|
|
|
|
поведения селекта, для него,
|
|
|
|
|
|
<strong>***работает только в месте с подключением multiselect.</strong>
|
|
|
|
|
|
</li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li>
|
|
|
|
|
|
<strong>styles</strong> - необязательный параметр, который отвечает за кастомизацию
|
|
|
|
|
|
элементов селекта, в него передаются обьекты с CSS свойствами для кастомизируемых
|
|
|
|
|
|
элементов.
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</section>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
</section>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<nav>
|
|
|
|
|
|
<h2><a href="index.html">Home</a></h2>
|
|
|
|
|
|
<h3>Classes</h3>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li><a href="DropDown.html">DropDown</a></li>
|
|
|
|
|
|
<li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<a href="constructor.html">Конструктор класса DropDown</a>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
<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>
|
2022-11-08 16:57:35 +03:00
|
|
|
|
<li><a href="global.html#checkTheme">#checkTheme</a></li>
|
|
|
|
|
|
<li><a href="global.html#closeSelectClick">#closeSelectClick</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
<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>
|
2022-10-25 21:03:10 +03:00
|
|
|
|
<li><a href="global.html#searchMode">#searchMode</a></li>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<li><a href="global.html#displayMode">#displayMode</a></li>
|
|
|
|
|
|
<li><a href="global.html#selectMode">#selectMode</a></li>
|
2022-10-21 16:17:37 +03:00
|
|
|
|
</ul>
|
|
|
|
|
|
<h3>Public methods</h3>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
<ul>
|
2022-12-29 17:15:19 +03:00
|
|
|
|
<li><a href="global.html#addLanguage">addLanguage</a></li>
|
2022-10-19 20:33:37 +03:00
|
|
|
|
<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>
|
