متأسفانه، همیشه نمایش یک هشدار، املاک و مستغلات صفحه نمایش بسیار مورد نیاز را اشغال می کند. ما می توانیم این را با رد کردن آن حل کنیم. امروز، ما یکی را از ابتدا با استفاده از آن می سازیم localStorage و جاوا اسکریپت
آنچه ما در حال ایجاد
مثال در این مورد یک وب‌سایت نمونه کار اولیه با فوتر، ناوبری و منطقه محتوا است. در بالای نما، هشداری را نمایش می‌دهیم که از بازدیدکننده می‌خواهد مشترک شود. در دنیای ساختگی، وب‌سایتی که ما الگوبرداری می‌کنیم ممکن است محتوای ممتاز را فقط برای مشترکین در دسترس داشته باشد.
نحوه عملکرد هشدار ما در قلم زیر را ببینید. اگر چه زمانی که آن را رد کردید دیگر نمی توانید آن را در این مرورگر ببینید، بنابراین یک اسکرین شات در زیر برای یادآوری وجود دارد:
1. علامت گذاری را اضافه کنید
در بالای صفحه، علامت HTML هشدار را اضافه می کنم. کد بعد از body در سند HTML خود تگ کنید.
<html>
<body>
<div class="alert" role="alert">
📰 Subscribe to view this entire article
<button>
<svg
xmlns="
width="24"
height="24"
viewBox="0 0 24 24"
>
<title>close</title>
<g fill="none">
<path
stroke="#ffffff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M17.25 6.75l-10.5 10.5"
></path>
<path
stroke="#ffffff"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M6.75 6.75l10.5 10.5"
></path>
</g>
</svg>
</button>
</div>
</body>
</html>
هشدار یک است div با یک role="alert" گزینه ای که به مرورگر و ویژگی های دسترسی می گوید که محتوا قرار است به کاربر نهایی سیگنال دهد.
a اضافه کردیم button عنصری که یک را می پیچد SVG نمادی که از آن کپی کردم قهرمانان، یک کتابخانه نماد منبع باز. را button وقتی روی آن کلیک می‌شود، عنصر مسئول رد کردن هشدار است و ما منطق را اضافه می‌کنیم تا بتوانیم آن را آماده کنیم.
محتوای نسخه ی نمایشی
در زیر هشدار، مقداری محتوای نگهدارنده برای تقلید از وب سایت نمونه کارها اضافه می کنیم.
<header class="header">
<nav aria-label="Main">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<h2>Curabitur blandit tempus porttitor.</h2>
<p>Lorem ipsum.....</p>
<div class="callout">
<a href="#">Sign in</a> or <a href="#">sign up</a> to view this article.
</div>
</main>
<footer class="footer">
<nav aria-label="Main">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</footer>
ما پیمایش مشترک را در داخل هر دو رندر می کنیم header و footer بلوک ها هر ناو دارای یک aria-label="Main" ویژگی به این معنی است که آنها کنترل های یکسانی در دو مکان دارند.
را main عنصر حاوی محتوای متغیر و a div عنصر با کلاس callout. فراخوانی برای بازدیدکنندگان وب‌سایت برای دیدن محتوای صفحه، فروش بیشتری دارد.
2. استایل دادن به صفحه
برای اینکه همه چیز را به صورت موضوعی نگه دارید، از متغیرهای CSS در این راهنما استفاده می کنم تا بتوانید رنگ ها را در انتهای خود تغییر دهید.
سبک های هشدار از متغیرها پیروی می کنند.
:root {
--primary: #2563eb;
--bg-light: #f1f5f9;
--bg-alert: #1d4ed8;
--bg-callout: #dbeafe;
--border-base: #cbd5e1;
--text-base: #475569;
}
.alert {
background: var(--bg-alert);
padding: 1rem;
text-align: center;
color: white;
position: relative;
transform: scaleY(1);
transition: all ease-in-out 0.3s;
}
.alert button {
border: none;
background: transparent;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: absolute;
top: 8px;
right: 5px;
}
.alert button:hover {
background: rgba(255, 255, 255, 0.35);
}
.alert-hidden {
opacity: 0;
padding: 0;
visibility: hidden;
transform: scaleY(0);
transform-origin: top;
transition: all ease-in-out 0.3s;
}
.alert button:focus {
box-shadow: inset 0 0 0 2px var(--border-base);
}
را .alert عنصر دکمه کاملاً در داخل قرار دارد .alert بخش دکمه ما دکمه را در سمت راست هشدار ثابت می کند و از بالا کمی تغییر می کند.
پنهان کردن دقیق هشدار
ممکن است متوجه شوید a transform اموال در .alert کلاس و همینطور transform اموال در alert-hidden کلاس ما تغییر می دهیم alert-hidden کلاس با جاوا اسکریپت در راه است. را transform اموال ترکیب شده با transition راه کارآمدتری برای نشان دادن و پنهان کردن هشدار با چند انیمیشن زیبا به ما می دهد. با استفاده از scaleY(0) با رویکرد، می توانیم به تدریج ظاهر را تغییر دهیم.
شایان ذکر است که می‌توانیم ظاهر را با a تغییر دهیم display ویژگی اما انجام این کار با جاوا اسکریپت جایی برای هیچ انیمیشنی باقی نمی گذارد، اگر بخواهید آن ها را داشته باشید.
سبک های اضافی
در اینجا چند سبک اضافی برای پرداختن به سایر اجزای صفحه وجود دارد. در بیشتر موارد، آنها اساسی هستند. محفظه فراخوانی دارای برخی ویژگی‌ها است که باعث می‌شود بیشتر از بقیه محتوای صفحه متمایز شود.
.header {
border-bottom: 1px solid var(--border-base);
}
.header,
.footer {
padding: 1rem;
}
.footer {
background: var(--bg-light);
padding: 1rem;
}
.header ul li,
.footer ul li {
display: inline;
padding: 0 5px;
}
.main {
max-width: 767px;
padding: 1rem;
margin-left: 2.75rem;
margin-bottom: 2rem;
}
.callout {
background: var(--bg-callout);
padding: 2rem;
border-radius: 6px;
}
p {
color: var(--text-base);
line-height: 1.4;
}
ul {
list-style: none;
}
a {
color: var(--primary);
text-decoration: none;
}
3. رد کردن هشدار
با جاوا اسکریپت می‌توانیم به مرورگر متصل شویم API رویداد برای گوش دادن به تغییرات یک رویداد معمولی مورد استفاده رویداد “کلیک” است.
قبل از اینکه بتوانیم به رویداد گوش دهیم، باید به جاوا اسکریپت در مورد عنصری که باید در آن جستجو کند بگوییم DOM.
-
یک
alertمتغیر: مسئول هدف قرار دادن خود هشدار است. -
آ
dismissAlertButtonمتغیر: مسئول هدف قرار دادنbuttonعنصر در.alertبخش
const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")
در مرحله بعد، باید به رویداد «کلیک» که قبلا ذکر شد گوش دهیم، تا بدانیم چه زمانی باید هشدار را رد کنیم. ما می توانیم این کار را با استفاده از addEventListener() روش روی دکمه
dismissAlertButton.addEventListener("click", (event) => {
console.log("Clicked!")
})
ما می توانیم از دستی استفاده کنیم console.log() ابزاری برای آزمایش چیزها دکمه باید وارد شود کلیک کرد! به کنسول مرورگر شما.
4. جلوگیری از منطق پیش فرض
برای هر گونه استفاده از addEventListener روش، ما یک نمونه رایگان از خود شی رویداد را برای استفاده در داخل متد دریافت می کنیم. این برای مواردی که ممکن است نیاز به بازنویسی پیش فرض های مرورگر داشته باشید، مهم است. معمولاً این ایده خوبی است که از منطق پیش‌فرض عنصری که با جاوا اسکریپت هدف قرار می‌دهید جلوگیری کنید.
dismissAlertButton.addEventListener("click", (event) => {
event.preventDefault()
})
در مرحله بعد، باید نمایان بودن هشدار را تغییر دهیم. ما می‌توانیم این کار را به چند روش انجام دهیم، اما همانطور که در بخش CSS ذکر شد، از یک رویکرد متحرک‌تر استفاده خواهیم کرد.
if (dismissAlertButton) {
dismissAlertButton.addEventListener("click", (event) => {
event.preventDefault()
alert.classList.add("alert-hidden")
})
}
در اینجا ما اضافه می کنیم alert-hidden کلاس، که به طور موثر هنگام کلیک کردن روی دکمه هشدار را از دید خارج می کند. کار می کند!
ممکن است متوجه شوید که من برخی از منطق شرطی را برای بررسی این موضوع اضافه کردم dismissAlertButton نیست null. اگر صفحه ای بدون دکمه وجود داشته باشد، جاوا اسکریپت ما با خطا مواجه می شود. برای رفع این مشکل، می‌توانید یک بررسی شرطی اضافه کنید تا مطمئن شوید عنصر در صفحه است. یک ساده if بیانیه باید کار را انجام دهد.
5. ذخیره ایالت محلی
متأسفانه، هنگامی که صفحه را مجدداً بارگذاری می کنید، پس از کلیک بر روی دکمه رد کردن، هشدار دوباره نشان داده می شود. ما می توانیم این را با چیزی به نام حل کنیم localStorage، در مرورگرهای مدرن تعبیه شده است.
localStorage به شما اجازه می دهد کمی از داده های مرورگر را به طور موقت ذخیره کنید. این به عنوان یک داده ذخیره واقعی مانند یک پایگاه داده در نظر گرفته نشده است، اما به طور مشابه کار می کند.
ما اهرم خواهیم کرد localStorage برای تنظیم یک جفت کلید و مقدار جدید در مرورگر. سپس می توانیم قبل از نمایش هشدار بررسی کنیم که آیا آن مقدار تنظیم شده است یا خیر.
API نسبتاً ساده است. در پایان، این کد نهایی است.
const alert = document.querySelector(".alert")
const dismissAlertButton = document.querySelector(".alert button")
if (localStorage.getItem("hideAlert")) {
alert.style.display = "none"
}
if (dismissAlertButton) {
dismissAlertButton.addEventListener("click", (event) => {
event.preventDefault()
alert.classList.add("alert-hidden")
localStorage.setItem("hideAlert", true)
})
}
این چیزی است که اتفاق می افتد:
- بررسی می‌کنیم که آیا دکمه رد کردن وجود دارد یا خیر، و اگر وجود دارد، به رویداد کلیک روی آن گوش دهید.
- اگر رویداد کلیک فعال شود، آن را اضافه می کنیم
alert-hiddenکلاس به هشدار - با
localStorage، ما به آن می گوییمsetItemروش و پاس در یک جفت کلید-مقدار ازhideAlertوtrue. - اگر صفحه دوباره بارگیری شود، بلافاصله دوباره به “localStorage” متصل می‌شویم تا با آن تماس بگیریم
getItemروش هدف قرار دادن همان جفت کلید و مقدار که قبلاً تنظیم شده است و هشدار را با CSS از طریق جاوا اسکریپت مخفی می کند.
برخی از محدودیت ها
localStorage یک راه حل عالی برای چیزهای ساده است. همانطور که روی مثال من کار می کنید، ممکن است با بارگیری مجدد مرورگر متوجه یک سوسو زدن خفیف شوید localStorage مقادیر تنظیم شده است.
این یکی از اشکالات رویکرد است، زیرا HTML و CSS اغلب قبل از اجرای جاوا اسکریپت بارگیری می شوند. تنها راه حل این مشکل یک راه حل ارائه شده در سمت سرور است که در آن کد نسبت به یک مقدار واقعی با پشتوانه پایگاه داده پویا است.
افکار بسته
عناصر قابل رد کردن یک راه عالی برای جلب توجه و تمیز کردن املاک و مستغلات صفحه نمایش بسیار مورد نیاز است. بازدیدکنندگان وب سایت شما از توانایی رد کردن چیزی قدردانی می کنند، حتی اگر دانستن آن مفید باشد!
