Cara Membuat Kawalan Borang 'Tatal untuk Memilih'

Artikel ini memperkenalkan cara pintar untuk menukar kawalan pemilihan ke dalam interaksi gaya dail yang serupa dengan kunci gabungan atau pemilih tarikh iOS. Senarai panjang pilihan, seperti pilihan negara, sering menjengkelkan, dan pendekatan ini dapat menyelesaikan masalah ini dengan berkesan.

Idea teras ialah: Gunakan operasi menatal untuk memilih pilihan, bukannya pemilihan klik tradisional. Daripada membina kawalan tersuai dari awal, kami dengan bijak menggunakan butang kawalan -radio semantik.

struktur HTML adalah seperti berikut, menggunakan kumpulan tag butang radio bersarang:

<label for="madrid">
      Madrid 
      <abbr>MAD</abbr>
      </label>
  <label for="malta">
      Malta 
      <abbr>MLA</abbr>
      </label>

Kunci terletak pada kawalan gaya CSS untuk mencapai pengurusan saiz dan jarak pilihan yang tepat. Berikut adalah beberapa gaya asas:

.scroll-container {
  /* 尺寸和布局 */
\--itemHeight: 60px;
\--itemGap: 10px;
\--containerHeight: calc((var(--itemHeight) * 7) + (var(--itemGap) * 6));

  width: 400px; 
  height: var(--containerHeight);
  align-items: center;
  row-gap: var(--itemGap);
  border-radius: 4px;

  /* 样式 */
\--topBit: calc((var(--containerHeight) - var(--itemHeight))/2);
\--footBit: calc((var(--containerHeight) + var(--itemHeight))/2);

  background: linear-gradient(
    rgb(254 251 240), 
    rgb(254 251 240) var(--topBit), 
    rgb(229 50 34 / .5) var(--topBit), 
    rgb(229 50 34 / .5) var(--footBit), 
    rgb(254 251 240) 
    var(--footBit));
  box-shadow: 0 0 10px #eee;
}

Keterangan gaya:

: Ketinggian setiap pilihan.
• --itemHeight
: Jarak antara pilihan.
• --itemGap
: Ketinggian kontena, pastikan untuk memaparkan sehingga tujuh pilihan (Nombor Odd Pusat item yang dipilih).
• --containerHeight Latar belakang menggunakan warna kecerunan untuk menyerlahkan kawasan tengah (kedudukan diperiksa).
Pembolehubah
dan
• menentukan hentian kecerunan, secara visual menonjolkan kawasan yang dipilih. --topBit --footBit
Gunakan pilihan susunan menegak Susun atur Flexbox:

Dayakan CSS Scroll Capture:

.scroll-container {
  display: flex; 
  flex-direction: column;
  /* 其他样式 */
}

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
  /* 其他样式 */
}

Pastikan skrol berhenti pada pilihan.

Mencegah limpahan menatal. scroll-snap-type: y mandatory; overscroll-behavior-y: none; Gaya pilihan:

.scroll-item {
  /* 尺寸和布局 */
  width: 90%;
  box-sizing: border-box;
  padding-inline: 20px;
  border-radius: inherit; 

  /* 样式和字体 */
  background: linear-gradient(to right, rgb(242 194 66), rgb(235 122 51));
  box-shadow: 0 0 4px rgb(235 122 51);
  font: 16pt/var(--itemHeight) system-ui;
  color: #fff;

  input { appearance: none; } 
  abbr { float: right; } /* 机场代码 */

  /* 选中状态样式 */
  &:has(:checked) {
    background: rgb(229 50 34);
  }
}

Selaraskan pilihan yang berpusat.

Pemilihan klik blok, pilih hanya dengan menatal. scroll-snap-align: center; pointer-events: none; kod javascript digunakan untuk mendengar acara tatal, menetapkan pilihan tatal ke pusat untuk memilih:

API

let observer = new IntersectionObserver(entries => { 
  entries.forEach(entry => {
    with(entry) if(isIntersecting) target.children[1].checked = true;
  });
}, { 
  root: document.querySelector(`.scroll-container`), rootMargin: `-51% 0px -49% 0px`
});

document.querySelectorAll(`.scroll-item`).forEach(item => observer.observe(item));

digunakan untuk mengesan sama ada elemen memasuki viewport.

IntersectionObserver Gunakan langkah -langkah di atas untuk membuat kawalan borang yang memilih pilihan dengan menatal. Sekiranya anda perlu memilih pilihan apabila halaman dimuatkan, anda boleh mendapatkan lokasinya melalui JavaScript dan tatal ke atasnya menggunakan kaedah

.

scrollTo()

Pautan rujukan dan bacaan selanjutnya:

Beberapa kegunaan berfungsi untuk pemerhati persimpangan untuk mengetahui bila elemen dilihat (preethi sam)

• penjelasan bagaimana pemerhati persimpangan jam tangan (Travis Almand)
• praktikal CSS tatal snapping (max kohler)
• State of Styling semasa memilih pada tahun 2019 (Chris Coyier)
• Panduan Layout Flexbox CSS (CSS-Tricks)
• css
harta (css-tricks)
• flex CSS Scroll Snap Properties (MDN)
(mdn)
• scrollTo()
(pautan demo halaman github dan pautan video akan ditambah di sini kerana saya tidak dapat mengakses dan membenamkan sumber luaran secara langsung.)

Atas ialah kandungan terperinci Cara Membuat Kawalan Borang 'Tatal untuk Memilih'. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!