AmazeUI 点击元素显示全屏的实现


Posted in HTML / CSS onAugust 25, 2020

无论是点击图片还是按钮来显示全屏,具体代码如下:

点击按钮:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/amazeui.legacy.js"></script>
  <script type="text/javascript" src="js/amazeui.js"></script>
  <script type="text/javascript" src="js/amazeui.widgets.helper.js"></script>
  <script type="text/javascript" src="js/app.js"></script>
  <script type="text/javascript" src="js/handlebars.min.js"></script>
  <script type="text/javascript" src="js/polyfill/rem.min.js"></script>
  <script type="text/javascript" src="js/polyfill/respond.min.js"></script>
  <link rel="stylesheet" href="css/amazeui.css" />
  <link rel="stylesheet" href="css/bootstrap.css" />
  <link rel="stylesheet" href="css/admin.css" />
  <link rel="stylesheet" href="css/amazeui.flat.css" />
  <link rel="stylesheet" href="css/app.css" />
  <script type="text/javascript">
   $(function(){
    $('#demo-full-page').on('click',function(){
     if($.AMUI.fullscreen.enabled){
      $.AMUI.fullscreen.request();
     }else{
      //Ignore or do something else
     }
    })
   });
  </script>
 </head>
 <body>
  <button id="demo-full-page" class="am-btn am-btn-primary">Fullscreen the page</button>
 </body>
</html>

类似可以用于任何元素,也能达到这种效果。
AmazeUI却是用起来挺方便快捷的。

到此这篇关于AmazeUI 点击元素显示全屏的实现的文章就介绍到这了,更多相关AmazeUI 点击元素显示全屏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 #HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 #HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 #HTML / CSS
如何使用amaze ui的分页样式封装一个通用的JS分页控件
Aug 21 #HTML / CSS
Canvas波浪花环的示例代码
Aug 21 #HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 #HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 #HTML / CSS
You might like
php基础知识:控制结构
2006/12/13 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
详解JavaScript 中的 replace 方法
2016/01/01 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
js中的闭包学习心得
2018/02/06 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
Python中实现的RC4算法
2015/02/14 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
Python实现京东秒杀功能代码
2019/05/16 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
小学生保护环境倡议书
2014/05/15 职场文书
劳资员岗位职责
2015/02/13 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
我收到了德劲DE1107
2022/04/05 无线电
Go归并排序算法的实现方法
2022/04/06 Golang
Python循环之while无限迭代
2022/04/30 Python