Papildu izvēles rūtiņu veidošana ar CSS režģi
The CSS režģa izkārtojuma modulis var atrisināt ne tikai izkārtojuma problēmas mamutu, bet arī dažas labas vecās mulish problēmas, kuras mēs esam bijuši nodarbojas ar ilgu laiku, piemēram, atzīmējiet izvēles rūtiņu.
Lai gan ir salīdzinoši vienkārša metode etiķetes veidošanai, kad tā parādās pēc tam izvēles rūtiņu, tas nav tik vienkārši, ja parādās etiķete iepriekš to.
Rūtiņu stils bez CSS režģa
Marķējuma veidošana pēc tam izvēles rūtiņa ir kaut kas, ko mūsu izstrādātāji ir darījuši kopš tā laika. Šī metode ir viens no galvenajiem un vecajiem piemēriem par spēcīgu dinamiku, ko CSS var izmantot.
Lūk, kods, kuru jūs jau pazīstat stilu etiķeti pēc tam atzīmēta izvēles rūtiņa:
ievade: atzīmēta + etiķete / * style me * /
A stila etiķete pēc tam izvēles rūtiņu varētu izskatīties šādi (tomēr varat izmantot arī citus stila noteikumus):
Iepriekš minētais CSS kods izmanto blakus esošais māsas apvienotājs atzīmēts ar + taustiņu. Ja izvēles rūtiņa ir : pārbaudīts Valsts, elements pēc tam to (parasti etiķete) var veidot, izmantojot šo metodi.
Šāda vienkārša un efektīva tehnika! Ko varētu iespējams iet ar to nepareizi? Nekas - līdz vēlaties parādīt etiķeti iepriekš izvēles rūtiņu.
Blakus esošais māsas apvienotājs atlasa nākamo elementu; tas nozīmē, ka marķējumam ir jānāk pēc tam izvēles rūtiņu HTML pirmkodā.
Tātad, lai parādītu etiķeti iepriekš izvēles rūtiņu uz ekrāna, mēs nevaram vienkārši pārvietot to pirms pirmkoda izvēles rūtiņas kā a iepriekšējais brālis-selektors CSS nav.
Kas atstāj tikai vienu opciju: izvēles rūtiņu un etiķeti izmantojot pārveidot vai pozīciju vai starpību vai cits CSS īpašums ar kāda veida telekinetisko jaudu, lai etiķete parādās pa kreisi no izvēles rūtiņas ekrānā.
Problēmas ar tradicionālo metodi
Nekas nav lielākoties nepareizi ar iepriekš minēto tehniku, bet tā var būt dažos gadījumos ir neefektīva. Es domāju gadījumus, kad izvēles rūtiņas un etiķetes pārkārtotās pozīcijas vairs nedarbojas.
Domājiet atsaucīgi, piemēram. Iespējams, būs jāmaina vai jāpārvieto izvēles rūtiņa atbilstoši ierīcei, kas tiek rādīta. Kad tas notiks, jūs jāpārvieto arī etiķete, Atbildot uz izvēles rūtiņas pārorientēšanu / izmēru maiņu, etiķete netiks veikta automātiski.
Mēs varam novērst šo nelabvēlīgo situāciju, ja mēs to varam norādiet izvēles rūtiņu un etiķeti, tā vietā, lai tos izvietotu lapā.
Taču gandrīz visām izkārtojuma sistēmām, piemēram, tabulām vai kolonnām, ir nepieciešams pievienojiet etiķeti pirms izvēles rūtiņas pirmkodā lai tas tiktu parādīts vienādi ekrānā. To mēs nevēlamies darīt, jo nākamais elementa selektors uz etiķetes vairs nedarbosies.
Savukārt CSS Grid ir izkārtojuma sistēma ne atkarīgs no elementu izvietojuma / secības pirmkodā.
Tīkla izkārtojuma pārkārtošanas spējas apzināti ietekmē tikai vizuālā atveidošana, atstājot runas kārtību un navigāciju, pamatojoties uz avota pasūtījumu. Tas ļauj autoriem manipulēt ar vizuālo prezentāciju, atstājot avota pasūtījumu neskarts… - CSS Grid Layout Module Level 1, W3C
Tādējādi CSS režģis ir ideāls risinājums veidojiet parādīto iezīmi iepriekš izvēles rūtiņu.
Rūtiņu stils ar CSS režģi
Sāksim ar HTML kodu. Izvēles rūtiņas un etiķetes secība paliks tāda pati kā iepriekš. Mēs vienkārši pievienojam abus tos tīklam.
Pievienotais CSS ir šāds:
#cbgrid displejs: režģis; koordinātu tīkla veidnes: "pa labi pa labi"; platums: 150px; ievade [type = checkbox] grid-area: right; etiķete tīkla apgabals: pa kreisi;
Es nepārskatīšu, kā darbojas CSS režģis, kā jau rakstīju detalizētu rakstu par šo tēmu, jūs varat izlasīt šeit. Tomēr daži pamati: displejs: režģis īpašums pārvērš elementu režģa tvertnē, režģa zona identificē režģa zonu, kurā elements ir elements, un režģa veidnes veido režģa izkārtojumu, kas sastāv no dažādām tīkla zonām.
Iepriekš minētajā kodā ir divas tīkla zonas: "pa kreisi" un "pa labi". Tie veido divas tīkla rindas. Izvēles rūtiņa ir "pa labi" zonu un etiķeti "pa kreisi". Lūk, šeit kā viņi skatās uz ekrāna:
Tā kā mēs neesam mainījuši izvēles rūtiņu un etiķetes relatīvo izvietojumu pirmkodā joprojām izmanto blakus esošo brāļu kombainu:
ievade: atzīmēta + etiķete / * style me * /
Ņemiet vērā, ka tīkla vienums ir vienmēr bloķēts; tas parādās ar apkārtējo kasti, kas pazīstams kā režģa līmeņa lodziņš. Ja jūs to nevēlaties, piemēram, uz etiķeti, ielieciet iesaiņojumu uz šī vienuma (iesaiņojiet to citā elementā) un ieslēdziet šo iesaiņojumu režģa zonā.
Tas ir tas, ļaudis. CSS režģis, cerams, palīdzēs jums noslīpēt šo vaigu rūtiņu izkārtojumu.
