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制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
Apr 14 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 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
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
对vue里函数的调用顺序介绍
2018/03/17 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
通过实例解析JavaScript for in及for of区别
2020/06/15 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
Python实现App自动签到领取积分功能
2018/09/29 Python
在python 中实现运行多条shell命令
2019/01/07 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
C#如何进行LDAP用户校验
2012/11/21 面试题
领导的自我鉴定
2013/12/28 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
保研推荐信
2014/05/09 职场文书
给公司的建议书范文
2014/05/13 职场文书
党员个人总结自评
2015/02/14 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android