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 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
Apr 26 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5 Canvas概述
Aug 26 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
HTML5新增加标签和功能概述
Sep 05 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 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/10/09 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python 解压pkl文件的方法
2018/10/25 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
网站域名和主机:Domain.com
2019/04/01 全球购物
家长给小学生的评语
2014/01/30 职场文书
读书之星事迹材料
2014/05/12 职场文书
学校班班通实施方案
2014/06/11 职场文书
敬老院标语
2014/06/27 职场文书
小学生读书活动总结
2014/06/30 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Redis分布式锁的7种实现
2022/04/01 Redis