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打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 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
基于mysql的bbs设计(四)
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
页面中js执行顺序
2009/11/09 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python打开网页和暂停实例
2014/09/30 Python
python实现黑客字幕雨效果
2018/06/21 Python
Django实现学员管理系统
2019/02/26 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
电子商务实训报告总结
2014/11/05 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技