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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
Javascript 高级手势使用介绍
Apr 21 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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 escape URL编码
2008/12/10 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
Cpy和Python的效率对比
2015/03/20 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
孕妇内衣和胸罩:Cake Maternity
2018/07/16 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
高二物理教学反思
2014/02/08 职场文书
工作岗位说明书模板
2014/05/09 职场文书
课外活动总结范文
2014/07/09 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015年度保密工作总结
2015/04/24 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Python实现天气查询软件
2021/06/07 Python