插件 jQuery.Fullscreen 中文API文档
插件 jQuery.Fullscreen 中文API文档
源码 & 下载
- Github 地址:https://github.com/private-face/jquery.fullscreen
- 源码下载: -
- 效果演示: -
用于在全屏模式下打开页面元素的jQuery插件。
jQuery Fullscreen插件允许您在全屏模式下打开页面上的任何元素,而无需在所有现代浏览器(Firefox,IE,Chrome,Safari,Opera)中使用Flash。如果浏览器不支持此功能,则只需拉伸元素以适应屏幕而不切换到全屏。
Chrome 15 +,Safari 5.1 +,Firefox 10 +,Opera 12.1+和IE 11本身支持全屏API。它也存在于Firefox 9.0中,但默认情况下禁用。你可以通过设置启用它fullscreen-api.enabled来true在about:config。
用法
请求/退出全屏
<div id="some_selector">
Block to be displayed in fullscreen.
</div>
<script>
// open element in fullscreen
$('#some_selector').fullscreen(options);
// close fullscreen
$.fullscreen.exit();
</script>
目前支持以下选项:
- overflow {‘hidden’}:‘overflow’css-property,在全屏打开时设置为元素;
- toggleClass {null}:当元素改变其“全屏”状态时切换的类名;
$ .fullscreen对象方法
- $.fullscreen.open(element[, options]):相当于$(element).fullscreen(options);
- $.fullscreen.exit():退出全屏模式;
- $.fullscreen.isNativelySupported() {true|false}:true如果浏览器本机支持Fullscreen API,则返回;
- $.fullscreen.isFullScreen() {true|false}:true如果在全屏中打开了一个元素,则返回。
活动
fscreenchange
fscreenchangewindow.document当页面上的某个元素更改其“全屏”状态时,会发送事件。将三个参数传递给事件的处理程序:
- jQuery.Event对象
- 全屏状态(真或假)
- Element
fscreenopen / fscreenclose
fscreenopen和fscreenclose事件时,它在全屏(或退出全屏模式)被打开发送给一个元素。
fscreenerror
fscreenerror 如果无法执行请求的全屏操作,则会在@ document @上触发事件。
安全说明
由于安全原因,来电一样$(…).fullscreen(),$.fullscreen.open()和$.fullscreen.close()只允许内部用户生成的事件(如点击,KEYDOWN,等…)。这意味着以下代码将不起作用:
$(function() {
$('body').fullscreen();
});
因为这里的全屏直接调用而没有来自用户的任何操作。
浏览器支持
- Firefox 10+
- Chrome 15+
- Safari 5.1+
- Opera 12.1+
- Internet Explorer 11
- IE 8-10(也应该在IE7中工作,也许还有一些小问题)