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闪亮进度条效果实现思路及代码
Apr 17 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
Dec 30 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
复选框全选与全不选操作实现思路
2013/08/18 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
python清除字符串前后空格函数的方法
2018/10/21 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
python多线程semaphore实现线程数控制的示例
2020/08/10 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
学生自我评价范文
2014/02/02 职场文书
骨干教师考核方案
2014/05/09 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers