fullscreen (全屏控件)

项目主页

https://gitee.com/miikio/fullscreen

项目简介

版本： 1.0
更新时间： 2022.3.5
兼容性： Chrome, Firefox, Opera, Edge, IE 9+
定位：HTML5 API 扩展工具类
介绍：简易轻量化类原生的高兼容窗口全屏控件。
源码下载：https://gitee.com/miikio/fullscreen/attach_files/986814/download/fullscreen-1.0.js

API属性

属性名称	属性类型	API描述	API返回
.raw	Object	当前控件实例支持的原生API名称	Object
.isEnabled	Boolean	全屏控件是否可用	Boolean
.isFullscreen	Boolean	当前是否已全屏	Boolean
.element	HTMLElement	当前全屏的元素	HTMLElement
.request	Function	启用全屏，参数：(element: 变为全屏的元素，默认为HTML根元素, options: 全屏配置)	Promise<resolve>
.exit	Function	退出全屏	Promise<resolve>
.toggle	Function	切换全屏，参数：(valid: 是否全屏，默认为切换, element: 变为全屏的元素，仅切换为全屏时生效, options: 全屏配置，仅切换为全屏时生效)	Promise<resolve>
.onchange	Function	全屏状态改变时的操作 (仅可赋值更改)	Function
.onerror	Function	全屏改变时返回错误的操作 (仅可赋值更改)	Function

使用示例

// 引入控件实例，路径为具体引入包的位置
import fullscreen from 'fullscreen'// 当前环境是否支持全屏控件可用
console.log(fullscreen.isEnabled)// 当前是否已开启全屏
console.log(fullscreen.isFullscreen)// 当前全屏的元素
console.log(fullscreen.element)// 启用全屏
fullscreen.request()// 将文档中某个元素启用全屏
fullscreen.request(document.getElementById('demo'))// 退出全屏
fullscreen.exit()// 切换全屏
fullscreen.toggle()// 等同于启用全屏
fullscreen.toggle(true)// 等同于退出全屏
fullscreen.toggle(false)// 将文档中某个元素切换全屏 (多次执行可见效果)
fullscreen.toggle(null, document.getElementById('demo'))// 绑定一个全屏状态改变时的操作
fullscreen.onchange = function(e) {console.log('onchange: ', e)
}// 绑定一个全屏改变时返回错误的操作
fullscreen.onerror = function(e) {console.log('onerror: ', e)
}

fullscreen (JS 简易轻量化类原生的高兼容窗口全屏控件)相关推荐

windows常见窗口样式和控件风格以及类样式
Windows常见窗口样式和控件风格王佰营徐丽红一.窗口样式 WS_POPUP 弹出式窗口(不能与WS_CHILDWINDOW样式同时使用) WS_CHILDWINDOW 子窗口(不能与WS_P ...
前端js使浏览器窗口全屏与退出----浏览器全屏时监测通过esc按键退出全屏（退出全屏时有页面上的相关处理）
vue项目项目分为顶部导航.侧边导航.以及右边mainContent区域需求是让项目的其中一个页面有全屏功能并且在全屏时隐藏掉顶部的顶导航栏实现: 1.在state里定义一个全局 ...
SilverLight学习笔记--如何在xaml文件中操作用户在后台代码定义的类(2)--示例篇：创建一个登录控件(原创)(转载本文请注明出处)...
本文将示例如何运用前篇所写知识来建立一个用户自定义的登录控件.此控件界面非常简单,主要涉及的知识点是: 如何创建用户控件(包括对此控件的自定义事件和属性的编写,此处我们将创建一个名为LoginBo ...
C# winform中一个类中如何调用另一个窗体的控件或方法
转载地址:http://blog.csdn.net/ichenqingyun/article/details/52622340 一种是创建窗体对象的方式,通过对象调用控件或方法例如: Form1 f ...
java datatable用法_Java中实现DataTable工具类，并利用其实现简单分页控件。
具体工具类代码,请见我上一个博客. 一.工具类的使用 1.1 DataTable工具类的使用 1.1.1DataTable简单解析顾名思义,DataTable其实就是一张虚拟数据表,用于存储由数据库 ...
【免杀前置课——Windows编程】五、窗口控件——什么是控件、Windolws 窗口两大类、Windows标准控件/通用控件、控件响应的接收、创建窗口制作不同控件
窗口控件 WINDOW控件什么是控件? 控件是常见的窗口上的交互元素.例如:一个按钮,一个复选框,一个列表框等.当控件的特定功能被触发后,会主动发送消息通知父窗口,父窗口可以通过发送消息给控件控制控 ...
图形操作类CBitmap 把内存数据输出到PIC控件
(1):复制元数据到 HBItmap HBITMAP CAviTestDlg::BufferToHBITMAP(LPSTR m_pBMPBuffer) { HBITMAP hShowBMP; LPST ...
AndroidStudio_安卓原生开发_精美自定义多选控件_多选Spinner_MultiSpinner_拿来即用---Android原生开发工作笔记144
1.首先去定义该控件:MPopListView package com.maddox.mmrrr1;import android.app.AlertDialog; import android.con ...
AndroidStudio安卓原生开发_UI高级_RecyclerView_循环复用控件_代替ListView_GridView---Android原生开发工作笔记121
之前我们学过,ListView,和GridView.那为什么我们还需要这个RecyclerView这个控件呢因为这个RecyclerView他是高度解耦,并且是可插拔式的布局方式. 这个Layout ...
AndroidStudio安卓原生开发_UI高级_DrawerLayout_侧滑菜单控件---Android原生开发工作笔记120
然后我们再来看一个UI控件,侧滑菜单. 上面是文字描述,我们去做一下. 我们到activity_main.xml中去我们先去写第一个子view,是内容显示区域.就是用来显示我们侧滑菜单的区域然后 ...

fullscreen (JS 简易轻量化类原生的高兼容窗口全屏控件)

fullscreen (全屏控件)

项目主页

项目简介

API属性

使用示例

fullscreen (JS 简易轻量化类原生的高兼容窗口全屏控件)相关推荐

最新文章

热门文章