Töissä tänään kohtasin tarpeen koko näytön verkkosivulle, joten tarkistin Baidun ja löysin jQuery-lisäosan verkkosivujen koko näytön näyttöön: jquery FullScreen Plugin. Se mahdollistaa verkkosivujen koko näytön näyttämisen monille eri selaimille, mukaan lukien FF 10, Chrome ja Safari, ja sitä käytetään tarjoamaan käyttäjille helpommin luettava versio verkkosivusta, joka voidaan <canvas>skaalata ja <video>elementtejä.
jQuery Koko näytön lisäosa
Kuvaus
Tämä jQuery-lisäosa tarjoaa helpon mekanismin ohjata nykyaikaisten selainten uutta kokoruututilaa. Tällä hetkellä vain uudemmat Webkit-pohjaiset selaimet (kuten Chrome ja Safari), Firefox ja IE11+ tarjoavat tämän uuden koko näytön ominaisuuden.
Käyttö
Koko näytön tilaan siirtyminen
Voit joko vaihtaa koko sivun tai yhden HTML-elementin koko näytön tilaan:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Tämä toimii vain, kun koodi laukaistiin käyttäjän vuorovaikutuksesta (esimerkiksi painikkeen onclick-tapahtuma). Selaimet eivät salli koko näytön tilaan siirtymistä ilman käyttäjän vuorovaikutusta.
Poistuminen täysruututilasta
Koko näytön tila poistuu aina dokumentin kautta, mutta tämä lisäosa sallii sen myös minkä tahansa HTML-elementin kautta. Valitun HTML-elementin omistajadokumenttia käytetään silloin:
$(document).fullScreen(väärin);
$("#myVideo").fullScreen(väärin);
Koko näytön tilan kysely
Älä yksinkertaisesti syötä mitään argumenttia fullScreen-metodille nykyisen tilan kyselyyn. Menetelmä palauttaa nykyisen koko näytön elementin (tai true:n, jos selain ei tue tätä) kun koko näytön tila on aktiivinen, väärän jos ei aktiivinen, tai nullin, kun selain ei tue koko ruutua Tilassa ollenkaan. Voit siis käyttää tätä menetelmää myös näyttääksesi koko näytön painikkeen vain, kun selain tukee koko näytön tilaa:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Koko näytön tilan kytkeminen
Lisäosa tarjoaa toisen tavan yksinkertaiseen koko näytön tilan vaihtamiseen:
$(document).toggleFullScreen();
Ilmoitukset
Lisäosa käynnistää koko näytön muutoksen dokumentissa, kun koko näytön tila on vaihdettu. Jos selain hylkäsi koko näytön tilan muutoksen, lisäosa laukaisee koko näytön virhetapahtuman dokumentissa. Esimerkki:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen" + ($(document).fullScreen() ? " on" : "pois"));
});
$(document).bind("fullscreenerror", function() {
alert ("Selain hylkäsi koko ruudun muutoksen");
});
Koko näytön iframe
Koko ruudun tilaan siirtyminen iframen sisältä ei ole oletuksena sallittua, mutta se voidaan ottaa käyttöön muutamilla iframe-ominaisuuksilla:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Tunnetut ongelmat
IE 11:ssä tyhjä sivu näytetään, kun siirrytään kokoruudulle iframen sisältä. Ei mitään hajua miksi. Kaikki apu on tervetullutta.
Safarissa (ainakin Safari 7:ssä) näppäimistön syöttö ei ole sallittu koko näytön tilassa.
GitHub-osoite: https://github.com/kayahr/jquery-fullscreen-plugin
Turistit, jos haluatte nähdä tämän postauksen piilotetun sisällön, olkaa hyvä Vastaus
| 
Julkaistu 14.8.2017 16.34.52
|
|
|
Julkaistu 14.8.2017 17.08.18
|
Julkaistu 25.11.2017 14.35.17
|
