App下載

在html5中怎么通過(guò)AmazeUI實(shí)現(xiàn)點(diǎn)擊元素顯示全屏？案例分享！

猿友 2021-07-30 17:28:31 瀏覽數(shù) (2179)
反饋

今天小編來(lái)和大家分享個(gè)有關(guān)于：“在html5中怎么通過(guò)AmazeUI實(shí)現(xiàn)點(diǎn)擊元素顯示全屏？”這方面的相關(guān)內(nèi)容，希望小編的分享可以幫助到大家！

無(wú)論是點(diǎn)擊圖片還是按鈕來(lái)顯示全屏，具體代碼如下：

點(diǎn)擊按鈕：

<!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>

類似可以用于任何元素，也能達(dá)到這種效果。
AmazeUI卻是用起來(lái)挺方便快捷的。

通過(guò)這篇文章的閱讀相信大家對(duì)于：“在html5中怎么通過(guò)AmazeUI實(shí)現(xiàn)點(diǎn)擊元素顯示全屏？”這方面問(wèn)題也有所了解了吧！當(dāng)然了在html5中我們需要學(xué)習(xí)的內(nèi)容不僅僅只有這樣，更多有關(guān)于html5這方面的學(xué)習(xí)都可以在W3Cschool中進(jìn)學(xué)習(xí)。 


HTML5

0 人點(diǎn)贊