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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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获取服务器时间的实现代码
2013/06/07 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php xhprof使用实例详解
2019/04/15 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python3分析处理声音数据的例子
2019/08/27 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
缓解脚、腿和背部疼痛:Z-CoiL鞋
2019/03/12 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
什么是TCP/IP
2014/07/27 面试题
在c#中using和new这两个关键字有什么意义
2013/05/19 面试题
Windows和Linux动态库应用异同
2016/07/28 面试题
服装行业创业计划书范文
2014/02/05 职场文书
采购助理岗位职责
2014/02/16 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2014年租房协议书范本
2014/10/30 职场文书
委托证明范本
2014/11/25 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python