当前位置:首页 > 开发 > 移动开发 > 正文

cordova实现“再点击一次退出”效果

发表于: 2014-08-01   作者:gundumw100   来源:转载   浏览:
摘要: 基本的写法如下: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b
基本的写法如下:

document.addEventListener("deviceready", onDeviceReady, false);
			
function onDeviceReady() {
	//navigator.splashscreen.hide();
        document.addEventListener("backbutton", onBackKeyDown, false);                     
}
			function onBackKeyDown() {
			    Toast.showShort('再点击一次退出!');
			    document.removeEventListener("backbutton", onBackKeyDown, false); // 注销返回键
			    document.addEventListener("backbutton", exitApp, false);//绑定退出事件
			    // 3秒后重新注册
			    var intervalID = window.setInterval(function() {
			        window.clearInterval(intervalID);
			        document.removeEventListener("backbutton", exitApp, false); // 注销返回键
			        document.addEventListener("backbutton", onBackKeyDown, false); // 返回键
			    }, 3000);
			}
			function exitApp(){
			    navigator.app.exitApp();
			}



上面的代码中需要一个toast插件,这个是需要自己实现的,当然你可以使用纯JS写一个模仿android。

比如我提供一个现成的(PS:本人没有使用过,不知道有没有效果!)

/**
 * 自定义toast,js实现android中toast效果  
 * @param msg 显示文字
 * @param duration 显示的时间长度
 */
function showToast(msg, duration) {  
    duration = isNaN(duration) ? 3000 : duration;  
    var m = document.createElement('div');  
    m.innerHTML = msg;  
    m.style.cssText = "width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; line-height:40px; text-align:center; border-radius:5px; position:fixed; top:70%; left:20%; z-index:999999; font-weight:bold;";  
    document.body.appendChild(m);  
    setTimeout(function() {  
        var d = 0.5;  
        m.style.webkitTransition = '-webkit-transform ' + d  
                + 's ease-in, opacity ' + d + 's ease-in';  
        m.style.opacity = '0';  
        setTimeout(function() {  
            document.body.removeChild(m)  
        }, d * 1000);  
    }, duration);  
}



我采用的是插件的形式:
1,用java写一个cordova插件(本人只会java,object-c不会,所以要在iphone上跑还需要用object-c写一个,这是使用插件不足的地方,不过可以网上搜一下,这种小插件基本可以搞定!)


package com.mobovip.mobile.plugin.toast;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

import android.widget.Toast;

public class ToastPlugin extends CordovaPlugin {

	private static final int TOAST_MESSAGE_INDEX = 0;
	private Toast toast = null;
	
	@Override
	public boolean execute(String action, JSONArray data,
			CallbackContext callbackContext) throws JSONException {
		
		if(action.equals("show_short")){
			String message = data.getString(TOAST_MESSAGE_INDEX);
			showToast(message, Toast.LENGTH_SHORT);
		}else if(action.equals("show_long")){
			String message = data.getString(TOAST_MESSAGE_INDEX);
			showToast(message, Toast.LENGTH_LONG);
		}else if(action.equals("cancel")){
			cancelToast();
		}
		callbackContext.success();
		return true;
	}
	
	private void showToast(final String message, final int length) {
		cordova.getActivity().runOnUiThread(new Runnable(){

			@Override
			public void run() {
				// TODO Auto-generated method stub
				 toast = Toast.makeText(cordova.getActivity(), message, length);  
	             toast.show();  
			}
			
		});
	}
	
	private void cancelToast() {  
        cordova.getActivity().runOnUiThread(new Runnable() {  
            @Override  
            public void run() {  
                if (toast != null){
                	toast.cancel();
                }
            }  
        });  
    }  
	
}



2,在res/xml/config.xml文件中增加插件配置
<feature name="Toast">
        <param name="android-package" value="com.mobovip.mobile.plugin.toast.ToastPlugin" />
    </feature>


3,在asserts/www/plugins/目录下实现自己插件的toast.js文件
cordova.define("com.mobovip.mobile.plugin.toast.Toast", function(require, exports, module) {/*global cordova, module*/
module.exports = {
    showShort: function (message, win, fail) {
        cordova.exec(win, fail, "Toast", "show_short", [message]);
    },

    showLong: function (message, win, fail) {
        cordova.exec(win, fail, "Toast", "show_long", [message]);
    },

    cancel: function (win, fail) {
        cordova.exec(win, fail, "Toast", "cancel", []);
    }
};
});


4,添加toast插件js配置信息

   在assets/www/cordova_plugins.js文件中添加如下信息:

module.exports = [
   {  
	    "file": "plugins/com.mobovip.mobile.plugin.toast/www/toast.js",  
	    "id": "com.mobovip.mobile.plugin.toast.Toast",  
	    "clobbers": [  
	        "Toast"  //Js中使用的时候变量的名称
	    ]  
   },
    .........



同时加上插件的版本:
module.exports.metadata = 
// TOP OF METADATA
{
    "com.mobovip.mobile.plugin.toast": "1.0.0", 
     .........


5,代码调用
Toast.showShort('再点击一次退出!');

cordova实现“再点击一次退出”效果

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
如何让超链接点击一次就不能再点呢? <a href="<%=path%>/orders/export" class="daoc" onc
如何让超链接点击一次就不能再点呢? <a href="<%=path%>/orders/export" class="daoc" onc
如何让超链接点击一次就不能再点呢? <a href="<%=path%>/orders/export" class="daoc" onc
如何让超链接点击一次就不能再点呢? <a href="<%=path%>/orders/export" class="daoc" onc
Login.php JS实现:点击退出系统,出现提示信息框,点确认,返回到相应页面,点取消,保留在当前页
<html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 6.0"> <
实现这个功能的原理就是比较两次按下返回键的时间间隔,如果大于设定的时间间隔(比如2秒),则提示
最近没日没夜的加班,加得连自己姓什么都忘记了,更可怕的是测试出一个BUG还要扣工资!唉,先不谈工
我们在开发的过程中,往往为了美化界面的需要,会修改按钮的默认外观,而因为Android中的按钮有三种
实现效果: [img] [/img] 大家看到这个效果是不是特别的熟悉呀,呵呵,就是人人网的里面的一个效果,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号