/*** 全屏顯示API兼容瀏覽器封裝* 方法定義參考:https://github.com/martinaglv/jQuery-FullScreen/blob/master/fullscreen/jquery.fullscreen.js** @name Fullscreen* @author linfei<[email protected]>* @version 1.0* @url* @license MIT License* @date 2012/6/6** 原理:* element是要全屏顯示的元素,fullscreen時:* 1. 給element添加.fullscreen* 2. 用一個空div包裹element,options.css中的定義用在這個div上,* 以便使這個div中的內容(即element)足夠長時可以滾動顯示* 3. 對這個div調用requestFullscreen()** 應用示例:* var fs = new Fullscreen( {* element: $( '#fullscreenElementSelector' ),* callback: function( isFullscreen ) {* if ( isFullscreen ) {* alert( '現在已經進入全屏模式' );* }* else {* alert( '退出了全屏狀態' );* }* }* } );** $( '#buttonToggleFullscreen' ).click( function(){* fs.toggleFullscreen();* } );*** 特別注意:* 1. win7下(其他windows未測),ESC退出全屏後會馬上觸發ESC的key事件* mac下,ESC退出全屏,不會再出發ESC的鍵盤事件* 因此,如果需要監視ESC的鍵盤事件,一定要注意兩個系統的區別* 2. 使用element.requestFullscreen()時,element在chrome中是任意的,* 哪怕element只是一個沒有被添加到文檔的 $("<div/>") 空元素;* 但是在firefox中必須是要全屏顯示的元素本身,否則不能全屏顯示。**/( function( $ ) {function Fullscreen( options ) {this.options = $.extend( true, {'element' : $( 'body' ),'css' : {'background' : '#000','width' : '100%','height' : '100%','position' : 'fixed','top' : 0,'left' : 0,'z-index' : 1000,'overflow' : 'auto'},'callback' : $.noop,'noSafari' : false}, options );//必須要全屏輸入時,將safari排除if ( this.options.noSafari && this._browser.safari ) {this.fullscreenEnabled = false;}this._initEvents();}$.extend( Fullscreen.prototype, {/*** 執行全屏狀態切換*/toggleFullscreen: function() {if ( !this.fullscreenEnabled ) {return;}if ( this.fullscreen() ) {this.exitFullscreen();}else {var wp = $( '<div/>' ).css( this.options.css ),el = this.options.element.addClass( 'fullscreen' );el.wrap( wp ); // 雖然wp包圍el,但變量wp中的內容不會變,仍然是一個空的div// 下面參數在chrome下用 `wp.get(0)` 是正常的,但firefox不行this.requestFullscreen( el.parent().get( 0 ) );}},/*** 註冊事件,監視fullscreenchange*/_initEvents: function() {if ( !this.fullscreenEnabled ) {return;}var me = this,doc = $( document );doc.unbind( 'fullscreenchange webkitfullscreenchange mozfullscreenchange' ).bind('fullscreenchange webkitfullscreenchange mozfullscreenchange',function( evt ) {if ( !me.fullscreen() ) {me.options.element.removeClass( 'fullscreen' ).unwrap();}me.options.callback.call( me, me.fullscreen() );});},/*** 判斷瀏覽器類型*/_browser: ( function() {var ua = window.navigator.userAgent.toUpperCase(),v = {};v.chrome = /CHROME/.test( ua );v.safari = !v.chrome && /SAFARI/.test( ua );return v;} )(),/*** 判斷當前全屏狀態*/fullscreen: function() {return document.fullscreen ||document.webkitIsFullScreen ||document.mozFullScreen ||false;},/*** W3 draft* document.fullscreenElement* Returns the element that is displayed fullscreen,* or null if there is no such element.** @return {DOM/null} 全屏顯示的元素或是null*/fullscreenElement: function() {return document.fullscreenElement ||document.webkitCurrentFullScreenElement ||document.mozFullScreenElement ||null;},/*** W3 draft:* document.fullscreenEnabled* Returns true if document has the ability to display elements fullscreen,* or false otherwise.*/fullscreenEnabled: ( function() {var doc = document.documentElement;return ( 'requestFullscreen' in doc ) ||( 'webkitRequestFullScreen' in doc ) ||( 'mozRequestFullScreen' in doc && document.mozFullScreenEnabled ) ||false;} )(),/*** W3 draft:* element.requestFullscreen()* Displays element fullscreen.** @param {DOM} elem 要全屏顯示的元素*/requestFullscreen: function( elem ) {if (elem.requestFullscreen) {elem.requestFullscreen();}else if (elem.webkitRequestFullScreen) {if ( this._browser.chrome ) {elem.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT );}else {elem.webkitRequestFullScreen();}}else if (elem.mozRequestFullScreen) {elem.mozRequestFullScreen();}},/*** W3 draft:* document.exitFullscreen()* Stops any elements within document from being displayed fullscreen.*/exitFullscreen: function() {if (document.exitFullscreen) {document.exitFullscreen();}else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();}else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();}}} );window.Fullscreen = Fullscreen;} )( jQuery );
JQuery js / Fullscreen.js
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.