زر اختيار الألوان بطيف الألوان.

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:

html
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">
  <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.

المزيد من المعلومات

JavaFX TableView with Button Column

فهم الفرق بين createMock و getMockBuilder في phpUnit

مقالات ذات صلة

تأثير نسيان إغلاق السكانسيت في C

تحسين أداء وتجربة المستخدم في Angular2

Textarea Dynamic Height with React

حل مشكلة رمز WKWebView في Xcode

أنت تستخدم إضافة Adblock