Do you wanna have some toasts ?

jquery-toastmessage-plugin is a JQuery plugin which provides android-like notification messages. The toasted messages arriving on the screen in a seamless and natural way. They may or may not disrupt the user and they are still informative. It's a quite nice way to report info or error to the user.

The plugin is entirely customizable. So you can change the positioning, the required user action, the style and so on.

Getting the plugin

The plugin is packaged inside a Jar file (Java Archive). So just download the jar file and unzip it:

jquery.toastmessage.js        <-- the plugin
css/jquery.toastmessage.css <-- the css file
images/error.png <-- image
images/close.gif <-- image
images/notice.png <-- image
images/success.png <-- image
images/warning.png <-- image
META-INF/MANIFEST.MF
META-INF/LICENSE
META-INF/NOTICE

You can also directly grab the files from the latest TAG from github https://github.com/akquinet/jquery-toastmessage-plugin/tree/jquery-toastmessage-plugin-0.2.0.

To get the plugin to work, you need the plugin javascript file, the css file and a couple of images.

Types of toast messages

You have 4 different toast types you can use. Each type comes with its own icon and colored border. The types are:

  • notice
  • success
  • warning
  • error

The following methods will display a toast message:

$().toastmessage('showNoticeToast', 'some message here');
$().toastmessage('showSuccessToast', "some message here");
$().toastmessage('showWarningToast', "some message here");
$().toastmessage('showErrorToast', "some message here");

These toast messages are shown on the upper right side of your browser and will stay for some time before they will fade out automatically.

To remove a special toast you can do that with

$().toastmessage('removeToast', toastObject);

Example:

// reconfiguring the toasts as sticky
$().toastmessage({sticky : true}); // saving the newly created toast into a variable
var myToast = $().toastmessage('showNoticeToast', 'some message here'); // removing the toast
$().toastmessage('removeToast', myToast);

Configuration of your toasts

Sometime the predefined settings are not the good ones. You can alter the configuration to your special use case.

// user configuration of all toastmessages to come:
$().toastmessage('showToast', {
text : 'Hello World',
sticky : true,
position : 'top-right',
type : 'success',
close : function () {console.log("toast is closed ...");}
});

These are the provided configuration properties with its default values:

inEffectDuration:  600,   // in effect duration in miliseconds
stayTime: 3000, // time in miliseconds before the item has to disappear
text: '', // content of the item
sticky: false, // should the toast item sticky or not?
type: 'notice', // notice, warning, error, success
position: 'top-right', // top-left, top-center, top-right, middle-left, middle-center, middle-right
// Position of the toast container holding different toast.
// Position can be set only once at the very first call,
// changing the position after the first call does nothing
closeText: '', // text which will be shown as close button,
// set to '' when you want to introduce an image via css
close: null // callback function when the toastmessage is closed

Besides global configuration for all of your toasts. There is also a more general toast method provided where you can modify the special toast on your hand.

$().toastmessage('showToast', {
text : 'Some information for you ...',
sticky : true,
type : 'notice'
});

This will show a toastmessage of type 'success' which is sticky and will not fade away by itself. All other already showed

To see some more examples please have a look into the Tests in src/test/javascript/ToastmessageTest.js

For further style configuration please see corresponding css file: src/main/resources/css/jquery-toastmessage.css

Disclaimer

This plugin is based on the jquery-notice (http://sandbox.timbenniks.com/projects/jquery-notice/) but is enhanced in several ways:

  • configurable positioning
  • convenience methods for different message types
  • callback functionality when closing the toast
  • included some nice free icons

License

jquery-toastmessage-plugin is licensed under the Apache License 2.0. The project is founded byakquinet A.G.

jquery toastmessage (Jquery类似安卓消息提示框)的更多相关文章

  1. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  2. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  3. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  4. (二)easyUI之消息提示框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. MFC上下浮动与渐入渐出消息提示框实现

    类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...

  6. UWP中的消息提示框(二)

    在UWP中的消息提示框(一)中介绍了一些常见的需要用户主动去干涉的一些消息提示框,接下来打算聊聊不需要用户主动去干涉的一些消息提示框.效果就是像双击退出的那种提示框. 先说说比较简单的吧,通过系统To ...

  7. Flutter Toast消息提示框插件

    Flutter Toast消息提示框插件 在开发flutter项目中,想必大家肯定会用到toast消息提示,说到这里, 大家肯定会想到https://pub.dev/ 插件库, 但是插件市场上有太多类 ...

  8. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  9. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

随机推荐

  1. 高效率Oracle SQL语句

    1.Where子句中的连接顺序: ORACLE采用自下而上的顺序解析WHERE子句. 根据这个原理,表之间的连接必须写在其他WHERE条件之前, 那些可以过滤掉最大数量记录的条件必须写在WHERE子句 ...

  2. Android之MVC——Model通知View去更新(实用)

    下面两段标红加深的代码是重点: import android.app.Activity; import android.os.Bundle; import android.view.View; imp ...

  3. 谷歌死忠速查:可访问谷歌google搜索的IP们

    [见谅! 此文已废了,下面的办法已经无效了!]但是访问我博客并回复的哥们“问天何必”提供了一个方法,详见http://www.gaomn.com/,他提供了一个网站来访问google的,速度还算可以, ...

  4. 如何利用启明星Portal门户系统的Page模块构建文档库

    利用启明星门户系统的Page模块构架可以搭建企业内部的文档管理系统. (一)应用背景 企业内部通常都会使用共享网盘的方式来存放不同部门之间的文档,例如管理员在服务器上对人事部门增加人事部文档文件夹. ...

  5. vijos p1729 Knights

    描述 在一个N*N的正方形棋盘上,放置了一些骑士.我们将棋盘的行用1开始的N个自然数标记,将列用'A'开始的N个大写英文字母标记.举个例子来说,一个标准的8*8的国际象棋棋盘的行标记为1..8,列标记 ...

  6. utf-8-validation

    https://leetcode.com/problems/utf-8-validation/ public class Solution { public boolean validUtf8(int ...

  7. 第十四章 springboot + profile(不同环境读取不同配置)

    具体做法: 不同环境的配置设置一个配置文件,例如:dev环境下的配置配置在application-dev.properties中:prod环境下的配置配置在application-prod.prope ...

  8. ubuntu 12.04 安装无线网卡驱动

    安装ubuntu 12.04后,无线网卡不可用,采用以下方式解决: 1.在终端中运行如下命令,重新安装b43相关的全部驱动和firmware: sudo apt-get install bcmwl-k ...

  9. C#中属性PropertyInfo的使用

    昨天编程遇到一个问题两个类字段都是二十多个,其中有十多个是相同的,需要将一个类的字段赋值给另外一个类,开始的自己想手动的一个个去赋值,后来想来一下C#基础知识,用PropertyInfo就可以解决类似 ...

  10. retrofit okhttp RxJava bk Gson Lambda 综合示例【配置】

    项目地址:https://github.com/baiqiantao/retrofit2_okhttp3_RxJava_butterknife.git <uses-permission andr ...