搜索

0

主题

0

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2020-9-25 13:45:00 122 浏览 0 回复 来自手机

AmazeUI 点击元素显示全屏的实现

无论是点击图片还是按钮来显示全屏,详细代码如下:

点击按钮:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <script type="text/javascript" src="js/jquery.min.js"></script>
  7. <script type="text/javascript" src="js/amazeui.legacy.js"></script>
  8. <script type="text/javascript" src="js/amazeui.js"></script>
  9. <script type="text/javascript" src="js/amazeui.widgets.helper.js"></script>
  10. <script type="text/javascript" src="js/app.js"></script>
  11. <script type="text/javascript" src="js/handlebars.min.js"></script>
  12. <script type="text/javascript" src="js/polyfill/rem.min.js"></script>
  13. <script type="text/javascript" src="js/polyfill/respond.min.js"></script>
  14. <link rel="stylesheet" href="css/amazeui.css" />
  15. <link rel="stylesheet" href="css/bootstrap.css" />
  16. <link rel="stylesheet" href="css/admin.css" />
  17. <link rel="stylesheet" href="css/amazeui.flat.css" />
  18. <link rel="stylesheet" href="css/app.css" />
  19. <script type="text/javascript">
  20. $(function(){
  21. $('#demo-full-page').on('click',function(){
  22. if($.AMUI.fullscreen.enabled){
  23. $.AMUI.fullscreen.request();
  24. }else{
  25. //Ignore or do something else
  26. }
  27. })
  28. });
  29. </script>
  30. </head>
  31. <body>
  32. <button id="demo-full-page" class="am-btn am-btn-primary">Fullscreen the page</button>
  33. </body>
  34. </html>
复制代码

类似可以用于任何元素,也能达到这种结果。
AmazeUI却是用起来挺方便快捷的。

到此这篇关于AmazeUI 点击元素显示全屏的实现的文章就先容到这了,更多相干AmazeUI 点击元素显示全屏内容请搜刮脚本之家从前的文章或继续欣赏下面的相干文章,希望大家以后多多支持脚本之家!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

返回列表
您需要登录后才可以回帖 登录 | 点我注册

本版积分规则

登录或注册

关注我们

公众号:idc5ahl

官方客服

QQ:361825255

官方QQ群

119235847

扫一扫快速加入

群号652692981

快速回复 返回顶部 返回列表