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之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS Grid布局教程之网格单元格布局
Dec 30 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
用HTML5制作一个简单的弹力球游戏
May 12 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html2canvas把div保存图片高清图的方法示例
Mar 05 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 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基于session实现数据库交互的类实例
2015/08/03 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
用js判断是否为360浏览器的实现代码
2015/01/15 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JavaScrpt中如何使用 cookie 设置查看与删除功能
2017/07/09 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
浅析Vue项目中使用keep-Alive步骤
2018/07/27 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python实现拼接多张图片的方法
2014/12/01 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python实现在线批量美颜功能过程解析
2020/06/10 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
机电专业体育教师求职信
2013/09/21 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
关于 Python json中load和loads区别
2021/11/07 Python