To create a color picker button with a spectrum color display that is accessible by keyboard, you can use HTML, CSS, and JavaScript. Here’s a basic example to get you started:
htmlhtml>
<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">
<title>Color Picker Buttontitle>
<style>
.color-picker {
display: inline-block;
position: relative;
width: 30px;
height: 30px;
border: 1px solid #ccc;
cursor: pointer;
}
.color-picker .color-spectrum {
position: absolute;
top: 100%;
left: 0;
width: 200px;
height: 200px;
border: 1px solid #ccc;
display: none;
}
.color-picker.active .color-spectrum {
display: block;
}
.color-picker .color-spectrum .color-spot {
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
}
style>
head>
<body>
<div class="color-picker" tabindex="0">
<div class="color-spectrum">
div>
div>
<script>
const colorPicker = document.querySelector('.color-picker');
const colorSpectrum = document.querySelector('.color-spectrum');
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
colors.forEach(color => {
const colorSpot = document.createElement('div');
colorSpot.classList.add('color-spot');
colorSpot.style.backgroundColor = color;
colorSpot.addEventListener('click', () => {
colorPicker.style.backgroundColor = color;
document.body.style.color = color;
colorPicker.classList.remove('active');
colorSpectrum.blur();
});
colorSpectrum.appendChild(colorSpot);
});
colorPicker.addEventListener('click', () => {
colorPicker.classList.toggle('active');
colorSpectrum.focus();
});
colorPicker.addEventListener('keyup', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
colorPicker.classList.toggle('active');
colorSpectrum.focus();
}
});
colorSpectrum.addEventListener('focusout', () => {
colorPicker.classList.remove('active');
});
script>
body>
html>
This example creates a button with a color spectrum picker that is accessible by keyboard. Clicking on the button will display the color spectrum, and clicking on a color spot will change the button’s background color and the text color of the body. The color spectrum can also be accessed by pressing the Enter or Space keys when the button is focused.
-
تثبيت Redis CLI على macOS02/04/2024
-
استعراض فئات المقالات غير المصنفة18/03/2024
-
كيفية تصحيح أخطاء الإزاحة في Python04/04/2024
المزيد من المعلومات
لتعميق فهمك لكيفية إنشاء زر اختيار الألوان مع عرض طيف الألوان والوصول إليه بواسطة لوحة المفاتيح، يمكننا توسيع الشرح كما يلي:
-
HTML الأساسي: في الجزء الأساسي من الكود HTML، يتم إنشاء عنصر
div
للزر وعنصرdiv
داخلي لعرض طيف الألوان. -
CSS لتنسيق العناصر: يستخدم الـ CSS لتنسيق العناصر، حيث يتم تعيين الحجم والشكل للزر ولعرض طيف الألوان، بالإضافة إلى تحديد أسلوب العرض بناءً على حالة الزر.
-
JavaScript لتوفير السلوك التفاعلي: يستخدم الـ JavaScript لإنشاء نقاط الألوان داخل عرض طيف الألوان بناءً على قائمة الألوان المعرفة مسبقًا. يتم تعيين لون النقطة على أساس اللون من القائمة. عندما يتم النقر على نقطة لون معينة، يتم تحديث لون الخلفية للزر ولون النص في الصفحة.
-
الوصول بواسطة لوحة المفاتيح: يتم إضافة إمكانية الوصول بواسطة لوحة المفاتيح عن طريق تحديد الزر له التركيز عند الضغط على Enter أو Space، مما يعرض عرض طيف الألوان.
-
السلوك عند فقدان التركيز: عندما يفقد زر اختيار الألوان التركيز، يتم إخفاء عرض طيف الألوان.
هذا النموذج البسيط يمكن توسيعه وتحسينه لتلبية متطلبات تصميم أو تطبيق محدد.