跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果-优快云博客

本文介绍了一个使用PhoneGap实现的应用程序中如何处理返回键的行为。具体实现了再次点击返回键时应用退至桌面的效果，涉及的技术包括HTML5、JavaScript及PhoneGap API。

PhoneGap 再次点击返回键切换到桌面效果

相关代码

<!DOCTYPE html>
<html>
  <head>
    <title>
      PhoneGap Device Ready Example
    </title>
    <link 
        href="content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css"
        rel="stylesheet"
        type="text/css"/>
    <link href="content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" type="text/css"/>

    <script src="content/js/jquery.js" type="text/javascript">
    </script>
    <script src="content/js/jquery.mobile-1.4.0-beta.1.js" type="text/javascript">
    </script>
    <script src="content/js/cordova.js" type="text/javascript">
    </script>
    <script type="text/javascript">
      //提示信息
      function showAlert(text) {
        $.mobile.loading( "show", {
          text: text,
          textVisible: true,
           theme: "b",
          textonly: true
          });
        }
        function Alert(text) {
          console.log('Alert');
          console.log('text');
          showAlert(text);
        }
    
        //退出app
        function exitApp() {
          console.log('exitApp');
          navigator.app.exitApp();
        }
      </script>
      <script type="text/javascript">
        $(function(){
          //当PhoneGap被完全加载后会触发该事件。
          document.addEventListener('deviceready',onDeviceReady,false);

          })
          // PhoneGap准备就绪，可以使用！
          function onDeviceReady() {
           
            document.addEventListener('backbutton',Backbutton,false);
          }
          function Backbutton(){
            Alert('再次点击返回键切换到桌面!');
          
            document.removeEventListener("backbutton", Backbutton, false); 
            document.addEventListener("backbutton", exitApp, false);
           
            var intervalID = window.setTimeout(function() {
              $.mobile.loading( "hide" );
              window.clearTimeout(intervalID);
              document.removeEventListener("backbutton", exitApp, false); 
              document.addEventListener("backbutton", Backbutton, false); 
              }, 3000);

            }
         
        </head>
        <body>
         
        </body>
      </html>

源代码示例包[调试通过]

点击下载

声明：本博客高度重视知识产权保护，发现本博客发布的信息包含有侵犯其著作权的链接内容时，请联系我，我将第一时间做相应处理,联系邮箱ffgign@qq.com。

转载于:https://www.cnblogs.com/cube/p/3428730.html