Fix git ignore
This commit is contained in:
MaxOvs
parent
43a9256258
commit
2a26967058
2
.gitignore
vendored
2
.gitignore
vendored
@ -1,4 +1,4 @@
|
|||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
.parcel-cache
|
.parcel-cache
|
||||||
example
|
|
||||||
|
|||||||
50
example/example.js
Normal file
50
example/example.js
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
const firstBtn = document.getElementById('first');
|
||||||
|
const codeFirst = document.getElementById('codeFirst');
|
||||||
|
|
||||||
|
const secondBtn = document.getElementById('second');
|
||||||
|
const codeSecond = document.getElementById('codeSecond');
|
||||||
|
|
||||||
|
const thirdBtn = document.getElementById('third');
|
||||||
|
const codeThird = document.getElementById('codeThird');
|
||||||
|
|
||||||
|
const fourthBtn = document.getElementById('fourth');
|
||||||
|
const codeFourth = document.getElementById('codeFourth');
|
||||||
|
|
||||||
|
const fifthBtn = document.getElementById('fifth');
|
||||||
|
const codeFifth = document.getElementById('codeFifth');
|
||||||
|
|
||||||
|
const six = document.getElementById('six')
|
||||||
|
const codeSix = document.getElementById('codeSix');
|
||||||
|
|
||||||
|
|
||||||
|
const Native = document.getElementById('Native')
|
||||||
|
const codeNative = document.getElementById('codeNative')
|
||||||
|
|
||||||
|
|
||||||
|
firstBtn.addEventListener('click', () => {
|
||||||
|
codeFirst.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
secondBtn.addEventListener('click', () => {
|
||||||
|
codeSecond.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
thirdBtn.addEventListener('click', () => {
|
||||||
|
codeThird.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
fourthBtn.addEventListener('click', () => {
|
||||||
|
codeFourth.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
fifthBtn.addEventListener('click', () => {
|
||||||
|
codeFifth.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
six.addEventListener('click', () => {
|
||||||
|
codeSix.classList.toggle("active")
|
||||||
|
})
|
||||||
|
|
||||||
|
Native.addEventListener('click', () => {
|
||||||
|
codeNative.classList.toggle("active")
|
||||||
|
})
|
||||||
212
example/example.scss
Normal file
212
example/example.scss
Normal file
@ -0,0 +1,212 @@
|
|||||||
|
@import '/src/main.scss';
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-size: 14px;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-example {
|
||||||
|
background: #000000c4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 900px;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
-webkit-box-align: baseline;
|
||||||
|
-ms-flex-align: baseline;
|
||||||
|
align-items: baseline;
|
||||||
|
|
||||||
|
-webkit-box-pack: justify;
|
||||||
|
-ms-flex-pack: justify;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #2a2f3b;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 57px;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Times New Roman', Times, serif;
|
||||||
|
margin: 40px 0 12px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logoBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__logo {
|
||||||
|
width: 13%;
|
||||||
|
height: 16%;
|
||||||
|
border: 1px solid #525252;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
margin: 22px 0 0 29px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navlist {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 15px 0 30px 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 230px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin-top: 15px;
|
||||||
|
border-radius: 5px;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-ms-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-select {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #5c5c5c;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
|
||||||
|
&_title {
|
||||||
|
height: 45px;
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
color: white;
|
||||||
|
padding: 20px 0 0 40px;
|
||||||
|
margin: 0 0 30px 0;
|
||||||
|
background-color: #2a2f3b;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&_submit {
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: none;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin: 20px 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
-moz-transition: 1s;
|
||||||
|
-ms-transition: 1s;
|
||||||
|
-o-transition: 1s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d7d7d7;
|
||||||
|
transition: 1s;
|
||||||
|
-webkit-transition: 1s;
|
||||||
|
-moz-transition: 1s;
|
||||||
|
-ms-transition: 1s;
|
||||||
|
-o-transition: 1s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-select {
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: #1e1e1e;
|
||||||
|
margin: 15px;
|
||||||
|
padding: 15px;
|
||||||
|
color: #88d0f7;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
&__class,
|
||||||
|
&__var,
|
||||||
|
&__string,
|
||||||
|
&__keyword {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
&__class {
|
||||||
|
color: #4ec9b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__var {
|
||||||
|
color: #34a7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__string {
|
||||||
|
color: #ce9178;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__keyword {
|
||||||
|
color: #5090ca;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-code {
|
||||||
|
width: 200px;
|
||||||
|
height: 35px;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin: 20px 15px;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 576px) {
|
||||||
|
.container {
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
margin-top: 15px;
|
||||||
|
h1 {
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-select_title {
|
||||||
|
font-size: 14px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
359
example/index.html
Normal file
359
example/index.html
Normal file
@ -0,0 +1,359 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Feature rich Select control for React/JS with multiselect, autocomplete and styling"
|
||||||
|
/>
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="cg-select" />
|
||||||
|
<meta property="og:url" content="https://cg-select.itguild.info" />
|
||||||
|
<meta property="og:image" content="/src/images/logoCG.jpg" />
|
||||||
|
|
||||||
|
<title>Cg-Select</title>
|
||||||
|
<link href="example.scss" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body class="body-example">
|
||||||
|
<div class="container">
|
||||||
|
<header class="header">
|
||||||
|
<div class="header__logoBox">
|
||||||
|
<h1>CG-SELECT</h1>
|
||||||
|
<img src="/src/images/logoCG.jpg" alt="#" class="header__logo" />
|
||||||
|
</div>
|
||||||
|
<hr style="width: 55%" />
|
||||||
|
<nav>
|
||||||
|
<ul class="navlist">
|
||||||
|
<li><a href="">Home</a></li>
|
||||||
|
<li><a href="../documentation/index.html">Documentation</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container content">
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Дефолтный селект</h2>
|
||||||
|
<form method="get" class="form">
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_one"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="submit" value="Отправить!" class="example-select_submit" />
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="first">Посмотреть код</button>
|
||||||
|
<code id="codeFirst">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||||
|
lable: <span class="code__string">'EXAMPLE',</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Дефолтный селект с функцией nativeSelectMode</h2>
|
||||||
|
|
||||||
|
<form method="get" class="form">
|
||||||
|
<p style="margin-left: 12px; color: white">
|
||||||
|
*При мобильном разрешении появляеться нативный селект.
|
||||||
|
</p>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="Native">Посмотреть код</button>
|
||||||
|
<code id="codeNative">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||||
|
nativeSelectMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h2 class="example-select_title">Дефолтный селект с функцией listDisplayMode</h2>
|
||||||
|
|
||||||
|
<form method="get" class="form">
|
||||||
|
<p style="margin-left: 12px; color: white">
|
||||||
|
*При использовании данного метода лист с выбором появляеться как модальное окно.
|
||||||
|
</p>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="six">Посмотреть код</button>
|
||||||
|
|
||||||
|
<code id="codeSix">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||||
|
listDisplayMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Селект с данными с URL</h1>
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="check-code" id="second">Посмотреть код</button>
|
||||||
|
|
||||||
|
<code id="codeSecond">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_three',</span>
|
||||||
|
placeholder: <span class="code__string">'URL',</span>
|
||||||
|
url: <span class="code__string">'https://jsonplaceholder.typicode.com/users',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
darkTheme: <span class="code__keyword">false,</span>
|
||||||
|
language: <span class="code__string">'ru',</span>
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Категории</h1>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="check-code" id="third">Посмотреть код</button>
|
||||||
|
|
||||||
|
<code id="codeThird">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_categories',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите регион',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'Russia',</span>
|
||||||
|
categoryItems: [
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'28qwds',</span>
|
||||||
|
title: <span class="code__string">'Москва',</span>
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Ростов-на-дону',</span>
|
||||||
|
<span class="code__string">'Саратов',</span>
|
||||||
|
<span class="code__string">'Волгоград',</span>
|
||||||
|
<span class="code__string">'Донецк',</span>
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'USA',</span>
|
||||||
|
categoryItems: <span class="code__string">[
|
||||||
|
'Alabama',
|
||||||
|
'Texas',
|
||||||
|
'Colorado',
|
||||||
|
'Klirens',
|
||||||
|
'Los-Angeles'],</span>
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: <span class="code__string">'France',</span>
|
||||||
|
categoryItems: <span class="code__string">['Paris'],</span>
|
||||||
|
},
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: <span class="code__string">'500px ',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
multiselectTag: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Управление с помошью кнопок</h1>
|
||||||
|
<div style="margin-bottom: 15px">
|
||||||
|
<button class="button__open example-select_submit">Open</button>
|
||||||
|
<button class="button__close example-select_submit">Close</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_usedBtn"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="fourth">Посмотреть код</button>
|
||||||
|
|
||||||
|
<code id="codeFourth">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'max',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
backgroundColor: <span class="code__string">'rgb(176 223 167)',</span>
|
||||||
|
},
|
||||||
|
caret: {
|
||||||
|
borderTop: <span class="code__string">'6px solid black',</span>
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
backgroundColor: <span class="code__string">'#d7ffff',</span>
|
||||||
|
borderRadius: <span class="code__string">'5px',</span>
|
||||||
|
borderBottom: <span class="code__string">'none',</span>
|
||||||
|
width: <span class="code__string">'95%',</span>
|
||||||
|
color: <span class="code__string">'black',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Функция disabled</h1>
|
||||||
|
|
||||||
|
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
||||||
|
<label for="checkboxDisable" style="color: white">Вы согласны на обработку данных</label>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" class="check-code" id="fifth">Посмотреть код</button>
|
||||||
|
<code id="codeFifth">
|
||||||
|
<pre>
|
||||||
|
<span class="code__keyword">const</span> <span class="code__var">dropdown</span> = <span class="code__keyword">new</span> <span class="code__class">DropDown</span>({
|
||||||
|
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
||||||
|
placeholder: <span class="code__string">'Выберите авто',</span>
|
||||||
|
searchMode: <span class="code__keyword">true,</span>
|
||||||
|
items: [
|
||||||
|
<span class="code__string">'BMW',</span>
|
||||||
|
{
|
||||||
|
id: <span class="code__string">'213sade',</span>
|
||||||
|
title: <span class="code__string">'Opel',</span>
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
<span class="code__string">'Mersedes',</span>
|
||||||
|
<span class="code__string">'MAN',</span>
|
||||||
|
<span class="code__string">'Ferari',</span>
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: <span class="code__string">'830px',</span>
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: <span class="code__string">'824px',</span>
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: <span class="code__string">'500px ',</span>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script type="module" src="index.js"></script>
|
||||||
|
</html>
|
||||||
232
example/index.js
Normal file
232
example/index.js
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
import DropDown from '../index';
|
||||||
|
import './example';
|
||||||
|
|
||||||
|
// ------------------------------Обычный селект--------------------
|
||||||
|
const dropdown = new DropDown({
|
||||||
|
selector: '.cg-dropdown_one',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
lable: 'EXAMPLE',
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------NativeSelect-----------------------
|
||||||
|
const dropdownNativeSelect = new DropDown({
|
||||||
|
selector: '.cg-dropdown_selectNative',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
nativeSelectMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
'Kamaz',
|
||||||
|
'Ural'
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------listDisplayMode--------------------
|
||||||
|
const dropdownlistDisplayMode = new DropDown({
|
||||||
|
selector: '.cg-dropdown_listDisplayMode',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
listDisplayMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'Ferari',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// ------------------------------URL--------------------
|
||||||
|
const dropdown3 = new DropDown({
|
||||||
|
selector: '.cg-dropdown_three',
|
||||||
|
placeholder: 'URL',
|
||||||
|
url: 'https://jsonplaceholder.typicode.com/users',
|
||||||
|
searchMode: true,
|
||||||
|
darkTheme: false,
|
||||||
|
language: 'ru',
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// --------------------------------Категории--------------------------
|
||||||
|
const dropdown4 = new DropDown({
|
||||||
|
selector: '.cg-dropdown_categories',
|
||||||
|
placeholder: 'Выберите регион',
|
||||||
|
searchMode: true,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
category: 'Russia',
|
||||||
|
categoryItems: [
|
||||||
|
{
|
||||||
|
id: '28qwds',
|
||||||
|
title: 'Москва',
|
||||||
|
value: 0,
|
||||||
|
},
|
||||||
|
,
|
||||||
|
'Ростов-на-дону',
|
||||||
|
'Саратов',
|
||||||
|
'Волгоград',
|
||||||
|
'Донецк',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'USA',
|
||||||
|
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'France',
|
||||||
|
categoryItems: ['Paris'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: '500px ',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: true,
|
||||||
|
multiselectTag: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
//----------------управление с помощью кнопок----------------------------------
|
||||||
|
const dropdownBtn = new DropDown({
|
||||||
|
selector: '.cg-dropdown_usedBtn',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
searchMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
color: 'black',
|
||||||
|
backgroundColor: 'rgb(176 223 167)',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
color: 'black',
|
||||||
|
backgroundColor: 'rgb(176 223 167)',
|
||||||
|
},
|
||||||
|
caret: {
|
||||||
|
borderTop: '6px solid black',
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
backgroundColor: '#d7ffff',
|
||||||
|
borderRadius: '5px',
|
||||||
|
borderBottom: 'none',
|
||||||
|
width: '95%',
|
||||||
|
color: 'black',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const buttonOpen = document.querySelector('.button__open');
|
||||||
|
const buttonClose = document.querySelector('.button__close');
|
||||||
|
|
||||||
|
dropdownBtn.buttonControl(buttonOpen, 'open');
|
||||||
|
dropdownBtn.buttonControl(buttonClose, 'close');
|
||||||
|
|
||||||
|
//-------------------------Функция Disabled----------------------------------
|
||||||
|
const dropdownDisabled = new DropDown({
|
||||||
|
selector: '.cg-dropdown_checkboxDisable',
|
||||||
|
placeholder: 'Выберите авто',
|
||||||
|
searchMode: true,
|
||||||
|
items: [
|
||||||
|
'BMW',
|
||||||
|
{
|
||||||
|
id: '213sade',
|
||||||
|
title: 'Opel',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
'Mersedes',
|
||||||
|
'MAN',
|
||||||
|
'max',
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: '830px',
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: '824px',
|
||||||
|
},
|
||||||
|
placeholder: {
|
||||||
|
maxWidth: '500px ',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: true,
|
||||||
|
});
|
||||||
|
dropdownDisabled.disabled(true);
|
||||||
|
let chbox = document.getElementById('checkboxDisable');
|
||||||
|
|
||||||
|
chbox.addEventListener('click', () => {
|
||||||
|
if (chbox.checked == true) {
|
||||||
|
dropdownDisabled.disabled(false);
|
||||||
|
} else {
|
||||||
|
dropdownDisabled.disabled(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user