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 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
css3 pointer-events 介绍详解
Sep 18 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
phpmyadmin的#1251问题
2006/11/25 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php猜单词游戏
2015/09/29 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
python读取Excel实例详解
2018/08/17 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
学生社团文化节开幕式主持词
2014/03/28 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Nginx配置使用详解
2022/07/07 Servers