یک کامپوننت فیلتر کشویی جاوا اسکریپت با URL های قابل اشتراک گذاری بسازید

در این آموزش جدید، نحوه ایجاد یک مولفه فیلتر کشویی جاوا اسکریپت را می آموزیم که در آن هر گزینه فیلتر یک URL قابل اشتراک گذاری منحصر به فرد خواهد داشت. هنگامی که یک گزینه خاص را فیلتر می کنیم، URL صفحه تغییر می کند. سپس، اگر آن URL را بگیریم و آن را در مرورگر/پنجره دیگری باز کنیم، فقط کادرهای مرتبط ظاهر خواهند شد.

چیزی که قراره بسازیم

در اینجا جزء فیلتر کشویی ما است – حتماً نسخه ی نمایشی را در حالت اشکال زدایی مشاهده کنید و بررسی کنید که URL صفحه پس از فیلتر کردن چگونه تغییر می کند!

<br />

1. با نشانه گذاری HTML شروع کنید

داخل ظرفی قرار می دهیم:

بسته بندی کشویی و

عناصر (جعبه‌هایی) که می‌خواهیم فیلتر کنیم.

بسته بندی کشویی شامل موارد زیر خواهد بود:

ماشه کشویی

خود کشویی با گزینه های فیلتر موجود (رنگ ها) و

شمارنده ای از رنگ های قابل مشاهده

برای گروه بندی جعبه ها تحت یک رنگ خاص، هر کدام از آنها را دریافت می کند data-type ویژگی با مقداری که با مقدار ID مطابقت دارد (می‌توانیم به جای آن از یک ویژگی سفارشی نیز استفاده کنیم) گزینه فیلتر مرتبط.

به طور پیش فرض، تمام کادرها ظاهر می شوند. برای نشان دادن گزینه انتخاب شده مربوطه در منوی کشویی، آیتم والد آن را به آن می دهیم active کلاس

به طور معمول، به عنوان مثال با یک وب سایت وردپرس، همه این داده ها از backend می آیند.

ساختار مورد نیاز را در نظر بگیرید:

1	class="container">
2	class="dropdown-wrapper">
3
4	Filter Colors
5	width="24" height="24" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg">
6	d="m16.843 10.211c.108-.141.157-.3.157-.456 0-.389-.306-.755-.749-.755h-8.501c-.445 0-.75.367-.75.755 0 .157.05.316.159.457 1.203 1.554 3.252 4.199 4.258 5.498.142.184.36.29.592.29.23 0 .449-.107.591-.291 1.002-1.299 3.044-3.945 4.243-5.498z" />
7
8
9	class="dropdown">
10
11	class="active">
12	id="all" href="">All Colors
13
14
15	id="red" href="">Red
16
17
18	id="blue" href="">Blue
19
20
21
22
23	class="count">Showing 28 of 28 colors
24
25
26	class="red" data-type="red">
27	class="gray" data-type="gray">
28
29
30

اینجا من فقط استفاده کردم aria-expanded ویژگی ARIA، اما شما می توانید بر اساس آن بنا کنید و کامپوننت را در دسترس تر کنید!

2. CSS را اضافه کنید

بیایید اکنون روی سبک های کلیدی تمرکز کنیم – فعلاً سبک های مقدماتی را ترک می کنم.

در مورد سبک های کشویی:

هر دو کلید کشویی و کشویی حداکثر عرض 400 پیکسل خواهند داشت.

فهرست کرکره ای به طور پیش فرض پنهان می شود، کاملاً در داخل محفظه خود قرار می گیرد و زیر ماشه کشویی قرار می گیرد.

منوی کشویی دارای ارتفاع ثابت 300 پیکسل خواهد بود، بنابراین به طور پیش فرض، یک نوار اسکرول مدل داده شده ظاهر می شود.

در اینجا این است که چگونه کرکره در حالت بسته و باز به نظر می رسد:

وضعیت نزدیک کشویی ما — حالت بسته کشویی ما

سبک های مرتبط:

/*CUSTOM VARIABLES HERE*/

.dropdown-wrapper {
  position: relative;
}

.dropdown-wrapper .dropdown-toggle,
.dropdown-wrapper .dropdown {
  width: 100%;
  max-width: 400px;
  border-radius: 5px;
  border: 1px solid #adb5bd;
  background: var(--white);
}

.dropdown-wrapper .dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 26px;
  text-align: left;
  cursor: pointer;
  font-size: 100%;
  height: 50px;
}

.dropdown-wrapper .dropdown-toggle svg {
  transition: transform 0.3s;
}

.dropdown-wrapper .dropdown {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  padding: 10px 10px 10px 0;
  z-index: 1;
}

.dropdown-wrapper .dropdown ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 300px;
  overflow-y: auto;
}

.dropdown-wrapper .dropdown ul::-webkit-scrollbar {
  width: 10px;
}

.dropdown-wrapper .dropdown ul::-webkit-scrollbar-thumb {
  background: #e0e0e0;
}

.dropdown-wrapper .dropdown li a {
  display: block;
  padding: 15px 26px;
  color: inherit;
  text-decoration: none;
  transition: background 0.1s;
}

.dropdown-wrapper .dropdown li.active a,
.dropdown-wrapper .dropdown li a:hover {
  background: var(--light-gray);
}

سبک جعبه

ما از CSS Grid و قدرتمند آن استفاده خواهیم کرد minmax() عملکردی برای ایجاد یک طرح چند ستونی پاسخگو بدون استفاده از هرگونه درخواست رسانه ای که در آن هر کادر حداقل 200 پیکسل در 200 پیکسل باشد.

در اینجا طرح به نظر می رسد:

سبک های مرتبط:

.boxes {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.boxes li {
  aspect-ratio: 1;
}

منبع: https://webdesign.tutsplus.com/javascript-dropdown-filter-component-with-shareable-urls–cms-108720t

1	const dropdownWrapper =document.querySelector(".dropdown-wrapper");
2	const dropdownToggle = dropdownWrapper.querySelector(".dropdown-toggle");
3	const OPEN_CLASS = "open";
4
5	dropdownToggle.addEventListener("click", function () {
6	if (this.getAttribute("aria-expanded") == "true") {
7	this.setAttribute("aria-expanded", "false");
8	} else {
9	this.setAttribute("aria-expanded", "true");
10	}
11	dropdownWrapper.classList.toggle(OPEN_CLASS);
12	});

1	...
2
3	dropdownLinks.forEach(function (link) {
4	link.addEventListener("click", function (e) {
5	e.preventDefault();
6	const parent = this.parentElement;
7	const color = this.getAttribute("id");
8	// 1
9	dropdown.querySelector("li.active").classList.remove(ACTIVE_CLASS);
10	// 2
11	parent.classList.add(ACTIVE_CLASS);
12	// 3
13	dropdownWrapper.classList.remove(OPEN_CLASS);
14	// 4
15	dropdownToggle.setAttribute("aria-expanded", false);
16	// 5
17	dropdownToggleSpan.innerText = this.innerText;
18
19	// 6
20	if (color == "all") {
21	boxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));
22	dropdownToggleSpan.innerText = 'Filter Colors';
23	// 7
24	total.innerText = boxes.length;
25	} else {
26	const includedBoxes = boxesList.querySelectorAll(
27	`(data-type="${color}")`
28	);
29	const excludedBoxes = boxesList.querySelectorAll(
30	`li:not((data-type="${color}"))`
31	);
32	excludedBoxes.forEach((box) => box.classList.add(HIDDEN_CLASS));
33	includedBoxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));
34	// 7
35	total.innerText = includedBoxes.length;
36	}
37	});
38	});

1	dropdownLinks.forEach(function (link) {
2	link.addEventListener("click", function (e) {
3	if (color == "all") {
4	/extra/
5	history.pushState(null, "", location.href.split("?")(0));
6	} else {
7	/extra/
8	history.pushState(null, "", `?color=${color}`);
9	}
10	});
11	});

1	...
2
3	// 1
4	const params = new URLSearchParams(location.search);
5	if (params.has("color")) {
6	// 2
7	const color = params.get("color");
8	const link = document.getElementById(color);
9
10	// 3
11	dropdown.querySelector("li.active").classList.remove(ACTIVE_CLASS);
12	// 4
13	link.parentElement.classList.add(ACTIVE_CLASS);
14	// 5
15	dropdownToggleSpan.innerText = link.innerText;
16	const includedBoxes = boxesList.querySelectorAll(`(data-type="${color}")`);
17	const excludedBoxes = boxesList.querySelectorAll(
18	`li:not((data-type="${color}"))`
19	);
20	excludedBoxes.forEach((box) => box.classList.add(HIDDEN_CLASS));
21	includedBoxes.forEach((box) => box.classList.remove(HIDDEN_CLASS));
22	// 6
23	total.innerText = includedBoxes.length;
24	}

یک کامپوننت فیلتر کشویی جاوا اسکریپت با URL های قابل اشتراک گذاری بسازید

چیزی که قراره بسازیم

1. با نشانه گذاری HTML شروع کنید

2. CSS را اضافه کنید

سبک جعبه

3. جاوا اسکریپت را اعمال کنید

وضعیت کشویی را تغییر دهید

فیلتر کردن

🎁 پاداش: URL های منحصر به فرد قابل اشتراک گذاری

نتیجه

آموزش های بیشتر فیلترینگ را کشف کنید

1	/CUSTOM VARIABLES HERE/
2
3	.dropdown-wrapper {
4	position: relative;
5	}
6
7	.dropdown-wrapper .dropdown-toggle,
8	.dropdown-wrapper .dropdown {
9	width: 100%;
10	max-width: 400px;
11	border-radius: 5px;
12	border: 1px solid #adb5bd;
13	background: var(--white);
14	}
15
16	.dropdown-wrapper .dropdown-toggle {
17	display: flex;
18	align-items: center;
19	justify-content: space-between;
20	padding: 0 10px 0 26px;
21	text-align: left;
22	cursor: pointer;
23	font-size: 100%;
24	height: 50px;
25	}
26
27	.dropdown-wrapper .dropdown-toggle svg {
28	transition: transform 0.3s;
29	}
30
31	.dropdown-wrapper .dropdown {
32	display: none;
33	position: absolute;
34	top: 60px;
35	left: 0;
36	padding: 10px 10px 10px 0;
37	z-index: 1;
38	}
39
40	.dropdown-wrapper .dropdown ul {
41	padding: 0;
42	margin: 0;
43	list-style: none;
44	height: 300px;
45	overflow-y: auto;
46	}
47
48	.dropdown-wrapper .dropdown ul::-webkit-scrollbar {
49	width: 10px;
50	}
51
52	.dropdown-wrapper .dropdown ul::-webkit-scrollbar-thumb {
53	background: #e0e0e0;
54	}
55
56	.dropdown-wrapper .dropdown li a {
57	display: block;
58	padding: 15px 26px;
59	color: inherit;
60	text-decoration: none;
61	transition: background 0.1s;
62	}
63
64	.dropdown-wrapper .dropdown li.active a,
65	.dropdown-wrapper .dropdown li a:hover {
66	background: var(--light-gray);
67	}

1	.boxes {
2	display: grid;
3	grid-gap: 10px;
4	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
5	}
6
7	.boxes li {
8	aspect-ratio: 1;
9	}

1	.dropdown-wrapper .dropdown-toggle svg {
2	transition: transform 0.3s;
3	}
4
5	.dropdown-wrapper.open .dropdown-toggle svg {
6	transform: rotate(180deg);
7	}
8
9	.dropdown-wrapper.open .dropdown {
10	display: block;
11	}