Danes v službi sem naletel na potrebo po celozaslonskem prikazu spletne strani, zato sem preveril Baidu in našel vtičnik jQuery za celozaslonski prikaz spletnih strani: jquery FullScreen Plugin. Omogoča celozaslonski prikaz spletnih strani za različne brskalnike, vključno s FF 10, Chrome in Safari, ter se uporablja za zagotavljanje bolj berljive različice spletne strani, ki jo je mogoče prilagajati in prilagajati<canvas><video>.
jQuery vtičnik za celozaslonski prikaz
Opis
Ta vtičnik jQuery ponuja enostaven mehanizem za upravljanje novega celozaslonskega načina sodobnih brskalnikov. Trenutno to funkcijo na celozaslonskem načinu ponujajo le novejši brskalniki, ki temeljijo na Webkitih (kot sta Chrome in Safari), Firefox in IE11+.
Uporaba
Vstop v celozaslonski način
Lahko preklopite celotno stran ali en sam HTML element v celozaslonski način:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
To deluje le, če je koda sprožena z uporabniško interakcijo (na primer dogodek klika na gumb). Brskalniki ne dovoljujejo vstopa v celozaslonski način brez interakcije uporabnika.
Izhod iz celozaslonskega načina
Celozaslonski način se vedno izklopi prek dokumenta, vendar ta vtičnik omogoča tudi uporabo kateregakoli HTML elementa. Nato se uporabi lastniški dokument izbranega HTML elementa:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Poizvedba v celozaslonskem načinu
Preprosto ne prenesite argumenta metodi fullScreen za poizvedbo o trenutnem stanju. Metoda vrne trenutni element za celozaslonski način (ali res, če brskalnik tega ne podpira), ko je celozaslonski način aktiven, neres, če ni aktiven, ali null, če brskalnik ne podpira celozaslonskega načina sploh ne. Torej lahko to metodo uporabite tudi za prikaz gumba v celozaslonskem načinu le, kadar brskalnik podpira celozaslonski način:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Preklapljanje celozaslonskega načina
Vtičnik ponuja še eno metodo za preprosto preklapljanje celozaslonskega načina:
$(document).toggleFullScreen();
Obvestila
Vtičnik sproži dogodek spremembe celotnega zaslona na dokumentu, ko je celozaslonski način spremenjen. Če brskalnik zavrne spremembo stanja na celozaslonskem načinu, vtičnik sproži dogodek napake na celotnem zaslonu v dokumentu. Primer:
$(document).bind("fullscreenchange", function() {
console.log("Celozaslonski" + ($(dokument).polni zaslon() ? " vklopljena": "izklopljena"));
});
$(document).bind("fullscreenerror", function() {
opozorilo ("Brskalnik je zavrnil celozaslonsko spremembo");
});
Celozaslonski iframe
Vstop v celozaslonski način znotraj iframe ni privzeto dovoljen, vendar ga je mogoče omogočiti z nekaj atributi na iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Znane težave
V IE 11 se ob vstopu v celozaslonski zaslon znotraj iframe prikaže prazna stran. Nimam pojma zakaj. Vsaka pomoč je dobrodošla.
V Safariju (vsaj v Safari 7) v celozaslonskem načinu ni dovoljeno vnos s tipkovnico.
GitHub naslov: https://github.com/kayahr/jquery-fullscreen-plugin
Turisti, če želite videti skrito vsebino te objave, prosim Odgovoriti
| 
Objavljeno na 14. 08. 2017 16:34:52
|
|
|
Objavljeno na 14. 08. 2017 17:08:18
|
Objavljeno na 25. 11. 2017 14:35:17
|
