• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды JavaScript » Стилизация зачеркнутого текста и флажка на CSS (Стилизация флажков и переключателей с использованием на CSS)
Стилизация зачеркнутого текста и флажка на CSS
Kosten
Дата: Среда, 2020-05-20, 23:02 | Сообщение 1
Онлайн
Администраторы
Сообщений:26255
Награды: 61


Этот флажок почти аналогичен приложению списка дел и заметок, где идет правильный интервал и границы помогут вам легко прочитать содержимое на нем. Поскольку это концептуальная демонстрация, разработчик не дал возможность редактировать тексты. Но, тем не менее, вы можете отредактировать код, чтобы сделать его правильно работающим интерфейсом.

Установив флажок, вы получаете весь текст, как в приложении Google Keep. Если вы планируете использовать инструмент контрольного списка в своем приложении или на инструментальных панелях администратора, этот дизайн даст вам основную идею.

Так выглядит:



Установка:

HTML

Код
  <div class="inbox">
    <div class="item">
      <input type="checkbox">
      <p>Это макет почтового ящика.</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Отметьте один пункт</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Удерживайте клавишу Shift</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Проверить нижний пункт</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Все промежуточное также должно быть установлено на флажок</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Попробуйте сделать это без каких-либо библиотек</p>
    </div>
    <div class="item">
      <input type="checkbox">
      <p>Просто обычный JavaScript</p>
    </div>
  </div>

CSS

Код
html {
      font-family: sans-serif;
      background: #ffc600;
    }
    .inbox {
      max-width: 400px;
      margin: 50px auto;
      background: white;
      border-radius: 5px;
      box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
    }
    .item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #F1F1F1;
    }
    .item:last-child {
      border-bottom: 0;
    }
    input:checked + p {
      background: #F9F9F9;
      text-decoration: line-through;
    }
    input[type="checkbox"] {
      margin: 20px;
    }
    p {
      margin: 0;
      padding: 20px;
      transition: background 0.2s;
      flex: 1;
      font-family:'helvetica neue';
      font-size: 20px;
      font-weight: 200;
      border-left: 1px solid #D1E2FF;
    }

JS

Код
const checkboxes = document.querySelectorAll('input[type="checkbox"]')

let lastChecked; //keep track of last checked box

function handleCheck(e){
  let inBetween = false;
  if (e.shiftKey === true){
    checkboxes.forEach(item => {

       if (item === this || item === lastChecked){
         inBetween = !inBetween;
       }
       //check every box in between
       if (inBetween){
         item.checked = true;
       }
    })
  }
  
  lastChecked = this //keep track of last checked box
}

checkboxes.forEach(item => item.addEventListener('click', handleCheck));

На этом установка завершена!

Демонстрация
Прикрепления: 7191578.png(32.5 Kb) · shift-check-box.zip(4.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды JavaScript » Стилизация зачеркнутого текста и флажка на CSS (Стилизация флажков и переключателей с использованием на CSS)
  • Страница 1 из 1
  • 1
Поиск: