Šiandien darbe susidūriau su poreikiu rodyti tinklalapį visame ekrane, todėl patikrinau "Baidu" ir radau "jQuery" papildinį, skirtą tinklalapių rodymui visame ekrane: "jquery FullScreen Plugin". Jis leidžia rodyti tinklalapius visame ekrane įvairioms naršyklėms, įskaitant FF 10, Chrome ir Safari, ir yra naudojamas vartotojams suteikti lengviau skaitomą tinklalapio versiją, kurią galima keisti <canvas>ir <video>suskirstyti.
jQuery viso ekrano įskiepiai
Apibūdinimas
Šis "jQuery" papildinys suteikia paprastą naudoti mechanizmą, skirtą valdyti naują šiuolaikinių naršyklių viso ekrano režimą. Šiuo metu šią naują viso ekrano funkciją teikia tik naujesnės "Webkit" pagrįstos naršyklės (pvz., "Chrome" ir "Safari"), "Firefox" ir "IE11+".
Naudojimas
Įeina į viso ekrano režimą
Galite perjungti visą puslapį arba vieną HTML elementą į viso ekrano režimą:
$(dokumentas).fullScreen(teisinga);
$("#myVideo").fullScreen(true);
Tai veikia tik tada, kai kodą suaktyvino naudotojo sąveika (pvz., mygtuko "onclick" įvykis). Naršyklės neleidžia įjungti viso ekrano režimo be vartotojo sąveikos.
Išėjimas iš viso ekrano režimo
Viso ekrano režimas visada išeina per dokumentą, tačiau šis papildinys leidžia jį taip pat per bet kurį HTML elementą. Tada naudojamas pasirinkto HTML elemento savininko dokumentas:
$(dokumentas).fullScreen(klaidingas);
$("#myVideo").fullScreen(klaidingas);
Užklausa viso ekrano režimu
Tiesiog neperduokite jokio argumento viso ekrano metodui, kad užklaustumėte dabartinę būseną. Metodas grąžina dabartinį viso ekrano elementą (arba true, jei naršyklė to nepalaiko), kai aktyvus viso ekrano režimas, false, jei neaktyvus, arba null, kai naršyklė nepalaiko viso ekrano režimas. Taigi šį metodą taip pat galite naudoti norėdami rodyti viso ekrano mygtuką tik tada, kai naršyklė palaiko viso ekrano režimą:
$("#fullscreenButton").toggle($(dokumentas).fullScreen() != null))
Viso ekrano režimo perjungimas
Papildinys suteikia dar vieną paprasto viso ekrano režimo perjungimo būdą:
$(dokumentas).toggleFullScreen();
Pranešimai
Papildinys suaktyvina viso ekrano keitimo įvykį dokumente, kai pakeičiamas viso ekrano režimas. Jei naršyklė atmetė viso ekrano būsenos pakeitimą, papildinys suaktyvina viso ekrano klaidos įvykį dokumente. Pavyzdys:
$(dokumentas).bind("fullscreenchange", funkcija() {
console.log("Visas ekranas" + ($(dokumentas).fullScreen() ? " įjungta" : "išjungta"));
});
$(dokumentas).bind("viso ekrano klaida", funkcija() {
alert("Naršyklė atmetė viso ekrano pakeitimą");
});
Viso ekrano "iframe"
Įjungti viso ekrano režimą iš "iframe" neleidžiama pagal numatytuosius nustatymus, tačiau jį galima įjungti naudojant kelis "iframe" atributus:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Žinomos problemos
IE 11 tuščias puslapis rodomas įvedant visą ekraną iš "iframe". Neįsivaizduoju, kodėl. Bet kokia pagalba yra laukiama.
"Safari" (bent jau "Safari 7") viso ekrano režimu klaviatūros įvestis neleidžiama.
"GitHub" adresas: https://github.com/kayahr/jquery-fullscreen-plugin
Turistai, jei norite pamatyti paslėptą šio įrašo turinį, prašome Atsakyti
|
Paskelbta 2017-08-14 16:34:52
|
|
|
Paskelbta 2017-08-14 17:08:18
|
Paskelbta 2017-11-25 14:35:17
|
