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的定位页面元素
Aug 29 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
CSS3的resize属性使用初探
Sep 27 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
详解使用HTML5的classList属性操作CSS类
Oct 13 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 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
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php 自写函数代码 获取关键字 去超链接
2010/02/08 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
微信小程序收藏功能的实现代码
2018/06/12 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
浅谈Python处理PDF的方法
2017/11/10 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
Java程序员面试90题
2013/10/19 面试题
服装创业计划书范文
2014/02/05 职场文书
经典英文广告词
2014/03/18 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
遗嘱继承权公证书
2015/01/26 职场文书
反邪教学习心得体会
2016/01/15 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python