Fullscreen 示范

kxapi - 封装fullscreen，消除浏览器差异

by calefy

HTML

<script src="http://s.kaixin001.com.cn/js/base/Haibei_Combo-00110715a.js"></script>
<script src="http://s.kaixin001.com.cn/js/forks/home/kxbase-00373a6ed.js"></script>
<script src="http://s.kaixin001.com.cn/js/apps/common/Fullscreen-0002210fa.js"></script>
<h1>Fullscreen</h1>
<p>不能在iframe内使用全屏，可以将该demo的iframe页面单独打开，然后切换全屏显示</p>

<div id="box">
    here will Fullscreen <br/>
    Hello , world !
    
    <p><input value="点击切换全屏状态" type="button" id="btn"/></p>
</div>

CSS

#box{width:200px;height:150px;padding:10px;background:#fff;}

JavaScript

K.App('ATestFullscreen', ['jQuery', 'apps/common/Fullscreen']).define(function (require) {

    var $ = require('jQuery'),
        Fullscreen = require('apps/common/Fullscreen');
    
    return {
        main: function() {
            // 初始化全屏显示对象
            var fs = new Fullscreen({
                // 需要全屏显示的元素
                element: $('#box'),
                // 全屏状态切换时的回调函数
                callback: function(isFullscreen) {
                    if (isFullscreen) {
                        alert('现在已经进入全屏模式');
                    }
                    else {
                        alert('退出了全屏状态');
                    }
                }
            });

            // 点击某个按钮，触发全屏切换
            $('#btn').click(function() {
                fs.fullscreen();
            });
        }
    };

});