Neseniai paskelbiau, kad nusprendžiau naudoti „Opera“ savo HTML5 demonstracijose „RMOUG Training Days 2011“. Kaip minėjau tame įraše, didelė priežastis pridėti „Opera“ naršyklę prie demonstruojamo rinkinio yra ta, kad ji palaiko kai kurias HTML5 funkcijas geriau nei kitos naršyklės. Šis pranešimas iliustruos vieną iš šių atvejų: „HTML5 Date Pickers“.
Vienas iš mažų, bet gražių „Flex“ ar „JavaScript“ bibliotekos, pvz., „JQuery“, naudojimo dalykų yra galimybė naudotis patogiais įvesties valdikliais įmontuotais mechanizmais. Visų pirma, visada vertinamas geros datos rinkėjas.
Šiuo metu HTML5 siūlo standartinį datos rinkiklio valdiklį, kurį galima naudoti su HTML žymomis. Šiame įraše apžvelgiu HTML5 datų rinkėjų būseną naujausiose ne beta versijoje esančiose penkių populiarių žiniatinklio naršyklių versijose („Chrome 8“, „Safari 5“, „Firefox 3.6“, „Internet Explorer 8“ ir „Opera 11“).
HTML palaiko įvairius įvesties laukus per įvesties žymą. Skirtingi įvesties laukų tipai nurodomi naudojant įvestis elementas tipo atributas. HTML5 žymiai padidina prieinamų skaičių tipos, kuriuos galima nurodyti. Keletas naujų tipo atributas apima tuos, kurie susiję su data / laiku: data, datos laikas, datetime-local, mėnesį, savaitęir laikas. Kiekvienas iš jų yra pavaizduotas šiame HTML kodo fragmente.
Parodyti HTML5 datos rinkėjai Įvesties tipas Įvesties laukas data datos laikas datetime-local mėnesį savaitę laikas
Iš penkių mano anksčiau išvardytų interneto naršyklių „Opera“ yra pats moderniausias datos / laiko įgyvendinimas tipos įvestis žyma. Pradedant teigiama, pirmieji keli ekrano momentiniai vaizdai rodo, kaip šis paprastas HTML yra „Opera 11“.
„Opera 11“ Pradinis puslapio atvaizdavimas
„Opera 11“ įvesties žymos „data“ atributas
„Opera 11“ įvesties žymos „datetime“ atributas
„Opera 11“ įvesties žymos „datetime-local“ atributas
„Opera 11“ įvesties žymos „mėnuo“ atributas
„Opera“ įgyvendinimas pabrėžia visą mėnesį, kuris bus pasirinktas.
„Opera 11“ įvesties žymos „savaitė“ atributas
Opera pabrėžia savaitę, kuri bus pasirinkta.
„Opera 11“ įvesties žymos „laikas“ atributas
„Opera 11“ - visi įvesties laukai pasirinkti
„Opera“ įspūdingai įgyvendina datos / laiko įvesties laukus. Norėčiau, kad tą patį būtų galima pasakyti apie kitas ne beta versijos naršykles. Deja, kitos naršyklės nepalaiko šių laukų tipų niekur arti šios elegantiškos. Tiesą sakant, manau, kad net neverta čia įtraukti visų jų ekrano nuotraukų. Užuot užpildęs visus laukus, tiesiog rodau kiekvieno ekrano vaizdą. Daugeliu atvejų naršyklės šiuos laukus paprasčiausiai traktavo kaip paprastus „teksto“ tipo laukus.
„Firefox 3.6“ datos rinkėjai: jie tik tekstas
„Internet Explorer 8“ datų rinkėjai: jie tėra tekstas
„Safari 5“ datų rinkėjai: jie yra tiesiog tekstas su paryškintu akcentu
„Chrome 8“ datų rinkėjai: ne visai čia
Nors „Chrome“ nėra tokia elegantiška, kaip datos / laiko laukai, „Chrome“ naršyklė šiuos laukus traktuoja daugiau nei kaip tekstą ir riboja tai, ką galima įvesti į laukus. Deja, nėra tokių gražių datos / laiko pasirinkimo iššokančių langelių, kaip „Opera“. Vis dėlto, sutelktas lauko paryškinimas yra gražus, ir tai, kad pasirinkti duomenys yra šiek tiek datos / laiko panašūs į formatą.
Išvada
Laukiu dienos, kai pagrindinės naršyklės nuosekliai palaiko standartizuotus datos / laiko valdiklius, kad paprastos HTML „įvesties“ žymos su atitinkamais atributais padarytų elegantiškus ir stilistinius datos / laiko parinkiklius bet kurioje naršyklėje. Šiuo metu „Opera 11“ vadovauja paketui ir pateikia geriausią pavyzdį, kas galėtų būti.
Šią istoriją „HTML5 datos rinkiklis“ iš pradžių paskelbė „JavaWorld“.
