Днес на работа се сблъсках с нужда от пълноекранно показване на уеб страница, затова проверих Baidu и намерих плъгин jQuery за показване на уеб страници на цял екран: jquery FullScreen Plugin. Той позволява показване на уеб страници на цял екран за различни браузъри, включително FF 10, Chrome и Safari, и се използва, за да предостави на потребителите по-четлива версия на уеб страницата, която може да се <canvas>мащабира и <video>елементира.
jQuery Fullscreen плъгин
Описание
Този плъгин jQuery предоставя лесен за използване механизъм за контрол на новия режим на цял екран в съвременните браузъри. В момента само по-новите браузъри, базирани на Webkit (като Chrome и Safari), Firefox и IE11+, предлагат тази нова функция за цял екран.
Употреба
Влизане в режим на цял екран
Можете да превключите цялата страница или един HTML елемент в режим на цял екран:
$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
Това работи само когато кодът е задействан от потребителско взаимодействие (например събитие при кликване на бутон). Браузърите не позволяват влизане в цял екранен режим без взаимодействие на потребителя.
Излизане от Fullscreen режим
Режимът на цял екран винаги се излиза чрез документа, но този плъгин го позволява и чрез всеки HTML елемент. След това се използва собственикът на избрания HTML елемент:
$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Запитване в режим на цял екран
Просто не подавай аргумент към метода FullScreen, за да поискаш текущото състояние. Методът връща текущия елемент на цял екран (или true, ако браузърът не го поддържа), когато режимът на цял екран е активен, false ако не е активен, или null, когато браузърът не поддържа fullscreen Изобщо режим. Така че можете да използвате този метод и за показване на бутон на цял екран само когато браузърът поддържа режим на цял екран:
$("#fullscreenButton").toggle($(document).fullScreen() != null))
Превключване на Fullscreen режим
Плъгинът предоставя друг метод за просто превключване на цял екранен режим:
$(document).toggleFullScreen();
Известия
Плъгинът задейства събитие за промяна на целия екран в документа, когато режимът на цял екран е променен. Ако браузърът отхвърли промяна на състоянието на цял екран, плъгинът задейства събитие fullscreenerror в документа. Пример:
$(document).bind("fullscreenchange", function() {
console.log("Fullscreen " + ($(document).fullScreen() ? " "включено" : "изключено"));
});
$(document).bind("fullscreenerror", function() {
alert("Браузърът отхвърли промяна на цял екран");
});
Пълноекранен iframe
Влизането в режим на цял екран от iframe не е разрешено по подразбиране, но може да се активира с няколко атрибута на iframe:
<iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
</iframe>
Известни проблеми
В IE 11 празна страница се показва при влизане в fullscreen от iframe. Нямам идея защо. Всякаква помощ е добре дошла.
В Safari (поне в Safari 7) не е позволено въвеждане с клавиатура в цял екранен режим.
GitHub адрес: https://github.com/kayahr/jquery-fullscreen-plugin
Туристи, ако искате да видите скритото съдържание на този пост, моля Отговор
| 
Публикувано в 14.08.2017 г. 16:34:52 ч.
|
|
|
Публикувано в 14.08.2017 г. 17:08:18 ч.
|
Публикувано в 25.11.2017 г. 14:35:17 ч.
|
