La serviciu astăzi, am întâmpinat nevoia de afișare pe tot ecranul unei pagini web, așa că am verificat Baidu și am găsit un plugin jQuery pentru afișarea pe tot ecranul paginilor web: jquery FullScreen Plugin. Permite afișarea pe ecran complet a paginilor web pentru o varietate de browsere diferite, inclusiv FF 10, Chrome și Safari, și este folosit pentru a oferi utilizatorilor o versiune mai ușor de citit a paginii web, care poate fi <canvas>scalată și <video>elementată.
jQuery Fullscreen Plugin
Descriere
Acest plugin jQuery oferă un mecanism simplu de folosit pentru a controla noul mod fullscreen al browserelor moderne. În prezent, doar browserele mai noi bazate pe Webkit (precum Chrome și Safari), Firefox și IE11+ oferă această nouă funcție fullscreen.
Utilizare
Intrarea în modul Fullscreen
Poți schimba întreaga pagină sau un singur element HTML în modul fullscreen:
$(document).fullScreen(adevărat);
$("#myVideo").fullScreen(adevărat);
Acest lucru funcționează doar când codul a fost declanșat de o interacțiune a utilizatorului (de exemplu, un eveniment onclick pe un buton). Browserele nu permit intrarea în modul fullscreen fără interacțiunea utilizatorului.
Ieșirea din modul Fullscreen
Modul fullscreen este întotdeauna închis prin document, dar acest plugin permite acest lucru și prin orice element HTML. Atunci se folosește documentul proprietarului elementului HTML selectat:
$(document).fullScreen(fals);
$("#myVideo").fullScreen(fals);
Interogarea modului Fullscreen
Pur și simplu nu treci niciun argument metodei fullScreen pentru a interoga starea curentă. Metoda returnează elementul curent fullscreen (sau true dacă browserul nu suportă acest lucru) când modul fullscreen este activ, fals dacă nu este activ sau null când browserul nu suportă fullscreen deloc. Astfel, poți folosi această metodă și pentru a afișa un buton pe tot ecranul doar atunci când browserul suportă modul fullscreen:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Comutarea modului Fullscreen
Pluginul oferă o altă metodă pentru comutarea simplă a modului fullscreen:
$(document).toggleFullScreen();
Notificări
Pluginul declanșează un eveniment fullscreenchange pe document atunci când modul fullscreen a fost modificat. Dacă browserul a respins o schimbare a stării pe tot ecranul, pluginul declanșează un eveniment de eroare pe tot ecranul pe document. Exemplu:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " pornit" : "oprit"));
});
$(document).bind("fullscreenerror", function() {
alert("Browserul a respins modificarea ecranului complet");
});
Cadru i-cadru fullscreen
Intrarea în modul fullscreen dintr-un iframe nu este permisă implicit, dar poate fi activată cu câteva atribute pe iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Probleme cunoscute
În IE 11, o pagină goală este afișată când intri pe ecran complet dintr-un iframe. N-am idee de ce. Orice ajutor este binevenit.
În Safari (cel puțin în Safari 7) nu este permisă introducerea tastaturii în modul fullscreen.
Adresa GitHub: https://github.com/kayahr/jquery-fullscreen-plugin
Turiști, dacă vreți să vedeți conținutul ascuns al acestei postări, vă rog Răspunde
| 
Postat pe 14.08.2017 16:34:52
|
|
|
Postat pe 14.08.2017 17:08:18
|
Postat pe 25.11.2017 14:35:17
|
