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 tips
s, 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 tips Ievades 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 tips
s 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.