本文转自:https://www.npmjs.com/package/cordova-plugin-x-toast

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

0. Index

  1. Description
  2. Screenshots
  3. Installation
    1. Automatically (CLI / Plugman)
    2. Manually
    3. PhoneGap Build
  4. Usage
  5. Styling
  6. Credits
  7. Changelog
  8. License

1. Description

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.

  • You can choose where to show the Toast: at the top, center or bottom of the screen.
  • You can choose two durations: short (approx. 2 seconds), or long (approx. 5 seconds), after which the Toast automatically disappears.
  • Compatible with Cordova Plugman.
  • Officially supported by PhoneGap Build.
  • Minimum iOS version is 6.

Example usages:

  • "There were validation errors"
  • "Account created successfully"
  • "The record was deleted"
  • "Login successful"
  • "The battery is almost dead"
  • "You are now logged out"
  • "Connection failure, please try again later"

2. Screenshots

iOS

A few styling options

Android

Windows Phone 8

3. Installation

Automatically (CLI / Plugman)

Toast is compatible with Cordova Plugman, compatible with PhoneGap 3.0 CLI, here's how it works with the CLI (backup your project first!):

Using the Cordova CLI and the Cordova Plugin Registry

$ cordova plugin add cordova-plugin-x-toast
$ cordova prepare

Or using the phonegap CLI

$ phonegap local plugin add cordova-plugin-x-toast

Toast.js is brought in automatically. There is no need to change or add anything in your html.

Manually

You'd better use the CLI, but here goes:

1. Add the following xml to your config.xml in the root directory of your www folder:

<!-- for iOS -->
<feature name="Toast">
  <param name="ios-package" value="Toast" />
</feature>
<!-- for Android -->
<feature name="Toast">
  <param name="android-package" value="nl.xservices.plugins.Toast" />
</feature>
<!-- for WP8 -->
<feature name="Toast">
  <param name="wp-package" value="Toast"/>
</feature>

For iOS, you'll need to add the QuartzCore.framework to your project (it's for automatically removing the Toast after a few seconds). Click your project, Build Phases, Link Binary With Libraries, search for and add QuartzCore.framework.

2. Grab a copy of Toast.js, add it to your project and reference it in index.html:

<script type="text/javascript" src="js/Toast.js"></script>

3. Download the source files and copy them to your project.

iOS: Copy the two .h and two .m files to platforms/ios/<ProjectName>/Plugins

Android: Copy Toast.java to platforms/android/src/nl/xservices/plugins (create the folders)

WP8: Copy Toast.cs to platforms/wp8/Plugins/nl.x-services.plugins.toast (create the folders)

PhoneGap Build

Toast works with PhoneGap build too, but only with PhoneGap 3.0 and up.

Just add the following xml to your config.xml to always use the latest version of this plugin:

<gap:plugin name="cordova-plugin-x-toast" source="npm" />

Toast.js is brought in automatically. There is no need to change or add anything in your html.

4. Usage

Showing a Toast

You have two choices to make when showing a Toast: where to show it and for how long.

  • show(message, duration, position)
  • duration: 'short', 'long', '3000', 900 (the latter are milliseconds)
  • position: 'top', 'center', 'bottom'

You can also use any of these convenience methods:

  • showShortTop(message)
  • showShortCenter(message)
  • showShortBottom(message)
  • showLongTop(message)
  • showLongCenter(message)
  • showLongBottom(message)

You can copy-paste these lines of code for a quick test:

<button onclick="window.plugins.toast.showShortTop('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showShortTop</button>
<button onclick="window.plugins.toast.showLongBottom('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showLongBottom</button>
<button onclick="window.plugins.toast.show('Hello there!', 'long', 'center', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast show long center</button>

Tweaking the vertical position

Since 2.1.0 you can add pixels to move the toast up or down. Note that showWithOptions can be used instead of the functions above, but it's not useful unless you want to pass addPixelsY.

function showBottom() {
  window.plugins.toast.showWithOptions(
    {
      message: "hey there",
      duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself. 
      position: "bottom",
      addPixelsY: -40  // added a negative value to move it up a bit (default 0) 
    },
    onSuccess, // optional 
    onError    // optional 
  );
}

Hiding a Toast

In case you want to hide a Toast manually, call this:

function hide() {
  // this function takes an optional success callback, but you can do without just as well 
  window.plugins.toast.hide();
}

Receiving a callback when a Toast is tapped

On iOS and Android the success handler of your show function will be notified (again) when the toast was tapped.

So the first time the success handler fires is when the toast is shown, and in case the user taps the toast it will be called again. You can distinguish between those events of course:

  window.plugins.toast.showWithOptions(
    {
      message: "hey there",
      duration: 1500, // ms 
      position: "bottom",
      addPixelsY: -40,  // (optional) added a negative value to move it up a bit (default 0) 
      data: {'foo':'bar'} // (optional) pass in a JSON object here (it will be sent back in the success callback below) 
    },
    // implement the success callback 
    function(result) {
      if (result && result.event) {
        console.log("The toast was tapped");
        console.log("Event: " + result.event); // will be defined, with a value of "touch" when it was tapped by the user 
        console.log("Message: " + result.message); // will be equal to the message you passed in 
        console.log("data.foo: " + result.data.foo); // .. retrieve passed in data here 
      } else {
        console.log("The toast has been shown");
      }
    }
  );

Styling

Since version 2.4.0 you can pass an optional styling object to the plugin. The defaults make sure the Toast looks the same as when you would not pass in the styling object at all.

Note that on WP this object is currently ignored.

  window.plugins.toast.showWithOptions({
    message: "hey there",
    duration: "short", // 2000 ms 
    position: "bottom",
    styling: {
      opacity: 0.75, // 0.0 (transparent) to 1.0 (opaque). Default 0.8 
      backgroundColor: '#FF0000', // make sure you use #RRGGBB. Default #333333 
      textColor: '#FFFF00', // Ditto. Default #FFFFFF 
      cornerRadius: 16, // minimum is 0 (square). iOS default 20, Android default 100 
      horizontalPadding: 20, // iOS default 16, Android default 50 
      verticalPadding: 16 // iOS default 12, Android default 30 
    }
  });

Tip: if you need to pass different values for iOS and Android you can use fi. the device plugin to determine the platform and pass opacity: isAndroid() ? 0.7 : 0.9.

WP8 quirks

The WP8 implementation needs a little more work, but it's perfectly useable when you keep this in mind:

  • You can't show two Toasts simultaneously.
  • Wait until the first Toast is hidden before the second is shown, otherwise the second one will be hidden quickly.
  • The positioning of the bottom-aligned Toast is not perfect, but keep it down to 1 or 2 lines of text and you're fine.

5. CREDITS

This plugin was enhanced for Plugman / PhoneGap Build by Eddy Verbruggen. The Android code was entirely created by me. For iOS most credits go to this excellent [Toast for iOS project by Charles Scalesse] (https://github.com/scalessec/Toast).

[转] cordova-plugin-x-toast的更多相关文章

  1. [Cordova] Plugin里使用Android Library

    [Cordova] Plugin里使用Android Library 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了 ...

  2. [Cordova] Plugin开发入门

    [Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来 ...

  3. [Cordova] Plugin里使用iOS Framework

    [Cordova] Plugin里使用iOS Framework 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了重复 ...

  4. [Cordova] Plugin开发架构

    [Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要 ...

  5. cordova plugin数据传递概要

    cordova plugin数据传递概要: 1.调用pluginManager向所有插件发送消息: PluginManager.postMessage(String id, Object data); ...

  6. ionic cordova plugin simple demo

    要用cordova plugin 的话还是需要设置一下的 1. 下载 ng-cordova.js download the zip file here 2. 在index.html 中引用 (cord ...

  7. 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

    更新框架: meteor update meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova ...

  8. cordova plugin汇总大全

    1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plu ...

  9. ionic cordova plugin for ios

    源代码结构目录: payplugin: |_src |_android |_PayPlugin.java |_ios |_CDVPayPlugin.h |_CDVPayPlugin.m |_www | ...

  10. cordova plugin add出现CERT_UNTRUSTED错误解决方法

    介绍 目前使用ionic+cordova完成hybmid app开发,在安装geolocation插件时爆出来一个莫名的错误: Fetching from npm failed: CERT_UNTRU ...

随机推荐

  1. Android进阶--Acticivity的启动模式

    一.引言 我们在多次启动同一个Activity时,系统默认会重复创建多个实例,这样看上去便十分的愚蠢,所以android在设计时提供了启动模式来修改系统的默认行为.目前有四种启动模式:standard ...

  2. [译]最长回文子串(Longest Palindromic Substring) Part I

    [译]最长回文子串(Longest Palindromic Substring) Part I 英文原文链接在(http://leetcode.com/2011/11/longest-palindro ...

  3. Git提交基本流程

    在无其他分支,大家都向同一分支master分支提交代码的情况下: 1.查看本地对代码的修改情况,即可以被提交的修改记录 git status 其中被修改过的文件标识为modified,删除的文件del ...

  4. DOM优化

    一:DOM与浏览器: 重排:改变页面的内容. 重绘:浏览器显示的内容. 添加顺序:尽量在appendchild之前. 合并DOM操作-利用csstext, 缓存布局信息 文档碎片. 二 DOM 与事件 ...

  5. php中静态变量和静态方法

    1,静态变量:所有对象共享的变量成为静态变量.静态变量类似于全局变量,不过全局变量破坏对象的封装性,因此其对应于面向过程:静态变量对应于面向对象. 2,全局变量,全局变量的使用实例如下,声明全局变量时 ...

  6. java调用c++生成的动态和静态库时遇到的问题

    java.lang.UnsatisfiedLinkError: no jacob in java.library.path -Djava.library.path 关于java用jni调用 dll动态 ...

  7. Ioc 控制反转 实例

    关于IOC 或者是DI 什么的真的很坑爹. 开始理解了这东西了然后闲的没事就又百度了一下,得  我又凌乱了.  看了两个大神的贴 尼玛啊 完全是反过来了. 纠结了半天.然后就想找个简单点不坑爹的原理代 ...

  8. shelll函数求两个输入数字之和

    #!/bin/bash #This is a test of the addition of the program! function AddFun { read -p "Enter a ...

  9. Light oj 1234 - Harmonic Number

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1234 给你一个数n,让你求 这个要是直接算的话肯定TLE,要是用1e8的数组预处理存储 ...

  10. 203. Segment Tree Modify

    最后更新 二刷 08-Jan-2017 利用线段树来更改,找到更改的NODE,然后更改那个brach上的所有max值. 首先确定recursion的终止条件 然后通过判断大小来找方向 找到NODE之后 ...