Update 0.2.5
This commit is contained in:
MaxOvs19
@ -1,50 +0,0 @@
|
||||
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")
|
||||
})
|
||||
@ -1,363 +0,0 @@
|
||||
<!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 rel="shortcut icon" href="../src/images/logoCG2.ico" type="image/x-icon" />
|
||||
<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="/docs/index.html">Documentation</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
<div class="container content">
|
||||
<div class="example-select">
|
||||
<h2 class="example-select_title">Default select</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">View code</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">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</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">Default select with function nativeSelectMode</h2>
|
||||
|
||||
<form method="get" class="form">
|
||||
<p style="margin-left: 12px; color: white">
|
||||
*Native select appears on mobile resolution.
|
||||
</p>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_selectNative"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="Native">View code</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">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_one',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</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">Default select with function listDisplayMode</h2>
|
||||
|
||||
<form method="get" class="form">
|
||||
<p style="margin-left: 12px; color: white">
|
||||
*When using this method, the selection sheet appears as a modal window.
|
||||
</p>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_listDisplayMode"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="six">View code</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">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_listDisplayMode',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</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">Select with data from URL</h1>
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_three"></button>
|
||||
</div>
|
||||
<button type="button" class="check-code" id="second">View code</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">CGSelect</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">Categories</h1>
|
||||
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_categories"></button>
|
||||
</div>
|
||||
<button type="button" class="check-code" id="third">View code</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">CGSelect</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">Button control</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">View code</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">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_usedBtn',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</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">Function disabled</h1>
|
||||
|
||||
<input type="checkbox" name="chbx" id="checkboxDisable" style="margin: 16px" />
|
||||
<label for="checkboxDisable" style="color: white">
|
||||
You agree to the processing of data</label
|
||||
>
|
||||
|
||||
<div class="layout-select">
|
||||
<button class="cg-dropdown cg-dropdown_checkboxDisable"></button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="check-code" id="fifth">View code</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">CGSelect</span>({
|
||||
selector: <span class="code__string">'.cg-dropdown_checkboxDisable',</span>
|
||||
placeholder: <span class="code__string">'Choose a car',</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>
|
||||
},
|
||||
},
|
||||
multiselect: <span class="code__keyword">true,</span>
|
||||
});
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="module" src="index.js"></script>
|
||||
</html>
|
||||
238
example/index.js
238
example/index.js
@ -1,238 +0,0 @@
|
||||
import { CGSelect } from '../src/cg-select';
|
||||
import './example';
|
||||
|
||||
// ------------------------------Обычный селект--------------------
|
||||
const dropdown = new CGSelect({
|
||||
selector: '.cg-dropdown_one',
|
||||
placeholder: 'Choose a car',
|
||||
label: 'EXAMPLE',
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
id: '213sade',
|
||||
title: 'Opel',
|
||||
value: 1,
|
||||
},
|
||||
'Mersedes',
|
||||
'MAN',
|
||||
'Ferari',
|
||||
],
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
dropdown.on('clear', function (e) {
|
||||
console.log(`this state: ${e}`);
|
||||
});
|
||||
|
||||
// ------------------------------NativeSelect-----------------------
|
||||
const dropdownNativeSelect = new CGSelect({
|
||||
selector: '.cg-dropdown_selectNative',
|
||||
placeholder: 'Choose a car',
|
||||
nativeSelectMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
id: '213sade',
|
||||
title: 'Opel',
|
||||
value: 1,
|
||||
},
|
||||
'Mersedes',
|
||||
'MAN',
|
||||
'Ferari',
|
||||
'Kamaz',
|
||||
'Ural',
|
||||
],
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
theme: 'dark',
|
||||
});
|
||||
|
||||
// ------------------------------listDisplayMode--------------------
|
||||
const dropdownlistDisplayMode = new CGSelect({
|
||||
selector: '.cg-dropdown_listDisplayMode',
|
||||
placeholder: 'Choose a car',
|
||||
listDisplayMode: true,
|
||||
items: [
|
||||
'BMW',
|
||||
{
|
||||
id: '213sade',
|
||||
title: 'Opel',
|
||||
value: 1,
|
||||
},
|
||||
'Mersedes',
|
||||
'MAN',
|
||||
'Ferari',
|
||||
],
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// --------------------------------Категории--------------------------
|
||||
const dropdown4 = new CGSelect({
|
||||
selector: '.cg-dropdown_categories',
|
||||
placeholder: 'Choose region',
|
||||
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 CGSelect({
|
||||
selector: '.cg-dropdown_usedBtn',
|
||||
placeholder: 'Choose a car',
|
||||
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 CGSelect({
|
||||
selector: '.cg-dropdown_checkboxDisable',
|
||||
placeholder: 'Choose a car',
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// ------------------------------URL--------------------
|
||||
const dropdown3 = new CGSelect({
|
||||
selector: '.cg-dropdown_three',
|
||||
placeholder: 'URL',
|
||||
url: 'https://jsonplaceholder.typicode.com/todos',
|
||||
searchMode: true,
|
||||
darkTheme: false,
|
||||
language: 'ru',
|
||||
styles: {
|
||||
head: {
|
||||
width: '830px',
|
||||
},
|
||||
list: {
|
||||
width: '824px',
|
||||
},
|
||||
},
|
||||
multiselect: true,
|
||||
});
|
||||
Reference in New Issue
Block a user