[转] cordova-plugin-x-toast
本文转自:https://www.npmjs.com/package/cordova-plugin-x-toast
cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
0. Index
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
Or using the phonegap CLI
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, 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
:
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:
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:
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
.
Hiding a Toast
In case you want to hide a Toast manually, call this:
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:
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.
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的更多相关文章
- [Cordova] Plugin里使用Android Library
[Cordova] Plugin里使用Android Library 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了 ...
- [Cordova] Plugin开发入门
[Cordova] Plugin开发入门 Overview Cordova的设计概念,是在APP上透过Web控件来呈现Web页面,让Web开发人员可以操作熟悉的语言.工具来开发APP.使用Web页面来 ...
- [Cordova] Plugin里使用iOS Framework
[Cordova] Plugin里使用iOS Framework 前言 开发Cordova Plugin的时候,在Native Code里使用第三方Library,除了可以加速项目的时程.也避免了重复 ...
- [Cordova] Plugin开发架构
[Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要 ...
- cordova plugin数据传递概要
cordova plugin数据传递概要: 1.调用pluginManager向所有插件发送消息: PluginManager.postMessage(String id, Object data); ...
- ionic cordova plugin simple demo
要用cordova plugin 的话还是需要设置一下的 1. 下载 ng-cordova.js download the zip file here 2. 在index.html 中引用 (cord ...
- 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower
更新框架: meteor update meteor框架的优点不言而喻,它大大减轻了App前后端开发的负担,今年5月又获得B轮2000万融资,代表了市场对它一个免费.开源开发框架的肯定.cordova ...
- cordova plugin汇总大全
1.获取当前应用的版本号 cordova plugin add cordova-plugin-app-version 2.获取网络连接信息 cordova plugin add cordova-plu ...
- Cordova plugin
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010106153/article/details/53418528Cordova plugin工程 ...
- vue+cordova构建跨平台应用集成并使用Cordova plugin
安装 //安装 vue-cil npm install --global vue-cli //安装cordova npm i cordova -g cordova 新建项目 //新建cordova 项 ...
随机推荐
- Ionic 开发环境搭建
android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...
- 一款效果精致的 jQuery 多层滑出菜单插件
想要以用户友好的方式呈现多级菜单是件不容易的事情,而且还要跨浏览器兼容就更难了.Multi-Level Push Menu 这款 jQuery 插件提供了呈现这种菜单的解决方案,能够让你无限制的展示菜 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- mongodb系列3 mongo mongoskin 连接以及连接数的问题进阶
1)使用mongodb连接mongo var mongo = require('mongodb'), //引入mongodb dbHost = '127.0.0.1', dbPort = 27017; ...
- 从0开始学angularjs-笔记03
大家好,今天上班第一天,可能大家都不是很想上班吧,我也是一样啦---不想上班就来继续写我的angualrjs教程,造福大家吧!! 今天的主要讲解部分有以下几点:1.演示一个完整的项目结构 2.$sc ...
- java--POI解析excel兼容性问题
近日,使用POI解析excel,发现2003版本的excel解析与2007版本的excel解析存在问题.特此总结: 1.所需jar包 : 2.java类代码(读取excel文件): public vo ...
- 一个类似backbone路由的纯净route ( 前端路由 客户端路由 backbone路由 )
大家用backbone.angular,可能都习惯了内置的路由,这两个框架的路由都是非常优秀的,强大而简单. 客户端(浏览器)路由原理其实比较简单,其实就是监听hash的变化. 在之前的架构探讨中,说 ...
- JavaScript学习08 Cookie对象
JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...
- Android对话框
这周过的实在是艰辛,自打这周二起我的本本就开始闹"罢工",最后还是重装系统了事. . . 只是可怜了我的那些被格了的软件(悲伤辣么大)! 往事不要再提,人生几度风雨... 简 ...
- 【代码笔记】iOS-竖状图
一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController ...