Fixed description and layout
This commit is contained in:
MaxOvs19
parent
5fc17c7c2d
commit
45df42825f
46
index.html
46
index.html
@ -420,6 +420,52 @@
|
|||||||
</code>
|
</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="example-select">
|
||||||
|
<h1 class="example-select_title">Use callbacks</h1>
|
||||||
|
|
||||||
|
<div class="layout-select">
|
||||||
|
<div class="col">
|
||||||
|
<p style="color: white;">When using a callback, you can pass in the first parameter such values as: <span class="code__string">open, close, select, clear</span>.
|
||||||
|
<br>The second parameter is a function in which there are two parameters: <span class="code__string">state</span> and <span class="code__string">value</span>.
|
||||||
|
<br>The output of the value can be seen in the browser console.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button class="cg-dropdown cg-dropdown_callback"></button>
|
||||||
|
</div>
|
||||||
|
<button type="button" class="check-code" id="callback">View code</button>
|
||||||
|
|
||||||
|
<code id="codeCallback">
|
||||||
|
<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">'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>
|
||||||
|
},
|
||||||
|
},
|
||||||
|
multiselect: <span class="code__keyword">true,</span>
|
||||||
|
multiselectTag: <span class="code__keyword">true,</span>
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="example-select">
|
<div class="example-select">
|
||||||
<h1 class="example-select_title">Button control</h1>
|
<h1 class="example-select_title">Button control</h1>
|
||||||
<div style="margin-bottom: 15px">
|
<div style="margin-bottom: 15px">
|
||||||
|
|||||||
242
index.js
242
index.js
@ -1,31 +1,31 @@
|
|||||||
import CGSelect from 'cg-select';
|
import CGSelect from "cg-select";
|
||||||
// import { newCustomTheme } from './src/themeTest';
|
// import { newCustomTheme } from './src/themeTest';
|
||||||
|
|
||||||
import './src/example';
|
import "./src/example";
|
||||||
import './src/constructor/constructor';
|
import "./src/constructor/constructor";
|
||||||
|
|
||||||
// ------------------------------Обычный селект--------------------
|
// ------------------------------Обычный селект--------------------
|
||||||
const dropdown = new CGSelect({
|
const dropdown = new CGSelect({
|
||||||
selector: '.cg-dropdown_one',
|
selector: ".cg-dropdown_one",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
label: 'EXAMPLE',
|
label: "EXAMPLE",
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'Ferari',
|
"Ferari",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -35,123 +35,123 @@ const dropdown = new CGSelect({
|
|||||||
// });
|
// });
|
||||||
|
|
||||||
const droptheme = new CGSelect({
|
const droptheme = new CGSelect({
|
||||||
selector: '.cg-dropdown_theme',
|
selector: ".cg-dropdown_theme",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'Ferari',
|
"Ferari",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
theme: 'dark',
|
theme: "dark",
|
||||||
});
|
});
|
||||||
// ------------------------------NativeSelect-----------------------
|
// ------------------------------NativeSelect-----------------------
|
||||||
const dropdownNativeSelect = new CGSelect({
|
const dropdownNativeSelect = new CGSelect({
|
||||||
selector: '.cg-dropdown_selectNative',
|
selector: ".cg-dropdown_selectNative",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
nativeSelectMode: true,
|
nativeSelectMode: true,
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'Ferari',
|
"Ferari",
|
||||||
'Kamaz',
|
"Kamaz",
|
||||||
'Ural',
|
"Ural",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
theme: 'dark',
|
theme: "dark",
|
||||||
});
|
});
|
||||||
|
|
||||||
// ------------------------------listDisplayMode--------------------
|
// ------------------------------listDisplayMode--------------------
|
||||||
const dropdownlistDisplayMode = new CGSelect({
|
const dropdownlistDisplayMode = new CGSelect({
|
||||||
selector: '.cg-dropdown_listDisplayMode',
|
selector: ".cg-dropdown_listDisplayMode",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
listDisplayMode: true,
|
listDisplayMode: true,
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'Ferari',
|
"Ferari",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// --------------------------------Категории--------------------------
|
// --------------------------------Категории--------------------------
|
||||||
const dropdown4 = new CGSelect({
|
const dropdown4 = new CGSelect({
|
||||||
selector: '.cg-dropdown_categories',
|
selector: ".cg-dropdown_categories",
|
||||||
placeholder: 'Choose region',
|
placeholder: "Choose region",
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
category: 'Russia',
|
category: "Russia",
|
||||||
categoryItems: [
|
categoryItems: [
|
||||||
{
|
{
|
||||||
id: '28qwds',
|
id: "28qwds",
|
||||||
title: 'Москва',
|
title: "Москва",
|
||||||
value: 0,
|
value: 0,
|
||||||
},
|
},
|
||||||
,
|
,
|
||||||
'Ростов-на-дону',
|
"Ростов-на-дону",
|
||||||
'Саратов',
|
"Саратов",
|
||||||
'Волгоград',
|
"Волгоград",
|
||||||
'Донецк',
|
"Донецк",
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
category: 'USA',
|
category: "USA",
|
||||||
categoryItems: ['Alabama', 'Texas', 'Colorado', 'Klirens', 'Los-Angeles'],
|
categoryItems: ["Alabama", "Texas", "Colorado", "Klirens", "Los-Angeles"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
category: 'France',
|
category: "France",
|
||||||
categoryItems: ['Paris'],
|
categoryItems: ["Paris"],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
maxWidth: '500px ',
|
maxWidth: "500px ",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
@ -160,84 +160,84 @@ const dropdown4 = new CGSelect({
|
|||||||
|
|
||||||
//----------------управление с помощью кнопок----------------------------------
|
//----------------управление с помощью кнопок----------------------------------
|
||||||
const dropdownBtn = new CGSelect({
|
const dropdownBtn = new CGSelect({
|
||||||
selector: '.cg-dropdown_usedBtn',
|
selector: ".cg-dropdown_usedBtn",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'max',
|
"max",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
color: 'black',
|
color: "black",
|
||||||
backgroundColor: 'rgb(176 223 167)',
|
backgroundColor: "rgb(176 223 167)",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
color: 'black',
|
color: "black",
|
||||||
backgroundColor: 'rgb(176 223 167)',
|
backgroundColor: "rgb(176 223 167)",
|
||||||
},
|
},
|
||||||
caret: {
|
caret: {
|
||||||
borderTop: '6px solid black',
|
borderTop: "6px solid black",
|
||||||
},
|
},
|
||||||
search: {
|
search: {
|
||||||
backgroundColor: '#d7ffff',
|
backgroundColor: "#d7ffff",
|
||||||
borderRadius: '5px',
|
borderRadius: "5px",
|
||||||
borderBottom: 'none',
|
borderBottom: "none",
|
||||||
width: '95%',
|
width: "95%",
|
||||||
color: 'black',
|
color: "black",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const buttonOpen = document.querySelector('.button__open');
|
const buttonOpen = document.querySelector(".button__open");
|
||||||
const buttonClose = document.querySelector('.button__close');
|
const buttonClose = document.querySelector(".button__close");
|
||||||
|
|
||||||
dropdownBtn.buttonControl(buttonOpen, 'open');
|
dropdownBtn.buttonControl(buttonOpen, "open");
|
||||||
dropdownBtn.buttonControl(buttonClose, 'close');
|
dropdownBtn.buttonControl(buttonClose, "close");
|
||||||
|
|
||||||
//-------------------------Функция Disabled----------------------------------
|
//-------------------------Функция Disabled----------------------------------
|
||||||
const dropdownDisabled = new CGSelect({
|
const dropdownDisabled = new CGSelect({
|
||||||
selector: '.cg-dropdown_checkboxDisable',
|
selector: ".cg-dropdown_checkboxDisable",
|
||||||
placeholder: 'Choose a car',
|
placeholder: "Choose a car",
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
items: [
|
items: [
|
||||||
'BMW',
|
"BMW",
|
||||||
{
|
{
|
||||||
id: '213sade',
|
id: "213sade",
|
||||||
title: 'Opel',
|
title: "Opel",
|
||||||
value: 1,
|
value: 1,
|
||||||
},
|
},
|
||||||
'Mersedes',
|
"Mersedes",
|
||||||
'MAN',
|
"MAN",
|
||||||
'max',
|
"max",
|
||||||
],
|
],
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
placeholder: {
|
placeholder: {
|
||||||
maxWidth: '500px ',
|
maxWidth: "500px ",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
});
|
});
|
||||||
dropdownDisabled.disabled(true);
|
dropdownDisabled.disabled(true);
|
||||||
let chbox = document.getElementById('checkboxDisable');
|
let chbox = document.getElementById("checkboxDisable");
|
||||||
|
|
||||||
chbox.addEventListener('click', () => {
|
chbox.addEventListener("click", () => {
|
||||||
if (chbox.checked == true) {
|
if (chbox.checked == true) {
|
||||||
dropdownDisabled.disabled(false);
|
dropdownDisabled.disabled(false);
|
||||||
} else {
|
} else {
|
||||||
@ -247,19 +247,47 @@ chbox.addEventListener('click', () => {
|
|||||||
|
|
||||||
// ------------------------------URL--------------------
|
// ------------------------------URL--------------------
|
||||||
const dropdown3 = new CGSelect({
|
const dropdown3 = new CGSelect({
|
||||||
selector: '.cg-dropdown_three',
|
selector: ".cg-dropdown_three",
|
||||||
placeholder: 'URL',
|
placeholder: "URL",
|
||||||
url: 'https://jsonplaceholder.typicode.com/todos',
|
url: "https://jsonplaceholder.typicode.com/todos",
|
||||||
searchMode: true,
|
searchMode: true,
|
||||||
darkTheme: false,
|
darkTheme: false,
|
||||||
language: 'ru',
|
language: "ru",
|
||||||
styles: {
|
styles: {
|
||||||
head: {
|
head: {
|
||||||
width: '830px',
|
width: "830px",
|
||||||
},
|
},
|
||||||
list: {
|
list: {
|
||||||
width: '824px',
|
width: "824px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
multiselect: true,
|
multiselect: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const dropCall = new CGSelect({
|
||||||
|
selector: ".cg-dropdown_callback",
|
||||||
|
placeholder: "Choose a car",
|
||||||
|
items: [
|
||||||
|
"BMW",
|
||||||
|
{
|
||||||
|
id: "213sade",
|
||||||
|
title: "Opel",
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
"Mersedes",
|
||||||
|
"MAN",
|
||||||
|
"Ferari",
|
||||||
|
],
|
||||||
|
styles: {
|
||||||
|
head: {
|
||||||
|
width: "830px",
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
width: "824px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
dropCall.on("select", (state, value) => {
|
||||||
|
console.log(value);
|
||||||
|
});
|
||||||
|
|||||||
@ -1,48 +1,55 @@
|
|||||||
const firstBtn = document.getElementById('first');
|
const firstBtn = document.getElementById("first");
|
||||||
const codeFirst = document.getElementById('codeFirst');
|
const codeFirst = document.getElementById("codeFirst");
|
||||||
|
|
||||||
const secondBtn = document.getElementById('second');
|
const secondBtn = document.getElementById("second");
|
||||||
const codeSecond = document.getElementById('codeSecond');
|
const codeSecond = document.getElementById("codeSecond");
|
||||||
|
|
||||||
const thirdBtn = document.getElementById('third');
|
const thirdBtn = document.getElementById("third");
|
||||||
const codeThird = document.getElementById('codeThird');
|
const codeThird = document.getElementById("codeThird");
|
||||||
|
|
||||||
const fourthBtn = document.getElementById('fourth');
|
const fourthBtn = document.getElementById("fourth");
|
||||||
const codeFourth = document.getElementById('codeFourth');
|
const codeFourth = document.getElementById("codeFourth");
|
||||||
|
|
||||||
const fifthBtn = document.getElementById('fifth');
|
const fifthBtn = document.getElementById("fifth");
|
||||||
const codeFifth = document.getElementById('codeFifth');
|
const codeFifth = document.getElementById("codeFifth");
|
||||||
|
|
||||||
const six = document.getElementById('six');
|
const six = document.getElementById("six");
|
||||||
const codeSix = document.getElementById('codeSix');
|
const codeSix = document.getElementById("codeSix");
|
||||||
|
|
||||||
const Native = document.getElementById('Native');
|
const Native = document.getElementById("Native");
|
||||||
const codeNative = document.getElementById('codeNative');
|
const codeNative = document.getElementById("codeNative");
|
||||||
|
|
||||||
firstBtn.addEventListener('click', () => {
|
const callback = document.getElementById("callback");
|
||||||
codeFirst.classList.toggle('active');
|
const codeCallback = document.getElementById("codeCallback");
|
||||||
|
|
||||||
|
firstBtn.addEventListener("click", () => {
|
||||||
|
codeFirst.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
secondBtn.addEventListener('click', () => {
|
secondBtn.addEventListener("click", () => {
|
||||||
codeSecond.classList.toggle('active');
|
codeSecond.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
thirdBtn.addEventListener('click', () => {
|
thirdBtn.addEventListener("click", () => {
|
||||||
codeThird.classList.toggle('active');
|
codeThird.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
fourthBtn.addEventListener('click', () => {
|
fourthBtn.addEventListener("click", () => {
|
||||||
codeFourth.classList.toggle('active');
|
codeFourth.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
fifthBtn.addEventListener('click', () => {
|
fifthBtn.addEventListener("click", () => {
|
||||||
codeFifth.classList.toggle('active');
|
codeFifth.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
six.addEventListener('click', () => {
|
six.addEventListener("click", () => {
|
||||||
codeSix.classList.toggle('active');
|
codeSix.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
Native.addEventListener('click', () => {
|
Native.addEventListener("click", () => {
|
||||||
codeNative.classList.toggle('active');
|
codeNative.classList.toggle("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
callback.addEventListener("click", () => {
|
||||||
|
codeCallback.classList.toggle("active");
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user