Layui+MVC动态选项卡全屏展示技术实现.pdfVIP

全屏展示》动态选项卡选项卡菜单实现

2.1Layui全屏展示

通过js相关代码的控制，可以实现页面的全屏展示，其实现方式是通过自定义触发，针对不同的浏览器需要

不同的方法来实现这一操作，相关的浏览器兼容性如下：

Chrome全屏:

webkitRequestFullScreen全屏:

webkitCancelFullScreenFirefox全屏:

mozRequestFullScreen全屏:

mozCancelFullScreenIE全屏:

requestFullscreen全屏:

exitFullscreen

全屏展示的实现是通过按钮的点击触发的，其方式与侧边导航的方式相同,在进行全屏展示的时候，

还需要注意icon的改变

//全屏展示

全屏：function(othis){varSCREEN_FULL=layui‑icon‑screen‑full,SCREEN_REST

=layui‑icon‑screen‑restore,iconElem=othis.children(i);if

(iconElem.hasClass(SCREEN_FULL))var=document.body;//浏览器兼容

(elem.webkitRequestFullScreen)elem.webkitRequestFullScreen();else

(elem.mozRequestFullScreen)elem.mozRequestFullScreen();else

(elem.requestFullscreen)elem.requestFullscreen();

iconElem.addClass(SCREEN_REST).removeClass(SCREEN_FULL);elsevarele

=document;//浏览器兼容(elem.webkitCancelFullScreen)

elem.webkitCancelFullScreen();else(elem.mozCancelFullScreen)

elem.mozCancelFullScreen();

全屏展示》动态Tab选项卡菜单实现

2.1Layui全屏展示

通过js相关代码的控制，可以实现页面的全屏展示，其实现方式是通过自定义触发，针对不同的浏览器需要不

同的方法来实现这一操作，相关的浏览器兼容性如下：

Chrome

全屏：webkitRequestFullScreen

全屏：webkitCancelFullScreen

Firefox

全屏：mozRequestFullScreen

全屏：mozCancelFullScreen

IE

全屏：requestFullscreen

全屏：exitFullscreen

全屏展示的实现是通过按钮的点击触发的，其方式与侧边导航的方式相同,在进行全屏展示的时候，还

需要注意icon的改变

//全屏展示

//浏览器兼容

elem.webkitRequestFullScreen();

//浏览器兼容

elem.webkitCancelFullScreen();

}否则如果(elem.exitFullscreen)

{

e

l

e

m.

e

x

i

tFullscreen();}iconElem.addClass(SCREEN_FULL).removeClass(SCREEN_REST);}}

2.2菜单点击页效果实