码迷,mamicode.com
首页 > 其他好文 > 详细

[转] cordova-plugin-x-toast

时间:2016-04-15 19:55:06      阅读:934      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

 

 

  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

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"

iOS

技术分享

A few styling options

技术分享

技术分享

Android

技术分享

Windows Phone 8

技术分享

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.

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-packagevalue="Toast/>
</feature>
<!-- for Android -->
<feature name="Toast">
  <param name="android-packagevalue="nl.xservices.plugins.Toast/>
</feature>
<!-- for WP8 -->
<feature name="Toast">
  <param name="wp-packagevalue="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/javascriptsrc="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)

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-toastsource="npm/>

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

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>

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 
  );
}

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();
}

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",
      duration1500// 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");
      }
    }
  );

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{
      opacity0.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 
      cornerRadius16// minimum is 0 (square). iOS default 20, Android default 100 
      horizontalPadding20// iOS default 16, Android default 50 
      verticalPadding16 // 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.

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.

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

标签:

原文地址:http://www.cnblogs.com/freeliver54/p/5396339.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!