全屏插件和jQuery元素大小调整插件

1 screenfull.js

通常浏览器都有提示用户按F11，这样会使浏览器全屏。相比于键盘，鼠标似乎更有效率和更符合我们的习惯。所以，今天介绍的screenfull.js插件解决了这个问题。该插件不仅对浏览器，而且对单个元素也可以进行全屏操作。

screenfull.js是对跨浏览器使用JavaScript全屏API进行简单的封装，它可以让你把网页或任何元素进入全屏。你也不必自己实现来平滑不同浏览器之间的差异，因为screenfull.js已帮你实现。

• 项目主页： https://github.com/sindresorhus/screenfull.js
• Bootstrap CDN： http://cdn.bootcss.com/screenfull.js/2.0.0/screenfull.js

// 实例代码
// 利用按钮，对整个页面进行全屏或退出操作
$("#button").click(function(){
    if(screenfull.enabled){
        // 仅仅只进行全屏而不退出全屏可以调用
        // screenfull.request() 方法。
        screenfull.toggle();
    }else {
        // Ignore or do something else
    }
});
// 对单个元素进行全屏操作
// 注意 screenfull.js是用原生的js写的
// 所以每个函数输入的参数也必须是js对象
// 可以利用jQuery中数组下标来获取对应的js对象
$("#div_button").click(function(){
    if(screenfull.enabled){
        screenfull.toggle($("#div")[0]);
    }else {
        // Ignore or do something else
    }
});

2 jquery.ba-resize.js

jquery的.resize()只对窗口和框架有效。在IE和Opera浏览器中，只要窗口边框被拖动，就触发该事件，在Mozilla浏览器中，resize 事件只是在停止改变窗口大小时才会触发。为了解决其局限性和兼容不容的浏览器，jquery.ba-resize.js插件则弥补了jQuery.resize()方法的不足。

• 项目主页： http://benalman.com/projects/jquery-resize-plugin/
• Bootstrap CDN： http://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js

// 监听窗口大小调整事件，每次窗口改变大小就触发该事件
        $(window).resize(function(){
            var elem = $(this);
            // 更新窗口宽度和高度
            // 可以替换这段代码，做一些有用的事情
            $('#window-info').text( 'window width: ' + elem.width() + ', height: ' + elem.height() );
        });

        //监听div尺寸调整事件
        $('textarea').resize(function () {
            var elem = $(this);
            $(this).val('window width: ' + elem.width() + ', height: ' + elem.height())
        }).resize()    //加不加.resize()是有区别的，加上后在页面初始化时就可以触发事件