Programmēšana

HTML5 datumu atlasītājs

Nesen es publicēju, ka esmu nolēmis izmantot Opera HTML5 demonstrācijās RMOUG Training Days 2011. Kā jau minēju šajā ierakstā, liels iemesls, kāpēc Opera tīmekļa pārlūkprogramma jāpievieno demonstrētajam komplektam, ir tas, ka tā atbalsta dažas HTML5 funkcijas labāk nekā citas pārlūkprogrammas. Šis ieraksts ilustrēs vienu no šiem gadījumiem: HTML5 datumu atlasītājus.

Viena no mazajām, bet jaukajām lietām par Flex vai JavaScript bibliotēkas, piemēram, JQuery, lietošanu ir iebūvētu mehānismu pieejamība lietotājam draudzīgām ievades kontrolēm. Jo īpaši vienmēr tiek novērtēts labs datumu atlasītājs.

Pašlaik HTML5 piedāvā standarta datumu atlasītāja logrīku, ko var izmantot ar HTML tagiem. Šajā ziņojumā es aplūkoju HTML5 datumu atlasītāju stāvokli piecu populāru tīmekļa pārlūkprogrammu (Chrome 8, Safari 5, Firefox 3.6, Internet Explorer 8 un Opera 11) pēdējās versijās, kas nav beta versijas.

HTML atbalsta dažādus ievades laukus, izmantojot ievades tagu. Dažādi ievades lauku veidi tiek norādīti, izmantojot ievade elementa tips atribūts. HTML5 ievērojami palielina pieejamo skaitu tipss, kurus var norādīt. Vairākas no jaunajām tips atribūts ietver tos, kas saistīti ar datumu / laiku: datums, datums Laiks, datetime-local, mēnesī, nedēļu, un laiks. Katrs no tiem ir ilustrēts nākamajā HTML koda fragmentā.

   HTML5 datumu atlasītāji ir demonstrēti 
Ievades tipsIevades lauks
datums
datums Laiks
datetime-local
mēnesī
nedēļu
laiks

No piecām iepriekš pārlūkotajām tīmekļa pārlūkprogrammām Opera nodrošina vismodernāko datuma / laika ieviešanu tipss no ievade tagu. Sākot ar pozitīvo, pirmie vairāki ekrāna momentuzņēmumi parāda, kā Opera 11 nodrošina šo vienkāršo HTML.

Opera 11 Sākotnējā lapas atveidošana

Opera 11 ievades taga "datums" atribūts

Opera 11 ievades taga "datetime" atribūts

Opera 11 ievades taga "datetime-local" atribūts

Opera 11 ievades taga "mēnesis" atribūts

Operas ieviešana izceļ visu mēnesi, kas tiks izvēlēts.

Opera 11 ievades taga "nedēļa" atribūts

Opera izceļ nedēļu, kas tiks izvēlēta.

Opera 11 ievades taga "laiks" atribūts

Opera 11 - visi ievades lauki ir atlasīti

Opera ir iespaidīgi ieviesusi datuma / laika ievades laukus. Es vēlos, lai to varētu teikt arī par citām pārlūkprogrammām, kas nav beta versijas. Diemžēl citas pārlūkprogrammas nenodrošina atbalstu šiem lauku veidiem nekur tuvu šim elegantajam. Patiesībā es nedomāju, ka šeit pat ir vērts iekļaut visus viņu ekrāna momentuzņēmumus. Tā vietā es vienkārši parādu katra ekrāna momentuzņēmumu pēc visu lauku aizpildīšanas. Vairumā gadījumu pārlūkprogrammas šos laukus vienkārši apstrādāja kā vienkāršus “teksta” tipa laukus.

Firefox 3.6 datumu atlasītāji: tie ir tikai teksts

Internet Explorer 8 datumu atlasītāji: tie ir tikai teksts

Safari 5 datumu atlasītāji: tie ir tikai teksts ar fokusa izcelšanu

Chrome 8 datumu atlasītāji: nav gluži tur

Lai gan tas nav tik elegants kā Opera attieksme pret datuma / laika laukiem, pārlūks Chrome šos laukus uztver kā tekstu un ierobežo to, ko laukos var ievadīt. Diemžēl nav tādu jauku datuma / laika izvēles uznirstošo logu kā Opera. Tomēr fokusētā lauka izcelšana ir jauka, un palīdz fakts, ka atlasītie dati ir nedaudz datuma / laika līdzīgi formātam.

Secinājums

Es gaidu dienu, kad galvenās pārlūkprogrammas konsekventi atbalsta standartizētas datuma / laika vadīklas, lai vienkārši HTML "ievades" tagi ar atbilstošiem atribūtiem padarītu elegantus un stilistiskus datuma / laika atlasītājus jebkurā pārlūkprogrammā. Opera 11 šobrīd vada paku un sniedz vislabāko ilustrāciju par to, kas varētu būt.

Šo stāstu “HTML5 datumu atlasītājs” sākotnēji publicēja JavaWorld.

$config[zx-auto] not found$config[zx-overlay] not found